4월의 웹 플랫폼 새로운 기능

2022년 4월에 안정화 및 베타 웹브라우저에 도입된 흥미로운 기능을 알아보세요.

Rachel Andrew

안정화 브라우저 출시

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? 도움말을 참고하세요.

Browser Support

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

Source

Chrome 101에는 Fetch Priority 기능도 있습니다. 이를 통해 fetchpriority 속성을 사용하여 리소스를 다운로드해야 하는 순서를 브라우저에 힌트로 제공할 수 있습니다. 아래 예시에서 우선순위가 낮은 이미지는 fetchpriority="low"로 표시됩니다.

<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

가져오기 우선순위는 아직 다른 브라우저에서 사용할 수 없지만 지금 바로 사용하여 Chromium 101을 기반으로 하는 브라우저를 사용하는 모든 사용자에게 혜택을 제공할 수 있습니다.

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 132.
  • Safari: 17.2.

Source

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

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

Browser Support

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

Source

베타 브라우저 출시

베타 브라우저 버전에서는 다음 공개 버전 브라우저에 포함될 내용을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 미칠 수 있는 새로운 기능이나 삭제를 테스트하기에 좋은 시기입니다.

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도 포함되어 있습니다.

이 베타 기능은 곧 안정화 버전 브라우저에 적용될 예정입니다.

웹 초보자 시리즈의 일부