10월에 도입된 새로운 웹 플랫폼

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

Rachel Andrew

안정적인 브라우저 출시

10월에 Firefox 106, Chrome 107, Safari 16.1이 안정화되었습니다. 이것이 웹 플랫폼에 어떤 의미가 있는지 살펴보겠습니다.

그리드 트랙의 애니메이션

Microsoft의 참여자 덕분에 이제 Chrome에서 grid-template-columns 및 grid-template-rows 값을 보간할 수 있습니다. 즉, 그리드 레이아웃은 애니메이션 또는 전환의 중간 지점에서 맞추는 대신 상태 간에 원활하게 전환할 수 있습니다.

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 및 Notifications API를 사용합니다. 자세한 내용은 Meet Web Push 도움말을 참고하세요. 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에서는 @supports를 사용한 기능 쿼리에 font-tech() 및 font-format() 함수 지원을 추가합니다.

Firefox는 contain-intrinsic-size 지원도 추가하여 Chrome과 함께 이 기능을 지원하는 두 가지 브라우저를 만들었습니다.

Safari 16.2 베타에는 크기 조절 및 스크롤 스냅을 비롯한 여러 CSS 수정사항이 포함되어 있습니다.

웹을 처음 접하는 시리즈의 일부