새로운 CSS 표시 영역 단위, Federated Credential Management API, 가변 COLRv1 글꼴 등이 추가되었습니다.
달리 명시되지 않는 한, 아래 설명된 변경사항은 Android, ChromeOS, Linux, macOS, Windows용 최신 Chrome 베타 채널 버전에 적용됩니다. 제공된 링크 또는 ChromeStatus.com의 목록을 통해 여기에 나열된 기능에 대해 자세히 알아보세요. Chrome 108은 2022년 10월 27일 현재 베타 버전입니다. Google.com(데스크톱) 또는 Android Google Play 스토어에서 최신 앱을 다운로드할 수 있습니다.
CSS
Chrome 108에는 여러 가지 새로운 CSS 기능이 포함되어 있습니다.
대체된 요소의 CSS 오버플로우
Chrome은 개발자가 콘텐츠 상자 외부에서 페인트하는 대체된 요소와 함께 기존 overflow 속성을 사용할 수 있도록 하는 변경사항을 출시하기 시작합니다. object-view-box와 함께 사용하면 CSS 그림자와 같은 적절한 잉크 오버플로 동작으로 맞춤 발광 효과나 그림자가 적용된 이미지를 만들 수 있습니다.
브레이킹 체인지일 가능성이 있습니다. 대체된 요소 오버플로 변경사항에서 자세히 알아보세요.
소형, 대형, 동적 및 논리 표시 영역 단위
이에 따라 소형 (svw, svh, svi, svb, svmin, svmax), 대형 (lvw, lvh, lvi, lvb, lvmin, lvmax), 동적 (dvw, dvh, dvi, dvb, dvmin, dvmax) 및 논리 (vi, vb) 단위 지원이 추가됩니다.
CSS break-after, break-before, break-inside 지원
인쇄할 때 CSS 단편화 속성 break-before, break-after, break-inside의 회피 값을 지원합니다. 이 값은 요소가 적용되는 전, 후 또는 내부에서 중단되지 않도록 브라우저에 지시합니다. 예를 들어 다음 CSS는 페이지 나누기 시 그림이 깨지는 것을 방지합니다.
figure {
break-inside: avoid;
}
이 기능은 Chrome 108에 LayoutNG 인쇄 지원이 추가되면서 추가되었습니다.
마지막 기준 항목 정렬
이 기능을 사용하면 개발자는 첫 번째 기준이 아닌 마지막 기준을 기준으로 플렉스 또는 그리드 레이아웃 내에서 항목을 정렬할 수 있습니다. 이 작업은 다음 속성을 통해 실행됩니다.
align-items: last baseline;justify-items: last baseline;align-self: last baseline;justify-self: last baseline;
이벤트 ContentVisibilityAutoStateChanged개
요소를 사용자와 관련 있음으로 만드는 속성으로 인해 요소의 렌더링 상태가 변경될 때 content-visibility: auto가 있는 요소에서 발생하는 이벤트입니다.
이를 위해 개발자는 user-agent가 콘텐츠 가시성 하위 트리의 렌더링을 중지하거나 시작했을 때 렌더링을 중지하거나 시작할 시기를 더 세밀하게 제어할 수 있습니다. 예를 들어 개발자는 사용자 에이전트가 렌더링하지 않는 하위 트리에서 React 업데이트를 중지하고 싶을 수 있습니다. 마찬가지로 개발자는 user-agent가 요소를 렌더링하지 않을 때 다른 스크립트 업데이트 (예: 캔버스 업데이트)를 중지하는 것이 좋습니다.
Web API
Federated Credentials Management (이전의 WebID)
Federated Credential Management API를 사용하면 사용자는 브라우저 개인 정보 보호 개선사항과 호환되는 방식으로 제휴 ID를 가져와 웹사이트에 로그인할 수 있습니다.
작업자의 미디어 소스 확장 프로그램
DedicatedWorker 컨텍스트에서 MSE (Media Source Extensions) API를 사용하여 기본 창 컨텍스트에서 HTMLMediaElement에 의한 재생을 위한 미디어 버퍼링 성능을 개선할 수 있습니다. DedicatedWorker 컨텍스트에서 MediaSource 객체를 생성하면 애플리케이션이 MediaSourceHandle을 가져오고 그 핸들을 기본 스레드로 전송하여 HTMLMediaElement에 연결하는 데 사용할 수 있습니다. 그러면 MediaSource 객체를 만든 컨텍스트가 이 객체를 사용하여 미디어를 버퍼링할 수 있습니다.
Sec-CH-Prefers-Reduced-Motion 사용자 환경설정 미디어 기능 클라이언트 힌트 헤더
사용자 환경설정 미디어 기능 클라이언트 힌트 헤더는 미디어 쿼리 레벨 5에서 정의한 사용자 환경설정 미디어 기능 관련 HTTP 클라이언트 힌트 헤더 집합을 정의합니다. 이 헤더를 중요한 클라이언트 힌트로 사용하면 서버에서 CSS 인라인 처리 등과 관련하여 현명한 선택을 할 수 있습니다. Sec-CH-Prefers-Reduced-Motion는 사용자의 prefers-reduced-motion 환경설정을 반영합니다.
WebTransport BYOB 리더
개발자가 제공한 버퍼로 읽을 수 있도록 WebTransport용 BYOB(bring-your-own-buffer) 리더를 지원합니다. BYOB 리더는 버퍼 사본을 최소화하고 메모리 할당을 줄일 수 있습니다.
권한 정책 출처의 와일드 카드
권한 정책 사양은 개발자가 다양한 브라우저 기능 및 API의 사용을 선택적으로 사용 설정 및 사용 중지할 수 있는 메커니즘을 정의합니다. 이 메커니즘의 한 가지 기능으로, 명시적으로 열거된 출처에서만 기능을 사용 설정할 수 있습니다 (예: https://foo.com/). 이 메커니즘은 수백 개의 가능한 하위 도메인 중 하나에 호스팅될 수 있는 출처를 통해 콘텐츠를 제공하는 일부 CDN을 설계하기에는 충분히 유연하지 않습니다.
따라서 이 기능은 SCHEME://*.HOST:PORT (예: https://*.foo.com/)와 같이 구조화된 권한 정책에 와일드 카드 지원을 추가합니다. 이 경우 SCHEME://HOST:PORT (예: https://foo.com/)에서 유효한 출처를 구성할 수 있습니다. 이를 위해서는 HOST이 등록 가능한 도메인이어야 합니다. 즉, https://*.bar.foo.com/는 작동하지만 https://*.com/는 작동하지 않습니다. 모든 도메인에서 이 기능을 사용할 수 있도록 하려면 *에 위임해야 합니다.
File System Access API에서 AccessHandles의 동기화 메서드
File System Access API의 FileSystemSyncAccessHandle에 있는 비동기 메서드 flush(), getSize(), truncate()를 동기 메서드로 업데이트합니다.
FileSystemSyncAccessHandle에는 현재 동기 메서드와 비동기 메서드가 혼합되어 있어 특히 C/C++를 Wasm으로 포팅하는 애플리케이션의 성능과 사용성이 저해됩니다. 이번 업데이트는 API 사용의 일관성을 유지하고 Wasm 기반 라이브러리의 성능을 개선할 것입니다.
브레이킹 체인지일 가능성이 있습니다. 자세한 내용은 브레이킹 체인지: AccessHandles의 동기화 메서드를 참고하세요.
WebAuthn 조건부 UI
WebAuthn의 조건부 UI는 Windows 22H2 이상, macOS, Android P 이상에서 지원됩니다. 데스크톱 플랫폼의 WebAuthn UI도 업데이트되었습니다.
가변 COLRv1 글꼴 및 글꼴 기능 감지
COLRv1 가변 글꼴 지원
COLRv1 색상 벡터 글꼴은 Chrome 98부터 지원되었지만 초기 출시에서는 COLRv1 테이블의 정적 기능만 지원되었습니다. COLRv1 사양은 변수 축 매개변수를 변경하여 그라데이션 및 변환의 글꼴 속성을 수정할 수 있는 OpenType 변형과의 통합을 정의합니다. 이 두 번째 단계에서는 COLRv1에 이러한 변형이 지원됩니다.
CSS @supports에 대한 font-tech() 및 font-format() 조건 확장
CSS @supports와 함께 font-tech() 및 font-format()를 사용하면 글꼴 기술과 형식 지원을 감지하고 콘텐츠를 점진적으로 개선할 수 있습니다. 다음 예는 COLRv1 글꼴 지원을 테스트합니다.
@supports font-tech(color-COLRv1) {
}
@font-face src: 설명자의 tech() 함수 지원
CSS 글꼴 수준 4는 글꼴 리소스를 선택 또는 필터링하는 추가적인 방법을 제공합니다. tech() 함수를 도입했습니다. 이 함수를 사용하면 이 각 글꼴 blob이 작동하는 데 필요한 글꼴 기술 목록을 전달할 수 있습니다. 이를 기반으로 사용자 에이전트가 첫 번째로 적합한 리소스를 선택합니다.
Android용 Chrome
이제 Android OSK에서 기본적으로 시각적 표시 영역의 크기를 조절함
Android 터치 키보드는 처음에 포함하는 블록이 아니라 기본적으로 표시 영역의 크기를 조정합니다. 작성자는 새로운 interactive-widget 메타 표시 영역 키를 사용하여 이를 선택 해제할 수 있습니다.
오리진 트라이얼
이번 Chrome 버전에는 두 가지 새로운 오리진 트라이얼이 있습니다.
canmakepayment 이벤트의 판매자 ID
canmakepayment 서비스 워커 이벤트는 사용자가 설치된 결제 앱에 카드가 등록되어 있는지 여부를 판매자에게 알려줍니다. 판매자의 출처와 임의의 데이터를 결제 앱 출처에서 서비스 워커에 자동으로 전달합니다. 이러한 교차 출처 통신은 JavaScript의 PaymentRequest 생성 시 발생하며, 사용자 동작이 필요하지 않으며, 사용자 인터페이스를 표시하지 않습니다. 'canmakepayment'에서 ID 필드를 삭제하는 개발자 체험판 이벤트는 chrome://flags/#clear-identity-in-can-make-payment를 통해 사용 설정할 수 있습니다. 이 플래그를 사용 설정하면 'canmakepayment'의 ID 필드가 비워집니다. 이벤트 (및 Android IS_READY_TO_PAY 인텐트)
자세한 내용은 Payment Handler API의 CanMakePayment 이벤트 동작 업데이트를 참고하세요.
뒤로-앞으로 캐시 NotRestoredReason API
NotRestoredReason API는 PerformanceNavigationTiming API를 통해 페이지가 BFcache에서 프레임 트리 구조로 제공되지 않는 이유 목록을 보고합니다.
사양에서 요구하는 이유, 브라우저 구현과 관련된 이유 등 다양한 이유로 페이지가 BFcache에서 차단될 수 있습니다. 개발자는 pageshow 핸들러 지속 매개변수와 PerformanceNavigationTiming.type(back-forward)를 사용하여 사이트에서 BFCache의 적중률을 수집할 수 있습니다. 이 API를 사용하면 사이트에서 BFCache가 방문 기록 탐색에 사용되지 않는 이유에 관한 정보를 수집할 수 있으므로 각 이유에 따라 조치를 취하고 페이지가 BFCache와 호환되도록 할 수 있습니다.
지원 중단 및 삭제
이 버전의 Chrome에는 다음과 같은 지원 중단 및 삭제 기능이 도입되었습니다. 예정된 지원 중단, 현재 지원 중단 및 이전에 이루어진 삭제 목록을 보려면 ChromeStatus.com을 방문하세요.
지원 중단
이 Chrome 버전에서는 한 가지 기능이 지원 중단됩니다.
window.defaultStatus 및 window.defaultstatus를 지원 중단하고 삭제합니다.
이러한 API는 모든 브라우저에서 구현되지는 않으며 브라우저 동작에 영향을 미치지 않는 비표준 API입니다. 이렇게 하면 문제가 해결되고 잠재적인 디지털 지문 수집 신호가 삭제됩니다.
원래 '상태 표시줄'을 수정/제어하는 데 사용되었습니다. 브라우저 창 하단에 있습니다. 하지만 Chrome의 상태 표시줄에 실제로 영향을 미치지 않았으며 표준화된 속성도 아닙니다. Gecko는 버전 23 이후 이러한 속성을 지원하지 않습니다. WebKit은 여전히 이러한 속성을 지원합니다. 관련 window.status 속성은 표준화되어 있지만 창 상태 표시줄에 영향을 미치면 안 됩니다.
삭제
이 Chrome 버전에서는 4가지 기능이 삭제됩니다.
ImageDecoderInit.premultiplyAlpha 삭제
이 기능은 주요 사용 사례에서 눈에 띄는 효과가 없지만 최적의 방법으로 구현을 제한할 수 있습니다. 자세한 설명은 이 문제를 참고하세요. WebCodecs 사양 편집기에 대한 합의에 따라 사용량 부족 (M106에서 사용 카운터당 페이지 로드의 0.000000339%~0.00000687%)
navigateEvent.restoreScroll() 삭제
restoreScroll()가 navigateEvent.scroll()로 대체됩니다. scroll()는 개발자가 비순회 탐색의 스크롤 타이밍을 제어할 수 있다는 점만 제외하면 동일하게 작동합니다 (scroll()는 스크롤이 복원이 아닌 경우 작동하므로 동작 변경사항에 따라 이름이 변경됨).
navigateEvent.transitionWhile() 삭제
개발자가 신고한 설계 결함으로 인해 transitionWhile()이(가) navigateEvent.intercept()(으)로 대체됩니다. Interval() 은 conversionwhile()과 거의 동일하게 동작하지만, 필수 프로미스 매개변수를 사용하는 대신 프라미스를 반환하는 선택적 핸들러 함수를 사용합니다. 이렇게 하면 브라우저에서 핸들러가 실행되는 시점을 제어할 수 있습니다. 이는 transitionWhile()보다 이후이고 더 직관적입니다.
WebRTC mediaConstraint의 googIPv6 삭제
다음 예와 같이 "googIPv6: false"를 사용하여 WebRTC에서 IPv6 지원을 사용 중지할 수 있습니다.
new RTCPeerConnection({}, {mandatory:{googIPv6:false}});
IPv6는 수년 동안 기본적으로 사용되어 왔으며 비활성화할 수 없습니다. 사양에 없는 기존 API입니다.