2022년 11월에 공개 및 베타 웹브라우저에 출시된 흥미로운 기능을 살펴보세요.
안정적인 브라우저 버전
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에서 구현되었으며, 이는 이제 이러한 광고 단위를 3개의 기본 브라우저 엔진에서 상호 운용할 수 있다는 뜻입니다.
크고 작은 동적 표시 영역 단위를 읽어보세요.
브라우저 지원
- 108
- 108
- 101
- 15.4
contain-intrinsic-size 약식 CSS 속성은 Firefox 107에서 긴 형식 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)가 있습니다. 이는 쿼리 컨테이너의 크기를 기준으로 한 길이 단위입니다.