2022년 5월에 공개 및 베타 웹브라우저에 출시된 흥미로운 기능을 살펴보세요.
안정적인 브라우저 버전
5월에 Chrome 102, Safari 15.5, Firefox 100, Firefox 101이 안정화되었습니다.
Chrome 102 및 Safari 15.5에는 inert 속성이 포함되어 있습니다. 이렇게 하면 비대화형인 경우 탭 순서와 접근성 트리에서 요소가 삭제됩니다. 예를 들어 현재 화면 밖에 있거나 숨겨진 요소가 있습니다.
Chrome 102에서는 HTML hidden 속성에 새로운 값 until-found이 포함됩니다. 이렇게 하면 아코디언 패턴에서 찾을 수 있는 것처럼 페이지의 접힌 영역 안에 있는 텍스트에서 페이지 내 찾기 및 텍스트 프래그먼트로 스크롤이 사용 설정됩니다. 자세한 내용은 hidden=until-found를 사용하여 접힌 콘텐츠에 액세스할 수 있도록 만들기 게시물을 참고하세요.
Chrome 102는 단일 페이지 애플리케이션에서 클라이언트 측 라우팅을 표준화하는 API인 Navigation API를 제공합니다. 이 API의 이전 이름은 App History API였습니다.
Firefox 101은 구성 가능한 스타일시트를 지원합니다. CSSStyleSheet() 생성자와 replace() 및 replaceSync() 메서드가 지원됩니다. 구성 가능한 스타일시트를 사용하면 Shadow DOM과 함께 사용할 스타일시트를 쉽게 만들 수 있습니다. 다음 예에서는 CSSStyleSheet() 생성자를 사용하여 스타일시트를 만들고, replaceSync() 메서드로 CSS 규칙을 추가하고, 결과 규칙이 콘솔에 출력됩니다.
const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync('body { color: red; }');
console.log(stylesheet.rules[0].cssText);
Firefox 101의 prefers-contrast 미디어 기능도 지원되어 여러 브라우저에서 이 기능을 사용할 수 있습니다.
베타 브라우저 출시
베타 브라우저 버전에서는 브라우저의 다음 안정화 버전에서 실행될 기능을 미리 볼 수 있습니다. 전 세계에 새 기능이 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능 또는 삭제를 테스트해 볼 좋은 기회입니다.
4월에 새로운 베타는 Chrome 103 및 Firefox 102였습니다.
Firefox 102에는 update 미디어 기능이 포함되어 있습니다. 출력 장치가 렌더링된 후 콘텐츠의 모양을 수정할 수 있는지 여부를 쿼리하는 데 사용됩니다. 다음 값이 허용됩니다.
none- 렌더링된 콘텐츠는 업데이트할 수 없습니다. (예: 인쇄된 문서).
slow- 기기에서 콘텐츠를 업데이트할 수 있지만 속도가 너무 느려 자연스러운 애니메이션을 표시할 수 없습니다. (예: 전자 잉크 화면)
fast- 애니메이션을 렌더링할 수 있을 만큼 콘텐츠가 동적으로 빠르게 변경될 수 있습니다. 컴퓨터 또는 휴대전화 화면).
Chrome 103에는 사용자가 로컬에 설치된 글꼴에 액세스할 수 있게 해주는 Local Font Access API가 포함되어 있습니다.
이 베타 기능은 곧 안정적인 브라우저에서 지원될 예정입니다.
수정: 이 게시물의 이전 버전에는 이번 출시에서 제공되지 않는 Element.isVisible() 메서드에 대한 언급이 포함되어 있습니다.