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

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()에 관해 자세히 알아보려면 스테판 주디스의 hwb() – 인간을 위한 색상 표기법? 도움말을 참고하세요.

브라우저 지원

소스

또한 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에는 Navigator 인터페이스의 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도 포함되어 있습니다.

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

웹 시리즈 초보자용의 일부