Chrome 99의 새로운 기능

Pete LePage

다음 사항에 유의하시기 바랍니다.

• 단 몇 주 후면 Chrome 및 Firefox 버전 100의 카운트다운이 시작됩니다.
• CSS 캐스케이드 레이어를 사용하면 CSS를 더 세부적으로 제어할 수 있으며 스타일별 충돌을 방지할 수 있습니다.
• showPicker() 메서드를 사용하면 date, color, datalist와 같은 <input> 요소의 브라우저 선택 도구를 프로그래매틱 방식으로 표시할 수 있습니다.
• 이 외에도 다양한 기능이 준비되어 있습니다.

저는 피트 레페이지입니다. 이제 Chrome 99의 개발자를 위한 새로운 기능을 살펴보겠습니다

Chrome 100 및 Firefox 100

Chrome 100은 2022년 3월 말에 출시되고 Firefox 100은 5월 초에 바로 출시됩니다. 두 버전 모두 주요 버전 번호이며 3자리로 롤오버됩니다. 그러나 코드에 두 자리가 필요한 경우 새 버전 번호로 인해 문제가 발생할 수 있습니다.

버전 번호를 확인하거나 사용자 에이전트 문자열을 파싱하는 모든 코드는 문제가 없는지 확인해야 합니다.

Chrome에서 #force-major-version-to-100 플래그는 현재 버전 번호를 100으로 변경합니다.

Firefox Nightly의 설정 메뉴에서 'Firefox 100 User-Agent String' 옵션을 사용 설정할 수도 있습니다. 사이트를 테스트하여 모든 것이 예상대로 작동하는지 확인하는 것이 좋습니다.

자세한 내용은 Chrome 및 Firefox 곧 메이저 버전 100 출시를 참고하세요.

CSS 캐스케이드 레이어

Chrome 99에서 CSS 캐스케이드 레이어 및 CSS @layer 규칙이 지원됩니다. 스타일별 충돌을 방지하기 위해 CSS 파일을 더 명확하게 제어할 수 있습니다. 이는 대규모 코드베이스, 디자인 시스템, 애플리케이션에서 서드 파티 스타일을 관리할 때 특히 유용합니다.

CSS 캐스케이드에 새 레이어를 도입합니다. 레이어 스타일에서는 레이어의 우선순위가 항상 선택기의 특정성보다 높기 때문입니다.

.card 내 .post 내 링크의 스타일을 지정하려는 경우 더 구체적인 선택기가 적용됩니다. @layer 규칙을 사용하면 각 스타일의 스타일 구체성을 더 명확하게 파악할 수 있고 카드의 링크 스타일이 게시물의 링크 스타일보다 우선 적용되도록 할 수 있습니다.

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

이는 단계식 우선순위 때문입니다. 계층화된 스타일은 새로운 계단식 평면을 만듭니다.

CSS @layer 규칙을 사용한 캐스케이드 레이어는 Chrome 99, Firefox 97, Safari 15.4 베타에서 지원됩니다. 자세한 내용은 브라우저에 캐스케이드 레이어 도입을 참고하세요.

입력 요소용 showPicker()

오랫동안 우리는 맞춤 위젯 라이브러리나 꿀팁에 의존하여 날짜 선택 도구를 표시해야 했습니다. HTML InputElements에 관한 새로운 showPicker() 메서드가 있습니다. 이는 선택 도구가 있는 date뿐만 아니라 time, color 및 기타 <input> 요소에서도 브라우저 선택 도구를 표시하는 표준 방법입니다.

사용하려면 <input> 요소에서 showPicker()를 호출합니다. 이 예에서는 try…catch 블록에 래핑했습니다. 이렇게 하면 브라우저에서 API를 지원하지 않거나 선택 도구를 표시할 수 없는 경우 대체 값을 제공할 수 있습니다. 따라서 사용자에게 좋은 경험을 제공해야 합니다.

const button = document.querySelector("button");
const dateInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    dateInput.showPicker();
    // A date picker is shown.
  } catch (error) {
    // Use an external library when this fails.
  }
});

자세한 내용은 날짜, 시간, 색상, 파일의 브라우저 선택 도구 표시와 showPicker()를 사용할 수 있는 모든 다양한 <input> 유형을 참고하세요.

그 외에도 다양한 기능 제공

물론 더 많은 기능이 있습니다.

Canvas2D API가 다음과 같은 새로운 기능을 추가하여 업데이트되었습니다.

• ContextLost 및 ContextRestored의 새 일정 2개
• willReadFrequently 옵션
• CSS 텍스트 수정자 지원 추가
• 다양한 기능을 활용해 보세요.

PWA가 어두운 모드용 웹 앱 매니페스트에 대체 색상을 제공할 수 있는 새로운 오리진 트라이얼이 출시되었습니다.

이제 필기 인식 API가 출시되었습니다.

추가 자료

여기에서는 주요 특징 중 일부만 다루었습니다. Chrome 99의 추가 변경사항은 아래 링크를 확인하세요.

• Chrome DevTools의 새로운 기능 (99)
• Chrome 99 지원 중단 및 삭제
• Chrome 99용 ChromeStatus.com 업데이트
• Chromium 소스 저장소 변경사항 목록
• Chrome 출시 캘린더

구독

최신 소식을 확인하려면 Chrome 개발자 YouTube 채널을 구독하세요. 그러면 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

저는 Pete LePage입니다. Chrome 100이 출시되는 대로 Chrome의 새로운 기능을 알려드리겠습니다.