2022년 10월에 공개 및 베타 웹브라우저에 출시된 흥미로운 기능을 살펴보세요.
안정적인 브라우저 버전
10월에 Firefox 106, Chrome 107, Safari 16.1이 안정화되었습니다. 이것이 웹 플랫폼에 어떤 의미가 있는지 살펴보겠습니다.
격자 트랙의 애니메이션
Microsoft 기여자의 노력 덕분에 이제 Chrome에서 grid-template-columns 및 grid-template-rows 값을 보간할 수 있습니다. 즉, 그리드 레이아웃은 애니메이션 또는 전환의 중간 지점에서 맞추기 대신 상태 간에 부드럽게 전환할 수 있습니다.
브라우저 지원
- 107
- 107
- 66
- 16
getDisplayMedia()에 추가된 프로그램
또한 Chrome에는 화면 공유 시 실수로 인한 과도한 공유를 방지하기 위해 getDisplayMedia()에 추가된 기능이 있습니다.
displaySurface옵션은 웹 앱이 특정 디스플레이 노출 영역 유형 (탭, 창 또는 화면)을 제공하려고 함을 나타낼 수 있습니다.surfaceSwitching옵션은 Chrome에서 사용자가 공유 탭 간에 동적으로 전환하도록 허용해야 하는지를 나타냅니다.selfBrowserSurface옵션을 사용하여 사용자가 현재 탭을 공유하지 못하도록 차단할 수 있습니다. 이렇게 하면 '거울의 전당'을 피할 수 있습니다.systemAudio옵션을 사용하면 Chrome에서 사용자에게 관련된 오디오 캡처만 제공할 수 있습니다.
Safari 16.1에는 getDisplayMedia 지원도 포함되어 특정 Safari 창 캡처 지원이 추가되었습니다.
CSS의 글꼴 기술 및 기능 지원 테스트
Firefox에서 @supports를 사용한 특성 쿼리에 font-tech() 및 font-format() 함수를 추가했습니다. 다음 예는 COLRv1 글꼴 지원을 테스트합니다.
@supports font-tech(color-COLRv1) {
}
더 많은 예는 MDN에서 확인할 수 있습니다.
텍스트 프래그먼트로 스크롤
Safari 16.1에는 특정 텍스트 프래그먼트가 지정된 URL로 이동하는 기능 지원이 추가된 텍스트 프래그먼트로 스크롤 지원이 포함되어 있습니다.
AVIF 지원
Safari 16에는 스틸 AVIF 이미지 지원이 포함되었으며 Safari 16.1에는 macOS Ventura, iOS 16 및 iPadOS 16에서 애니메이션 AVIF 이미지 지원 기능이 포함되어 있습니다.
Safari용 웹 푸시
Safari 16.1부터 macOS Ventura의 Safari에 웹 푸시 지원 기능이 추가되었습니다. 이 API는 Push API와 Notifications API를 사용하며 자세한 내용은 웹 푸시 만나보기 도움말을 참고하세요. Safari에서 웹 푸시를 사용할 수 있다는 것은 이제 이 세 가지 주요 엔진 모두에서 사용할 수 있다는 뜻입니다.
베타 브라우저 출시
베타 브라우저 버전에서는 브라우저의 다음 안정화 버전에서 실행될 기능을 미리 볼 수 있습니다. 전 세계에 새 기능이 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능 또는 삭제를 테스트해 볼 좋은 기회입니다. 이달의 새로운 베타는 Chrome 108, Firefox 107, Safari 16.2입니다.
Chrome 108에서는 인쇄할 때 CSS 분할 속성 break-before, break-after, break-inside의 avoid 값을 지원합니다. 이 값은 적용되는 요소의 앞, 뒤 또는 내부에서 중단되지 않도록 브라우저에 지시합니다. 예를 들어 다음 CSS는 페이지 나누기에서 그림이 깨지는 것을 방지합니다.
figure {
break-inside: avoid;
}
Chrome 108에서는 교체된 요소에서 오버플로가 작동하는 방식을 변경하기 시작했으며, 이로 인해 상황에 따라 시각적 변경사항이 발생할 수 있습니다. 자세한 내용과 표시되는 문제를 해결하는 방법은 CSS에서 대체된 요소의 오버플로 변경사항 도움말을 참고하세요.
터치 키보드가 표시될 때 Android의 Chrome에서 레이아웃 표시 영역이 작동하는 방식이 변경되었습니다. Android용 Chrome에 적용될 표시 영역 크기 조절 동작 변경사항에 대비를 읽고 다음 달에 안정화 버전으로 배송될 수 있도록 준비하는 방법을 알아보세요.
또한 Chrome에는 새로운 CSS 표시 영역 단위가 있습니다. 여기에는 소형 (svw, svh, svi, svb, svmin, svmax), 대형 (lvw, lvh, lvi, lvb, lvmin, lvmax), 동적 (dvw, dvh, dvi, dvb, dvmin, dvmax), 논리적 (vi, vb) 단위가 포함됩니다. 이 단위는 이미 Firefox와 Safari에 구현되어 있습니다.
Firefox 107에서는 COLRv1 글꼴 지원이 사용 설정되어 Chrome이 이 글꼴 기술을 지원하게 됩니다. 또한 Chrome 108에서는 글꼴에 font-tech() 및 font-format() 함수 지원을 추가하여 @supports를 사용한 쿼리를 지원합니다.
Firefox에서도 contain-intrinsic-size 지원을 추가하여 Chrome에 통합되어 이 기능을 지원하는 두 개의 브라우저를 만듭니다.
Safari 16.2 베타에는 크기 조정, 스크롤 맞추기 등 여러 CSS 수정사항이 포함되어 있습니다.