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

5월 웹 플랫폼 신규 부문

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

Rachel Andrew

안정적인 브라우저 출시

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() 메서드에 대한 언급이 포함되어 있었습니다.

웹 시리즈 초보자의 일부