다음 사항에 유의하시기 바랍니다.
hwb()색상 표기법을 사용하면 색조, 흰색, 검은색에 따라 색상을 지정하는 새로운 방법을 사용할 수 있습니다.- 가져오기 우선순위를 사용하면 브라우저에 리소스를 다운로드할 순서를 힌트할 수 있습니다.
- 그 외에도 다양한 기능이 있으니까요.
Chrome 101에서 제공되는 기능을 살펴보겠습니다.
hwb() 색상 표기법
스테판 주디스의 도움말에서 '인간을 위한 색상 표기법'으로 설명된 hwb()은 색조, 백색도, 흑색도에 따라 색상을 지정합니다. 다른 색상 표기법과 마찬가지로 선택사항인 알파 구성요소는 불투명도를 지정합니다.
h1 {
color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}
이제 색상을 지정하는 이 방법이 잘 지원됩니다. Firefox에서는 버전 96부터, Safari에서는 버전 15부터 지원됩니다.
가져오기 우선순위
가져오기 우선순위를 사용하면 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의 추가 변경사항은 아래 링크를 참고하세요.