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

5월 웹 플랫폼 신규 부문

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

Rachel Andrew

안정화 브라우저 출시

5월에는 Chrome 102, Safari 15.5, Firefox 100, Firefox 101이 안정화되었습니다.

Chrome 102 및 Safari 15.5에는 inert 속성이 포함되어 있습니다. 이렇게 하면 비대화형 요소가 탭 순서와 접근성 트리에서 삭제됩니다. 예를 들어 현재 화면에 표시되지 않거나 숨겨진 요소입니다.

Browser Support

Source

Chrome 102에는 HTML hidden 속성의 새로운 값 until-found가 포함되어 있습니다. 이렇게 하면 아코디언 패턴에서 볼 수 있듯이 페이지의 접힌 영역 내에 있는 텍스트에서 페이지 내 검색 및 텍스트 프래그먼트로 스크롤이 가능합니다. hidden=until-found를 사용하여 접힌 콘텐츠에 액세스 가능하도록 만들기 게시물에서 자세히 알아보세요.

Chrome 102에는 싱글 페이지 애플리케이션에서 클라이언트 측 라우팅을 표준화하는 API인 Navigation API가 제공됩니다. 이 API의 이전 이름은 앱 기록 API였습니다.

Browser Support

Source

Firefox 101에서는 생성 가능한 스타일시트를 지원합니다. 지원에는 CSSStyleSheet() 생성자와 replace(), replaceSync() 메서드가 포함됩니다. Constructable stylesheets를 사용하면 Shadow DOM과 함께 사용할 스타일시트를 더 쉽게 만들 수 있습니다. 다음 예에서는 CSSStyleSheet() 생성자를 사용하여 스타일시트를 만들고, replaceSync() 메서드로 CSS 규칙을 추가하고, 결과 규칙을 콘솔에 출력합니다.

const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync('body { color: red; }');
console.log(stylesheet.rules[0].cssText);

Browser Support

Source

Firefox 101에는 prefers-contrast 미디어 기능도 포함되어 있어 이 기능을 크로스 브라우저로 사용할 수 있습니다.

Browser Support

Source

베타 브라우저 출시

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

4월의 새로운 베타는 Chrome 103 및 Firefox 102였습니다.

Firefox 102에는 update 미디어 기능이 포함되어 있습니다. 이는 콘텐츠가 렌더링된 후 출력 기기에서 콘텐츠의 모양을 수정할 수 있는지 쿼리하는 데 사용됩니다. 다음 값을 허용합니다.

none: 콘텐츠가 렌더링되면 업데이트할 수 없습니다. 예를 들어 인쇄된 문서가 있습니다.
slow: 기기가 콘텐츠를 업데이트할 수 있지만 너무 느려서 부드러운 애니메이션을 표시할 수 없습니다. 예를 들어 E-ink 화면이 있습니다.
fast: 콘텐츠는 애니메이션을 렌더링할 수 있을 만큼 빠르게 동적으로 변경될 수 있습니다. 예를 들어 컴퓨터 또는 휴대전화 화면이 있습니다.

Browser Support

Source

Chrome 103에는 사용자의 로컬에 설치된 글꼴에 액세스할 수 있는 Local Font Access API가 포함되어 있습니다.

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

수정: 이 게시물의 이전 버전에는 이번 출시에서 제공되지 않는 Element.isVisible() 메서드가 언급되어 있었습니다.

웹 초보자 시리즈의 일부

5월 웹 플랫폼 신규 부문 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

안정화 브라우저 출시

베타 브라우저 출시

5월 웹 플랫폼 신규 부문