CSS 마스킹, 완화된 CSS 중첩 규칙으로 Media Session API의 enterpictureinpicture 작업인 <details> 요소를 사용하여 아코디언 패턴을 만듭니다.
달리 명시되지 않는 한, 설명된 변경사항은 Android, ChromeOS, Linux, macOS, Windows용 최신 Chrome 베타 채널 버전에 적용됩니다. 제공된 링크 또는 chromestatus.com의 목록을 통해 여기에 표시된 기능에 대해 자세히 알아보세요. Chrome 120은 2023년 11월 1일 현재 베타 버전입니다. Google.com(데스크톱) 또는 Android Google Play 스토어에서 최신 앱을 다운로드할 수 있습니다.
CSS
이 버전에는 7가지 새로운 CSS 기능이 추가되었습니다.
등록된 맞춤 속성의 CSS <image> 구문
@property 또는 registerProperty()로 등록된 커스텀 속성에 <image> 문법을 사용할 수 있습니다. <image> 문법을 사용하면 맞춤 속성 값을 url() 값과 생성된 이미지(예: 그라데이션)로 제한할 수 있습니다.
등록된 맞춤 속성의 CSS <transform-function> 및 <transform-list> 구문
@property 또는 registerProperty()로 등록된 맞춤 속성에 <transform-function> 및 <transform-list> 문법 사용을 지원합니다.
이 구문을 사용하면 변환을 나타내기 위해 커스텀 속성의 값을 제한할 수 있습니다. 이렇게 하면 이러한 등록된 사용자 지정 속성에서 직접 전환 및 애니메이션을 사용할 수도 있습니다.
미디어 쿼리: 스크립팅 기능
스크립팅 미디어 기능은 자바스크립트와 같은 스크립팅 언어가 현재 문서에서 지원되는지 여부를 쿼리하는 데 사용됩니다. 유효한 옵션은 '사용 설정됨', '초기 전용' 및 '없음'입니다. 하지만 'initial-only'는 절대 일치하지 않습니다.
:dir() 의사 클래스 선택기
:dir() CSS 의사 클래스 선택기는 HTML dir 속성에 따라 결정되는 방향에 따라 요소를 일치시킵니다.
:dir(ltr)는 왼쪽에서 오른쪽 텍스트 방향과 일치합니다.
:dir(rtl)는 텍스트 방향이 오른쪽에서 왼쪽으로 설정된 요소와 일치합니다.
[dir] 속성 선택기와 같지 않습니다. dir 속성이 있는 상위 항목에서 상속된 경로와 일치하고 dir=auto (방향이 강한 텍스트에서 첫 문자의 방향을 결정)를 사용하여 계산된 방향과 일치하기 때문입니다.
CSS 지수 함수
CSS 값 및 단위 수준 4 사양의 CSS 지수 함수 pow(), sqrt(), hypot(), log(), exp()가 추가되었습니다.
CSS 마스킹
CSS mask 및 관련 속성 (예: mask-image, mask-mode)은 특정 지점에서 이미지를 마스킹하거나 잘라서 요소를 부분적으로 또는 완전히 숨기는 데 사용됩니다.
이 기능은 -webkit-mask* 속성의 접두사를 해제하고 현재 사양에 맞게 가져옵니다. 여기에는 mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, mask-composite 및 mask 약어가 포함됩니다. 로컬 mask-image 참조가 지원되고 직렬화가 이제 사양과 일치하며 허용된 값은 이제 사양과 일치합니다 (예: mask-composite의 경우 source-over 대신 add).
완화된 CSS 중첩
이렇게 CSS 중첩 구현이 변경되면서 중첩 스타일 규칙을 요소(예: & 기호를 앞에 요구하거나 is()로 래핑하는 대신 h1)로 시작할 수 있습니다. 다음 예는 현재 사양에서 유효하며 Chrome 120에서 작동합니다.
.card {
h1 {
/* h1 does not start with a symbol */
}
}
HTML
<details>에서 이름 속성을 사용하는 아코디언 패턴
이 기능은 일련의 HTML <details> 요소를 사용하여 아코디언을 구성하는 기능을 추가합니다. <details> 요소에 이름 속성을 추가합니다. 이 속성을 사용하면 이름이 같은 여러 <details> 요소가 그룹을 형성합니다. 그룹의 요소 중 최대 1개를 한 번에 열 수 있습니다.
Web API
ArrayBuffer를 VideoFrame, AudioData, EncodedVideoChunk, EncodedAudioChunk, ImageDecoder 생성자로 전송 허용
이를 통해 배열 버퍼를 분리하고 VideoFrame, ImageDecoder, EncodedVideoChunk, EncodedAudioChunk, AudioData 내에서 해당 버퍼를 사본 없이 사용할 수 있습니다.
CSS Font Loading API FontFaceSet: check() 메서드
FontFaceSet의 check() 메서드는 로드가 완료되지 않은 FontFaceSet의 글꼴을 활용하지 않고도 지정된 글꼴을 사용하여 텍스트를 표시할 수 있는지 확인합니다. 이를 통해 사용자는 나중에 글꼴 교체를 트리거하지 않고도 글꼴을 안전하게 사용할 수 있습니다.
닫기 요청 및 CloseWatcher
닫기 요청은 현재 열려 있는 항목을 닫아 달라는 사용자 요청을 아우르는 새로운 개념으로, 데스크톱에서는 Esc 키를 사용하고 Android에서는 뒤로 동작이나 버튼을 사용합니다. 이 두 가지를 Chrome에 통합하면 다음 두 가지 사항이 변경됩니다.
CloseWatcher: 닫기 요청을 직접 수신 대기하고 응답하는 새로운 API입니다.- 새로운 닫기 요청 프레임워크를 사용하도록
<dialog>및popover=""로 업그레이드하여 Android 뒤로 버튼에 응답합니다.
전용 작업자 및 Storage Access API
전용 작업자는 상위 컨텍스트의 스토리지 액세스 상태를 상속합니다. 따라서 문서가 document.requestStorageAccess()를 통해 스토리지 액세스 권한을 얻은 다음 전용 작업자를 만들면 작업자도 스토리지 액세스 권한을 가지게 되고 파티션을 나누지 않은 쿠키에도 액세스할 수 있습니다.
FedCM: Error API 및 AutoSelectedFlag API
개발자와 사용자가 인증 흐름을 더 잘 이해할 수 있도록 지원하는 전용 API입니다. 두 API 모두 ID 공급업체를 통해 웹사이트 또는 애플리케이션 (이 문맥에서는 신뢰 당사자 (RP)이라고 함)에 로그인할 수 있는 사용자 권한 후 트리거됩니다. 즉, 사용자가 다음으로 계속 버튼을 클릭한 후
Error API를 사용하면 사용자의 로그인 시도가 실패하는 경우 ID 공급업체가 브라우저와 이유를 공유하여 사용자와 RP 개발자를 모두 최신 상태로 유지할 수 있습니다.
AutoSelectedFlag API를 사용하면 ID 공급업체와 RP 개발자가 로그인 UX를 더 잘 이해하고 그에 따라 실적과 분류 측정항목을 평가할 수 있습니다.
자세한 내용은 FedCM Chrome 120 블로그 게시물을 참고하세요.
분리 프레임 기능 업데이트
개인 정보 보호 샌드박스 내 Protected Audience API에는 Protected Audience 광고 크기 매크로를 위한 추가 형식 옵션이 있습니다. 선택 기능을 사용하면 매크로를 사용하여 입찰에서 낙찰된 광고의 크기를 광고의 URL에 지정할 수 있습니다. 예를 들면 다음과 같습니다.
https://ad.com?width={/�_WIDTH%}&height={/�_HEIGHT%}
deprecatedReplaceInURN 및 registerAdMacro()에서 사용하는 매크로 등 Protected Audience의 다른 매크로 유형과의 일관성을 유지하기 위해 Chrome 120에는 현재 형식 외에도 ${AD_WIDTH} 및 ${AD_HEIGHT}를 매크로의 형식으로 사용할 수 있는 기능이 추가됩니다.
이제 자동 비콘이 등록된 모든 URL로 전송됩니다. 이전에는 setReportEventDataForAutomaticBeacons()를 호출할 때 지정된 대상만 자동 비콘을 수신했으며, 이는 해당 대상이 Worklet에서 reserved.top_navigation의 registerAdBeacon()를 호출한 경우에도 마찬가지입니다. 이제 reserved.top_navigation에 대해 registerAdBeacon()를 호출하는 모든 대상은 자동 비콘을 받지만 setReportEventDataForAutomaticBeacons()에 지정된 대상만 비콘과 함께 자동 비콘 데이터를 받습니다. 이제 setReportEventDataForAutomaticBeacons()의 once 매개변수는 전체 비콘이 한 번 전송되는지 확인하는 것이 아니라 데이터가 한 번 전송되는지 여부를 결정합니다.
교차로 관찰자 스크롤 여백
Intersection Observer scrollMargin를 사용하면 개발자가 현재 스크롤 컨테이너에 의해 잘린 중첩된 스크롤 컨테이너 내에서 타겟을 관찰할 수 있습니다. 이렇게 하려면 교집합을 계산할 때 컨테이너의 클리핑 rect를 scrollMargin로 확장합니다.
권한 정책 위반 보고서
이렇게 하면 권한 정책 API가 Reporting API와 통합되어 웹 개발자가 권한 정책 위반 보고서를 전송할 엔드포인트를 구성할 수 있으므로 사이트 소유자는 필드의 페이지에서 허용되지 않는 기능이 요청되는 시점을 확인할 수 있습니다.
또한 Permissions-Policy-Report-Only 헤더가 포함되어 있어 제안된 정책 (Content-Security-Policy-Report-Only와 유사)을 기반으로 보고서를 전송할 수 있으므로 정책 변경사항을 일반 시행 모드로 구현하기 전에 잠재적인 중단이 있는지 평가할 수 있습니다.
Media Session API: enterpictureinpicture 작업
Media Session API에 enterpictureinpicture 작업을 추가합니다. 웹사이트에서 PIP 모드 또는 문서 PIP 창을 여는 데 사용할 수 있는 작업 핸들러를 등록할 수 있습니다.
웹 앱의 자동 PIP 모드에서 자세히 알아보세요.
WebGPU f16 지원
WebGPU 셰이더 (WGSL)에서 절반 정밀도 부동 소수점 유형 f16을 사용할 수 있습니다.
개발자는 'shader-f16'을 사용하여 이 기능은 WebGPU 사양 및 'f16' 확장자를 추가하여 셰이더의 16비트 부동 소수점 변수와 API에 액세스할 수 있습니다.
MediaCapabilities: decodingInfo()로 HDR 지원 쿼리
Media Capabilities API를 확장하여 세 가지 새로운 VideoConfiguration 사전 필드(hdrMetadataType, colorGamut, transferFunction)를 통해 HDR 렌더링 지원을 감지할 수 있습니다. Chrome은 자체 톤 매핑 알고리즘을 구현하므로 HDR10 (smpteSt2086) 정적 메타데이터에 대해 항상 true를 반환합니다. HDR10 (smpteSt2094-10) 및 Dolby Vision (smpteSt2094-40) 동적 메타데이터는 현재 지원되지 않으므로 false가 반환됩니다. 향후 동적 메타데이터에 대한 지원을 추가할 예정이므로 개발자는 이 API를 사용하여 지원을 받는 사용자에게 적절한 콘텐츠를 선택할 수 있습니다.
MediaStreamTrack 통계 (동영상)
종류의 동영상의 MediaStreamTracks에 대한 프레임 카운터 (게재됨, 삭제됨, 총)를 노출하는 API입니다. 오디오 통계는 별도의 Chrome 기능 출시에서 다룰 예정입니다.
Private Aggregation API: 집계 코디네이터 선택
(공급업체 지정 허용 목록에서) 페이로드 암호화에 사용할 코디네이터를 선택하는 메커니즘을 제공하도록 Private Aggregation API가 수정되었습니다. run() 및 selectURL() SharedStorage 호출과 runAdAuction() 및 joinAdInterestGroup() Protected Audience 호출의 추가 옵션을 통해 서비스를 선택할 수 있습니다. 광범위한 접근 방식은 Attribution Reporting API의 접근 방식과 대체로 일치합니다.
FedCM의 로그인 상태 API
로그인 상태 API (이전의 IdP Sign-in Status API)는 사용자가 로그인하거나 로그아웃할 때 ID 공급업체가 브라우저에 신호를 보낼 수 있도록 합니다.
이는 FedCM이 자동 타이밍 공격을 해결하는 데 사용되며, 이를 통해 FedCM은 서드 파티 쿠키 없이 작동할 수 있습니다.
향후 더 많은 사용 사례에 이 API가 제공될 수 있습니다.
자세한 내용은 공지 블로그 게시물을 참고하세요.
뷰 전환: 콜백을 null을 허용하지 않도록 설정
현재 startViewTransition 호출은 기본값이 null인 null을 허용하는 선택적 콜백 유형(startViewTransition(optional UpdateCallback? callback = null))을 사용합니다.
이 기능은 이를 null을 허용하지 않는 유형(startViewTransition(optional UpdateCallback callback))으로 변경합니다.
TLS용 X25519Kyber768 키 캡슐화
Kyber768 양자 방지 키 계약 알고리즘을 배포하여 향후 양자 암호화 분석에서 현재 Chrome TLS 트래픽을 보호합니다. 이는 IETF 표준을 기반으로 하는 하이브리드 X25519 Kyber768 키 계약입니다. 이 사양 및 출시는 W3C의 범위를 벗어납니다. 이 키 계약은 TLS 암호화로 실행되며 사용자에게 투명하게 공개됩니다.
오리진 트라이얼 진행 중
Chrome 120에서는 다음과 같은 새로운 오리진 트라이얼을 선택할 수 있습니다.
'우선순위' HTTP 요청 헤더
이 기능은 모든 HTTP 요청에 대해 전송 당시의 우선순위 정보와 함께 priority 요청 헤더를 추가합니다.
RFC 9218 (HTTP용 확장 가능 우선순위 지정 스키마)은 '우선순위'를 정의합니다. 출처 (및 중개자)에 요청 우선순위를 알리는 데 사용할 HTTP 요청 헤더입니다. 또한 HTTP/2와 HTTP/3에서 동일한 우선순위 정보를 전달하도록 협상 프로세스와 프로토콜 수준 프레임을 정의합니다. 헤더는 리소스가 처음 요청되었을 때에만 리소스에 대한 초기 우선순위를 알릴 수 있는 반면, 프레임 기반 메커니즘은 사후에 우선순위 수정을 허용합니다. 프레임이 링크 수준에서만 작동하는 동안 헤더는 원본 서버에 대해 엔드 투 엔드로 작동할 수 있으며 (중개자에 의해 인식될 경우 출처가 우선순위를 재정의하도록 하는 메커니즘을 제공합니다). 이 기능은 헤더 기반 우선순위 지정 스키마를 지원하기 위한 것입니다.
Storage Access API (SAA)를 쿠키 외 스토리지로 확장
서드 파티 컨텍스트에서 파티션을 나누지 않은 (쿠키 및 비쿠키) 저장소에 액세스할 수 있도록 Storage Access API (이전 버전과 호환 가능)의 확장을 제안합니다.
혼합 콘텐츠를 완화하기 위한 비공개 네트워크 액세스 권한
전역적으로 고유한 이름이 없어 TLS 인증서를 받을 수 없는 로컬 네트워크에서 기기에 연결을 설정하기 위해 이 기능은 fetch()에 개발자의 이러한 기기와 통신하려는 의도가 있을 수 있습니다. 이는 각 사이트의 이 기능에 대한 액세스와 추가 메타데이터를 제공하기 위한 서버의 프리플라이트 응답을 위한 새 헤더.
비공개 네트워크 액세스 권한 메시지 오리진 트라이얼에 가입합니다.
performance.measureUserAgentSpecificMemory()에 대한 무제한 액세스
performance.measureUserAgentSpecificMemory()는 교차 출처 분리 환경 (COOP/COEP 뒤)에서만 사용할 수 있도록 지정됩니다. 이 기능은 COOP/COEP를 완전히 배포할 수 없을 때 회귀 테스트를 수행하고 영향을 측정할 수 있도록 COOP/COEP 제한을 제거합니다. performance.memory (기존 API)는 작업자에 사용 설정되지 않았으므로 이 용도로 사용할 수 없습니다.
performance.measureUserAgentSpecificMemory()
이 기능은 웹페이지의 메모리 사용량을 예측하는 performance.measureUserAgentSpecificMemory() 함수를 추가합니다. API를 사용하려면 웹사이트가 교차 출처 분리되어야 합니다.
지원 중단 및 삭제
이 버전의 Chrome에는 다음과 같은 지원 중단 및 삭제 기능이 도입되었습니다. 예정된 지원 중단, 현재 지원 중단 및 이전에 이루어진 삭제 목록을 보려면 ChromeStatus.com을 방문하세요.
이 Chrome 버전에서는 한 가지 기능이 지원 중단됩니다.
Theora 지원 중단 및 삭제
Chrome에서는 새로운 보안 위험으로 인해 데스크톱 Chrome에서 Theora 동영상 코덱에 대한 지원을 중단하고 삭제할 예정입니다. Theora의 낮은 사용률 (현재는 잘못되는 경우가 많음)으로 인해 더 이상 대부분의 사용자를 지원할 수 없습니다.
이 Chrome 버전에서는 두 가지 기능이 삭제됩니다.
데이터 삭제: SVGUseElement의 URL
SVGUseElement에 데이터: URL을 할당하면 XSS가 발생할 수 있습니다. 또한 신뢰할 수 있는 유형을 우회하게 되었습니다. 이에 따라 이 기능에 대한 지원을 중단하고 삭제할 계획입니다.
CSPEE에서 동일 출처 포괄적 시행 삭제
CSP Embedded Enforcement에서 동일 출처 iframe에 관한 특수 처리가 삭제됩니다. 이는 교차 출처 iframe 및 동일 출처 iframe에 CSP Embedded Enforcement를 적용하는 동작과 일치합니다.