2022년 3월에 공개 및 베타 웹브라우저에 출시된 흥미로운 기능을 살펴보세요.
안정적인 브라우저 버전
3월에 Chrome 99, Chrome 100, Firefox 98, Safari 15.4가 안정화되었습니다. 이에 따라 새로운 기능이 플랫폼에 완전히 추가되었고, 이렇게 추가된 많은 기능이 3개의 브라우저 엔진 모두에서 사용할 수 있게 되었습니다. 이 게시물에서는 브라우저 간 상호 운용성을 제공하는 추가 기능에 집중했지만, 각 엔진에 추가된 모든 기능을 보려면 출시 노트를 확인하세요.
Chrome 99 및 Safari 15.4에는 캐스케이드 레이어가 포함되어 있습니다. @layer at-rule은 캐스케이드 레이어를 정의하여 특정성을 제어하는 데 도움을 줍니다. 이 기능들은 Firefox와 통합되어, 이제 세 가지 브라우저 엔진 모두에서 캐스케이드 레이어를 사용할 수 있습니다. 캐스케이드 레이어에 대한 자세한 내용은 브라우저에 도입되는 캐스케이드 레이어를 참고하세요.
Chrome 100에서는 CSS mix-blend-mode 속성에 새로운 plus-lighter 값을 포함합니다. 이 값은 모든 픽셀 또는 일부 픽셀의 값이 동일한 경우 두 요소를 크로스 페이드할 때 유용합니다. 이 방법으로 해결하는 문제에 대한 자세한 내용은 현재 두 개의 DOM 요소를 크로스 페이드하는 것이 불가능합니다를 참조하세요.
브라우저 지원
- 100
- 100
- 99
- 9.1
Safari 15.4에는 CSS 포함을 허용하는 contain 속성이 포함되어 있습니다.
또한 Safari 15.4에는 accent-color가 있어서 일부 양식 컨트롤에 사용되는 강조 색상을 제어할 수 있습니다.
Firefox 98 및 Safari 15.4에는 대화상자를 나타내는 <dialog> 요소가 추가되었습니다.
Safari 15.4에서도 :focus-visible 의사 클래스 지원이 완료되었습니다. 이에 대한 구현 작업은 이갈리아가 직접 진행했습니다.
베타 브라우저 출시
베타 브라우저 버전에서는 브라우저의 다음 안정화 버전에서 실행될 기능을 미리 볼 수 있습니다. 전 세계에 새 기능이 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능 또는 삭제를 테스트해 볼 좋은 기회입니다.
3월의 새로운 베타는 Chrome 101 및 Firefox 99였습니다.
Chrome 101 베타에는 hwb 색상 표기법이 포함되어 있습니다. 색조, 백색도, 흑백에 따라 색상을 지정합니다. 다른 색 표기법과 마찬가지로 선택적 알파 구성요소는 불투명도를 지정합니다.
h1 {
color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}
Firefox 99에는 탐색기 인터페이스의 pdfViewerEnabled 속성이 포함되어 있습니다. 이 속성은 브라우저가 PDF 파일의 인라인 표시를 지원하는지를 나타냅니다.
if (!navigator.pdfViewerEnabled) {
// The browser does not support inline viewing of PDF files.
}
이 베타 기능은 곧 안정적인 브라우저에서 지원될 예정입니다.