이 페이지는 Cloud Translation API를 통해 번역되었습니다.

3월에 웹 플랫폼을 처음 사용함

2022년 3월에 안정화 버전 및 베타 웹브라우저에 도입된 몇 가지 흥미로운 기능을 살펴보세요.

Rachel Andrew

안정적인 브라우저 출시

3월에는 Chrome 99, Chrome 100, Firefox 98, Safari 15.4가 안정화되었습니다. 이를 통해 플랫폼에 새로운 기능이 대거 추가되었으며, 이러한 추가 기능 중 다수는 세 가지 브라우저 엔진 모두에서 사용할 수 있게 되었습니다. 이 게시물에서 저는 브라우저 간 상호 운용성을 제공하는 이러한 추가 기능을 집중적으로 살펴보았지만, 출시 노트에서 각 엔진에 추가된 모든 기능을 확인해 보세요.

Chrome 99 및 Safari 15.4에는 카스케이드 레이어가 포함되었습니다. @layer at-rule은 특이성을 제어하는 데 도움이 되는 계단식 레이어를 정의합니다. 이제 Firefox에 합류하여 세 가지 브라우저 엔진에서 모두 캐스케이드 레이어를 사용할 수 있습니다. 브라우저에 계층 구조 레이어가 도입됩니다에서 계층 구조 레이어에 대해 자세히 알아보세요.

브라우저 지원

소스

Chrome 100에는 CSS mix-blend-mode 속성의 새 값 plus-lighter가 포함되어 있습니다. 이 값은 픽셀의 일부 또는 전체가 동일한 값을 갖는 경우 두 요소를 교차 페이드할 때 유용합니다. 이 방법으로 해결되는 문제에 대한 자세한 내용은 현재 두 DOM 요소 간의 크로스 페이드가 불가능함을 참고하세요.

브라우저 지원

Safari 15.4에는 CSS를 포함할 수 있는 contain 속성이 포함되어 있습니다.

브라우저 지원

소스

또한 Safari 15.4에는 일부 양식 컨트롤에 사용되는 강조 색상을 제어할 수 있는 accent-color가 있습니다.

브라우저 지원

소스

Firefox 98 및 Safari 15.4에서는 대화상자를 나타내는 <dialog> 요소가 출시되었습니다.

브라우저 지원

소스

또한 Safari 15.4에서는 :focus-visible 가상 클래스에 대한 지원을 완료했습니다. 이 구현 작업은 Igalia에서 담당했습니다.

브라우저 지원

소스

베타 브라우저 출시

베타 브라우저 버전에서는 다음번 브라우저의 안정화 버전에 포함될 기능을 미리 볼 수 있습니다. 이 버전이 출시되기 전에 사이트에 영향을 미칠 수 있는 새로운 기능이나 삭제 기능을 테스트해 보는 것이 좋습니다.

3월의 새로운 베타는 Chrome 101 및 Firefox 99였습니다.

Chrome 101 베타에는 hwb 색상 표기법이 포함되어 있습니다. 색조, 흰색, 검은색에 따라 색상을 지정합니다. 다른 색상 표기법과 마찬가지로 선택사항인 알파 구성요소는 불투명도를 지정합니다.

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

브라우저 지원

소스

Firefox 99에는 Navigator 인터페이스의 pdfViewerEnabled 속성이 포함되어 있습니다. 이 속성은 브라우저가 PDF 파일의 인라인 표시를 지원하는지 여부를 나타냅니다.

if (!navigator.pdfViewerEnabled) {
  // The browser does not support inline viewing of PDF files.
}

브라우저 지원

소스

이 베타 기능은 안정적인 브라우저에서 곧 제공될 예정입니다.

웹을 처음 접하는 시리즈의 일부