2022년 4월에 공개 및 베타 웹브라우저에 출시된 흥미로운 기능을 살펴보세요.
안정적인 브라우저 버전
4월에 Chrome 101 및 Firefox 99가 안정화되었습니다. 지난달 범퍼 크롭 기능이 출시된 후 4월에는 다소 조용해졌지만 몇 가지 흥미로운 사실을 알게 되었습니다.
Chrome 101에는 hwb 색상 표기법이 포함되어 있습니다. 색조, 백색도, 흑백에 따라 색상을 지정합니다. 다른 색 표기법과 마찬가지로 선택적 알파 구성요소는 불투명도를 지정합니다.
h1 {
color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}
hwb()에 관해 자세히 알아보려면 Stefan Judis의 hwb() – a color notation for humans?의 도움말을 참고하세요.
또한 Chrome 101에는 우선순위 가져오기 기능이 있습니다. 이를 통해 fetchpriority 속성을 사용하여 리소스를 다운로드해야 하는 순서를 브라우저에 알려줄 수 있습니다. 아래 예에서 우선순위가 낮은 이미지는 fetchpriority="low"로 표시되어 있습니다.
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">
다른 브라우저에서는 아직 가져오기 우선순위를 사용할 수 없지만 Chromium 101을 기반으로 하는 브라우저를 사용하는 모든 사용자에게 도움이 되도록 지금 바로 가져오기 우선순위를 사용할 수 있습니다.
Firefox 99에는 탐색기 인터페이스의 pdfViewerEnabled 속성이 포함되어 있습니다. 이 속성은 브라우저가 PDF 파일의 인라인 표시를 지원하는지를 나타냅니다.
if (!navigator.pdfViewerEnabled) {
// The browser does not support inline viewing of PDF files.
}
베타 브라우저 출시
베타 브라우저 버전에서는 브라우저의 다음 안정화 버전에서 실행될 기능을 미리 볼 수 있습니다. 전 세계에 새 기능이 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능 또는 삭제를 테스트해 볼 좋은 기회입니다.
4월의 새로운 베타는 Chrome 102, Firefox 100, Safari 15.5였습니다.
Chrome 102, Safari 15.5, Firefox 미리보기 버전에는 inert 속성이 포함됩니다. 이렇게 하면 비대화형인 경우 탭 순서와 접근성 트리에서 요소가 삭제됩니다. 예를 들어 현재 화면 밖에 있거나 숨겨진 요소가 있습니다.
Chrome 102에서는 HTML hidden 속성에 새로운 값 until-found이 포함됩니다. 이렇게 하면 아코디언 패턴에서 찾을 수 있는 것처럼 페이지의 접힌 영역 안에 있는 텍스트에서 페이지 내 찾기 및 텍스트 프래그먼트로 스크롤이 사용 설정됩니다. 자세한 내용은 hidden=until-found를 사용하여 접힌 콘텐츠에 액세스할 수 있도록 만들기 게시물을 참고하세요.
또한 Chrome 102에는 사용자가 로컬에 설치된 글꼴에 액세스할 수 있게 해주는 Local Font Access API가 포함되어 있습니다.
이 베타 기능은 곧 안정적인 브라우저에서 지원될 예정입니다.