2022년 9월에 공개 및 베타 웹브라우저에 출시된 흥미로운 기능을 살펴보세요.
안정적인 브라우저 버전
9월에 Firefox 105, Chrome 106, Safari 16이 안정화되었습니다. 즉, 9월의 게시물은 웹 플랫폼에 관한 흥미로운 내용들로 가득합니다.
컨테이너 쿼리
Safari 16에서는 이제 두 가지 엔진에서 사용할 수 있는 컨테이너 쿼리 지원이 추가되었습니다. Safari는 새로운 컨테이너 쿼리 단위에 대한 지원도 추가합니다.
그리드 레이아웃
Safari에서 grid-template-columns 및 grid-template-rows의 subgrid 값을 지원합니다. 그리드 항목이기도 한 그리드에 이 값을 사용하면 그리드에서 새 트랙을 정의하는 대신 상위 트랙의 트랙을 사용합니다.
또한 Safari의 경우 그리드 레이아웃에 그리드 트랙에 애니메이션을 적용하는 기능이 있습니다.
브라우저 지원
- 107
- 107
- 66
- 16
Safari에서는 offset-path, overscroll-behavior, text-align-last, Resolution 미디어 쿼리도 추가로 지원합니다.
인코딩 API
Firefox 105는 인코딩 API의 TextDecoderStream 및 TextEncoderStream 인터페이스를 지원합니다.
새로운 국제 API
Intl API는 콘텐츠를 현지화된 형식으로 표시하는 데 도움이 되며 Chrome 106에는 다양한 숫자 형식 기능이 추가되었습니다.
다른 국제 API와 마찬가지로 이 역시 시스템에 대한 부담을 덜어주므로 모든 사용자에게 복잡한 현지화 코드를 제공하거나 유지할 필요가 없습니다. API는 통화 기호가 이동하는 위치, 날짜와 시간의 형식을 지정하거나 목록을 컴파일하는 방법을 알고 있습니다.
showPicker() 메서드
Safari 16에는 showPicker() 메서드가 포함되어 있어 날짜, 시간, 색상, 파일에 대해 브라우저 선택 도구를 표준 방식으로 표시할 수 있습니다. 자세한 내용은 날짜, 시간, 색상, 파일에 대한 브라우저 선택 도구 표시에서 확인할 수 있습니다.
베타 브라우저 출시
베타 브라우저 버전에서는 브라우저의 다음 안정화 버전에서 실행될 기능을 미리 볼 수 있습니다. 전 세계에 새 기능이 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능 또는 삭제를 테스트해 볼 좋은 기회입니다. 이달의 새로운 베타는 Chrome 107, Safari 16.1, Firefox 106입니다.
Chrome 107에는 그리드 트랙에 애니메이션 적용 기능이 포함되며, 이 기능은 이번 달에 Safari에서도 제공됩니다. Chrome에 출시되면 세 가지 주요 엔진 모두에서 지원됩니다.
또한 Chrome에는 화면 공유 시 실수로 인한 과도한 공유를 방지하기 위해 getDisplayMedia()에 추가된 기능이 있습니다.
displaySurface옵션은 웹 앱이 특정 디스플레이 노출 영역 유형 (탭, 창 또는 화면)을 제공하려고 함을 나타낼 수 있습니다.surfaceSwitching옵션은 Chrome에서 사용자가 공유 탭 간에 동적으로 전환하도록 허용해야 하는지를 나타냅니다.selfBrowserSurface옵션을 사용하여 사용자가 현재 탭을 공유하지 못하도록 차단할 수 있습니다. 이렇게 하면 '거울의 전당'을 피할 수 있습니다.systemAudio옵션을 사용하면 Chrome에서 사용자에게 관련된 오디오 캡처만 제공할 수 있습니다.
Safari 16.1에는 display: contents 접근성에 관한 추가 수정사항, 동적 표시 영역 높이 (dvh) 단위 수정사항, 텍스트 프래그먼트로 스크롤 지원 기능이 포함되어 있습니다.