새로운 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가 있는 요소에서 실행되는 이벤트입니다.
이 작업의 사용 사례는 콘텐츠 공개 상태 하위 트리의 렌더링을 중지하거나 시작하는 사용자 에이전트에 응답하여 렌더링을 중지하거나 시작할 시기를 개발자가 더 세부적으로 제어할 수 있도록 하는 것입니다. 예를 들어 개발자는 사용자 에이전트가 렌더링하지 않은 하위 트리에서 React 업데이트를 중지할 수 있습니다. 마찬가지로 개발자는 사용자 에이전트가 요소를 렌더링하지 않을 때 다른 모든 스크립트 업데이트 (예: 캔버스 업데이트)를 중지하는 것이 좋습니다.
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() 조건 확장
font-tech() 및 font-format()를 CSS @support와 함께 사용하면 글꼴 기술 및 형식 지원을 감지하고 콘텐츠를 점진적으로 개선할 수 있습니다. 다음 예는 COLRv1 글꼴 지원을 테스트합니다.
@supports font-tech(color-COLRv1) {
}
@font-face src: 설명자에서 tech() 함수 지원
CSS 글꼴 수준 4에서는 글꼴 리소스를 선택하거나 필터링하는 추가적인 방법을 제공합니다. tech() 함수가 도입되었습니다. 이 함수를 사용하면 이 각 글꼴 blob이 작동하는 데 필요한 글꼴 기술 목록을 전달할 수 있습니다. 이를 기반으로 사용자 에이전트가 첫 번째 적절한 리소스를 선택합니다.
Android용 Chrome
Android OSK가 이제 기본적으로 시각적 표시 영역의 크기를 조절함
Android 터치 키보드는 처음에 포함하는 블록이 아닌 기본적으로 시각적 표시 영역의 크기를 조절합니다. 작성자는 새 interactive-widget 메타 표시 영역 키를 사용하여 이를 선택 해제할 수 있습니다.
오리진 트라이얼
이 Chrome 버전에는 2개의 새로운 오리진 트라이얼이 있습니다.
canmakepayment 이벤트의 판매자 ID
canmakepayment 서비스 워커 이벤트를 통해 판매자는 사용자의 설치된 결제 앱에 카드가 등록되어 있는지 알 수 있습니다. 판매자의 출처 및 임의의 데이터를 결제 앱 출처에서 서비스 워커로 자동으로 전달합니다. 이 교차 출처 통신은 JavaScript의 PaymentRequest 생성에서 발생하며 사용자 동작이 필요하지 않고 사용자 인터페이스를 표시하지 않습니다. 'canmakepayment' 이벤트에서 ID 필드를 삭제하는 개발자 체험판은 chrome://flags/#clear-identity-in-can-make-payment를 통해 사용 설정할 수 있습니다. 이 플래그를 사용 설정하면 'canmakepayment' 이벤트 (및 Android IS_READY_TO_PAY 인텐트)의 ID 필드가 비게 됩니다.
자세한 내용은 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 출시에서는 네 가지 기능이 제거되었습니다.
ImageDecoderInit.premultiplyAlpha 삭제
이 기능은 주요 사용 사례에서 관찰 가능한 효과가 없지만 최적의 방식으로 구현을 제한할 수 있습니다. 자세한 설명은 이 문제를 참조하세요. WebCodecs 사양 편집기의 합의에 따라 사용 부족 (M106에서 사용 카운터당 페이지 로드의 0.000000339%~0.00000687%)이 수정되었습니다.
navigateEvent.restoreScroll() 삭제
restoreScroll()가 navigateEvent.scroll()로 대체됩니다. scroll()는 개발자가 비순회 탐색의 스크롤 타이밍을 제어할 수 있다는 점을 제외하고 동일하게 작동합니다 (scroll()는 스크롤이 복원이 아닐 때 작동하므로 동작 변경과 함께 이름이 변경됨).
navigateEvent.transitionWhile() 삭제
개발자가 보고한 설계 결함으로 인해 transitionWhile()가 navigateEvent.intercept()로 대체됩니다. Interval()은 기반 전환 활동()과 거의 동일하게 작동하지만, 필수 Promise 매개변수를 사용하는 대신 Promise를 반환하는 선택적 핸들러 함수를 사용합니다. 이렇게 하면 브라우저에서 핸들러가 실행되는 시점을 제어할 수 있으며 이는 transitionWhile()보다 늦고 더 직관적입니다.
WebRTC mediaConstraint의 googIPv6 삭제
"googIPv6: false"는 다음 예와 같이 WebRTC에서 IPv6 지원을 사용 중지하는 데 사용할 수 있습니다.
new RTCPeerConnection({}, {mandatory:{googIPv6:false}});
IPv6는 수년 동안 기본적으로 사용 설정되었으며 사용 중지할 수는 없습니다. 사양에 없는 기존 API입니다.