11월의 웹 플랫폼 새로운 기능

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

Rachel Andrew

안정적인 브라우저 버전

11월에 Firefox 107 및 Chrome 108이 안정화되었습니다. 웹 플랫폼에 어떤 의미가 있는지 살펴보겠습니다.

Android용 Chrome의 레이아웃 표시 영역 동작 변경

Android의 Chrome 108부터 터치 키보드가 표시될 때 레이아웃 뷰포트가 작동하는 방식이 변경되었습니다. 자세한 내용은 Android의 Chrome에 적용될 뷰포트 크기 조절 동작 변경사항에 대비하기를 참고하세요.

새로운 표시 영역 단위

또한 Chrome 108에는 새로운 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에서는 contain-intrinsic-size 축약형 CSS 속성이 긴 형식 contain-intrinsic-width, contain-intrinsic-height 및 논리적 속성 contain-intrinsic-block-size, contain-intrinsic-inline-size와 함께 지원됩니다.

크기 제한이 적용되는 UI 요소의 크기를 지정하는 데 적용됩니다. 이렇게 하면 사용자 에이전트가 하위 요소를 렌더링하지 않고도 요소의 크기를 결정할 수 있습니다. 요소에 크기 제한이 적용되는 경우에 유용합니다.

CSS 단편화 avoid 키워드 지원

Chrome 108에는 인쇄 시 CSS 단편화 속성 break-before, break-after, break-inside의 avoid 값에 대한 지원이 포함되어 있습니다. 이 값은 적용되는 요소의 앞, 뒤 또는 내부에서 줄바꿈을 피하도록 브라우저에 지시합니다. 예를 들어 다음 CSS는 페이지 나누기에서 그림이 나누어지지 않도록 합니다.

figure {
    break-inside: avoid;
}

이는 LayoutNG를 사용하는 인쇄 지원이 포함되었기 때문에 추가된 것으로서 버그가 적은 현대적 환경을 제공합니다. LayoutNG 자세히 알아보기

Federated Credential Management API

Federated Credential Management API (FedCM)는 웹에서 제휴 ID 흐름의 추상화를 제공합니다. 사용자가 ID 공급업체에서 계정을 선택하여 웹사이트에 로그인할 수 있는 브라우저 매개 대화상자를 노출합니다. FedCM은 Chrome 108부터 제공됩니다. FedCM 공지사항 블로그 게시물에서 자세히 알아보세요.

베타 브라우저 출시

베타 브라우저 버전에서는 다음번 브라우저의 안정화 버전에 포함될 기능을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능 또는 삭제를 테스트하기에 좋은 시기입니다. 출시일이 겹쳐 이번 달에는 Firefox 108이 유일한 새 베타이며 Safari 16.2 베타는 아직 진행 중입니다.

Firefox 108에서는 <source> 요소가 <picture> 요소의 하위 요소인 경우 height 및 width 속성을 지원합니다. 이 속성은 이미지의 높이 또는 너비(단위 없음, 픽셀)를 정수로 허용합니다.

컨테이너 쿼리는 Firefox에서 현재 구현되고 있습니다. Firefox 108 베타의 layout.css.container-queries.enabled 플래그 뒤에는 컨테이너 쿼리 길이 단위(cqw, cqh, cqi, cqb, cqmin, cqmax)가 있습니다. 쿼리 컨테이너의 크기를 기준으로 한 길이 단위입니다.

웹 시리즈 초보자용의 일부