Chrome 101의 새로운 기능

Rachel Andrew

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

Chrome 101에서 사용할 수 있는 기능을 살펴보겠습니다.

hwb() 색상 표기

스테판 주디스의 기사에서 '인간을 위한 색상 표기법'으로 설명된 hwb()는 색조, 흰색, 흑백에 따라 색상을 지정합니다. 다른 색 표기와 마찬가지로 선택적 알파 구성요소는 불투명도를 지정합니다.

h1 {
  color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}

색상 지정 방법은 현재 잘 지원됩니다. Firefox에서는 버전 96, Safari에서는 버전 15부터 지원됩니다.

우선순위 가져오기

Fetch Priority를 사용하면 fetchpriority 속성을 사용하여 리소스를 다운로드해야 하는 순서를 브라우저에 알려줄 수 있습니다. "high", "low", "auto" 값이 허용됩니다.

  • "high": 리소스의 우선순위가 높다고 간주하고, 브라우저의 휴리스틱이 이를 방지하지 않는 한 브라우저에서 우선순위를 지정하도록 합니다.
  • "low": 리소스의 우선순위가 낮다고 간주하고 휴리스틱이 허용하는 경우 브라우저에서 리소스의 우선순위를 낮춥니다.
  • "auto": 브라우저가 적절한 우선순위를 결정하도록 하는 기본값입니다.

아래 예에서 우선순위가 낮은 이미지는 fetchpriority="low"로 표시되어 있습니다.

<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

Fetch Priority API로 리소스 로드 최적화에서 다양한 사용 사례에 대해 자세히 알아보세요.

이번 출시에 포함된 기타 항목

USBDevice 객체에 대한 새로운 forget() 메서드가 있습니다. 이렇게 하면 이전에 권한이 부여된 기기를 삭제할 수 있습니다. 예를 들어 여러 기기와 공유하는 컴퓨터에서 사용되는 애플리케이션입니다.

또한 웹 USB의 경우 USBDevice 내의 관련 속성에 [SameObject] 를 지원하도록 수정되었습니다. 사양 변경은 초안 사양의 PR에서 확인할 수 있습니다.

보안 (HTTPS) 출처에서 로드되었지만 안전하지 않은 (HTTPS가 아닌) 컨텍스트에 의해 인스턴스화되는 전용 작업자는 더 이상 안전한 것으로 간주되지 않습니다. 즉, 이러한 작업자 컨텍스트 내에서 self.isSecureContext가 이제 false입니다. - self.caches 및 self.storageFoundation는 더 이상 사용할 수 없습니다.

window.open()의 popup 인수는 이제 이 인수를 파싱하기 위한 사양의 최근 변경에 따라 true로 평가됩니다. 이전에는 popup가 true와 같게 설정되면 window.open()가 false를 의미하는 것으로 해석되었습니다. 이 변경사항으로 인해 불리언 기능을 더 쉽게 사용하고 이해할 수 있습니다.

추가 자료

여기에서는 몇 가지 주요 사항만 다룹니다. 아래 링크에서 Chrome 101의 추가 변경사항을 확인하세요.