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

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

안정적인 브라우저 출시

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

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

브라우저 지원

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 97
  • Safari: 15.4

소스

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

브라우저 지원

  • Chrome: 100.
  • Edge: 100
  • Firefox: 99.
  • Safari: 9.1

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

브라우저 지원

  • Chrome: 52.
  • Edge: 79
  • Firefox: 69.
  • Safari: 15.4

소스

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

브라우저 지원

  • Chrome: 93.
  • Edge: 93.
  • Firefox: 92.
  • Safari: 15.4

소스

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

브라우저 지원

  • Chrome: 37.
  • Edge: 79
  • Firefox: 98.
  • Safari: 15.4

소스

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

브라우저 지원

  • Chrome: 86
  • Edge: 86.
  • Firefox: 85.
  • Safari: 15.4

소스

베타 브라우저 출시

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

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

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

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

브라우저 지원

  • Chrome: 101.
  • Edge: 101.
  • Firefox: 96.
  • Safari: 15

소스

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

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

브라우저 지원

  • Chrome: 94.
  • Edge: 94.
  • Firefox: 99.
  • Safari 16.4.

소스

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

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