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- Android 뒤로 버튼에 응답하도록
<dialog>및popover=""로 업그레이드하여 새로운 닫기 요청 프레임워크를 사용합니다.
전용 작업자 및 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={/%AD_WIDTH%}&height={/%AD_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를 사용하면 개발자는 현재 스크롤 컨테이너에 의해 잘린 중첩된 스크롤 컨테이너 내의 타겟을 관찰할 수 있습니다. 이는 교집합을 계산할 때 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을 사용할 수 있습니다.
개발자는 WebGPU 사양의 'shader-f16' 기능과 WGSL 사양의 'f16' 확장을 사용하여 셰이더의 16비트 부동 소수점 변수와 API에 액세스할 수 있습니다.
MediaCapabilities: decodingInfo()로 HDR 지원 쿼리
세 가지 새로운 VideoConfiguration 사전 필드(hdrMetadataType, colorGamut, transferFunction)를 통해 HDR 렌더링 지원을 감지할 수 있도록 Media Capabilities API를 확장합니다. Chrome은 자체 톤 매핑 알고리즘을 구현하므로 HDR10 (smpteSt2086) 정적 메타데이터에 대해 항상 true를 반환합니다. HDR10+ (smpteSt2094-10) 및 Dolby Vision (smpteSt2094-40) 동적 메타데이터는 현재 지원되지 않으므로 false를 반환합니다. 향후 동적 메타데이터 지원이 추가될 예정이므로 개발자는 이 API를 사용하여 지원을 받는 사용자에게 적절한 콘텐츠를 선택할 수 있습니다.
MediaStreamTrack 통계 (동영상)
동영상의 MediaStreamTrack에 대한 프레임 카운터 (게재됨, 삭제됨, 총계)를 노출하는 API입니다. 오디오 통계는 별도의 Chrome 기능 출시에 따라 처리됩니다.
Private Aggregation API: 집계 코디네이터 선택
공급업체에서 지정한 허용 목록에서 페이로드 암호화에 사용할 코디네이터를 선택하는 메커니즘을 제공하기 위해 Private Aggregation API가 수정되었습니다. 서비스 선택은 run() 및 selectURL() SharedStorage 호출과 runAdAuction() 및 joinAdInterestGroup() Protected Audience 호출에서 추가 옵션을 통해 이루어집니다. 광범위한 접근 방식은 Attribution Reporting API의 접근 방식과 대체로 일치합니다.
FedCM의 Login Status API
Login Status 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)를 쿠키가 아닌 스토리지로 확장
Google은 서드 파티 컨텍스트에서 파티션을 나누지 않은 (쿠키 및 비쿠키) 저장소에 액세스할 수 있도록 Storage Access API (이전 버전과 호환 가능)의 확장을 제안합니다.
혼합 콘텐츠를 완화하기 위한 비공개 네트워크 액세스 권한
전역적으로 고유한 이름이 없어 TLS 인증서를 획득할 수 없는 로컬 네트워크의 기기에 대한 연결을 설정하기 위해 이 기능에서는 개발자가 이러한 기기와 통신하려는 의도를 선언하는 fetch()라는 새로운 옵션, 각 사이트의 이 기능에 대한 액세스를 제어하는 새로운 정책 제어 기능, 추가 메타데이터를 제공하기 위한 서버의 프리플라이트 응답용 새 헤더를 도입합니다.
비공개 네트워크 액세스 권한 프롬프트 오리진 트라이얼에 가입합니다.
Performance.measureUserAgentSpecificMemory()에 대한 무제한 액세스
Performance.measureUserAgentSpecificMemory()는 교차 출처 분리 환경 (COOP/COEP 뒤)에서만 사용할 수 있도록 지정됩니다. 이 기능을 사용하면 COOP/COEP 제한을 없애 COOP/COEP를 완전히 배포할 수 없을 때 회귀 테스트 및 영향 측정을 할 수 있습니다. Performance.memory (기존 API)는 worker에서 사용 설정되지 않았으므로 이 목적으로 사용할 수 없습니다.
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 삽입된 적용 시행을 적용하는 동작이 정렬됩니다.