별도로 명시되지 않는 한 다음 변경사항은 Android, ChromeOS, Linux, macOS, Windows용 최신 Chrome 베타 채널 출시에 적용됩니다. 제공된 링크 또는 ChromeStatus.com의 목록에서 여기에 나열된 기능에 대해 자세히 알아보세요. Chrome 123은 2024년 2월 21일부터 베타 버전입니다. 데스크톱의 Google.com 또는 Android의 Google Play 스토어에서 최신 버전을 다운로드할 수 있습니다.
CSS
이 출시에서는 새로운 CSS 기능 5개를 추가합니다.
CSS light-dark() 색상 함수
CSS의 light-dark() 함수를 사용하면 개발자가 color-scheme를 사용자의 밝은 모드 또는 어두운 모드 환경설정에 더 쉽게 조정할 수 있습니다.
light-dark()를 사용하여 단일 CSS 속성 내에 두 가지 색상 값을 지정합니다. 브라우저 (또는 기기)는 요소의 계산된 color-scheme 값을 기반으로 적절한 색상을 자동으로 선택합니다. 예를 들어 다음 CSS를 사용합니다.
- 사용자가 밝은 테마를 선택한 경우
.target요소의 배경은 라임색입니다. - 사용자가 어두운 테마를 선택한 경우
.target요소의 배경이 녹색이 됩니다.
html {
color-scheme: light dark;
}
.target {
background-color: light-dark(lime, green);
}
CSS PIP 디스플레이 모드
picture-in-picture 값에 관한 CSS display-mode 미디어 기능에 지원을 추가합니다. 이를 통해 웹 개발자는 웹 앱의 일부가 PIP 모드로 표시될 때만 적용되는 특정 CSS 규칙을 작성할 수 있습니다.
이 미디어 기능에 관한 자세한 내용은 PIP 모드 문서를 참고하세요.
블록의 align-content CSS 속성
이제 align-content CSS 속성이 블록 컨테이너 및 표 셀에서 지원됩니다. 이전에는 이 속성이 그리드 및 플렉스 항목에서만 지원되었습니다. 예를 들어 이제 display: block, display: list-item, display: table-cell를 align-content를 사용하여 정렬할 수 있습니다.
블록 및 표 레이아웃에서 align-content 지원에서 자세히 알아보세요.
field-sizing CSS 속성
개발자는 field-sizing 속성을 사용하여 양식 컨트롤의 고정된 기본 크기를 사용 중지하고 크기가 콘텐츠에 따라 달라지도록 할 수 있습니다. 이렇게 하면 자동으로 늘어나는 텍스트 필드를 만들 수 있습니다.
CSS text-spacing-trim 속성
이 속성은 중국어, 일본어, 한국어 (CJK) 구두점 문자에 커닝을 적용하여 JLREQ (일본어 텍스트 레이아웃 요구사항) 및 CLREQ (중국어 텍스트 레이아웃 요구사항)에 정의된 대로 시각적으로 만족스러운 서체를 만듭니다.
많은 CJK 구두점 문자에는 글리프 내부 간격이 포함됩니다. 예를 들어 CJK 마침표와 CJK 닫는 괄호는 일반적으로 글리프 공간의 오른쪽 절반에 글리프 내부 간격이 있어 다른 한자 문자와 같이 일정한 전진을 제공합니다. 하지만 행에 표시되면 글리프 내부 간격이 과도해집니다. 이 기능은 이러한 과도한 간격을 조정합니다.
text-spacing-trim 속성은 normal, trim-start, space-all, space-first의 네 가지 값 중 하나를 허용합니다.
CSS의 새로운 국제 기능 4가지 소개에서 자세히 알아보세요.
Web API
교차 출처 iframe에서 WebAuthn 사용자 인증 정보 생성 허용
이 기능을 사용하면 웹 개발자가 교차 출처 iframe에서 WebAuthn 사용자 인증 정보 (패스키라고 하는 'publickey' 사용자 인증 정보)를 만들 수 있습니다. 이 새로운 기능을 사용하려면 다음 두 가지 조건이 필요합니다.
- iframe에
publickey-credentials-create-feature권한 정책이 있습니다. - iframe에는 일시적인 사용자 활성화가 있습니다.
이를 통해 개발자는 신뢰 당사자가 제휴 ID 환경을 제공하는 ID 단계 업그레이드 흐름 후와 같이 삽입된 시나리오에서 패스키를 만들 수 있습니다.
기여 분석 보고 기능 번들
Chrome 123에서는 Attribution Reporting API에 다음을 중심으로 트리거 데이터 맞춤설정 및 집계 가능한 값 필터를 추가합니다.
- 트리거 데이터 카디널리티 및 값의 맞춤설정을 지원하여 이벤트 수준 보고를 위한 추가 API 구성 가능 여부
- 집계 가능한 값에서 필터를 지원하여 요약 보고서의 API 구성 가능성을 추가했습니다.
교차 앱 및 웹 기여 분석 측정
Attribution Reporting API를 확장하여 웹에서 발생한 전환 기여도를 브라우저 외부에서 발생한 이벤트(다른 애플리케이션 내)에 부여할 수 있도록 합니다.
이 제안서에서는 기여 분석에 관한 OS 수준의 지원을 활용합니다. 특히 개발자는 모바일 웹의 이벤트를 Android의 개인 정보 보호 샌드박스의 이벤트와 결합할 수 있도록 허용할 수 있습니다. 다른 플랫폼 지원도 구현할 수 있습니다.
인라인 모듈 스크립트의 blocking=render
이는 <script blocking="render">에서 인위적인 제한을 삭제하는 작은 변경사항입니다.
이 변경사항 이전에는 src가 데이터 URI이더라도 <script blocking="render"type="module">에 src 속성이 필요했습니다.
이는 불필요한 제약조건입니다. 다른 스크립트를 가져오는 인라인 모듈 스크립트는 계속 렌더링 블록을 실행할 수 있어야 합니다.
이는 교차 문서 뷰 전환이 맞춤설정을 위해 렌더링 차단 스크립트를 사용하는 경우가 많으므로 렌더링 차단 스크립트를 더 쉽게 작성할 수 있도록 하면 이 기능을 지원할 수 있기 때문입니다.
문서 PIP: focus() API가 오프너에 초점을 맞출 수 있도록 허용
이제 문서 PIP 창에서 opener.focus()를 사용하여 문서 PIP 창을 소유한 탭에 시스템 수준 포커스를 가져올 수 있습니다.
이를 통해 개발자는 필요한 경우 원래 탭을 포그라운드로 다시 가져올 수 있습니다. 예를 들어 사용자가 더 작은 PIP 창에 맞지 않는 UI 환경에 액세스해야 하는 경우
속성 가져오기 with 구문
가져오기 속성은 가져오기 선언(예: import xxx from "mod" with { type: "json" })에 주석을 추가할 수 있는 JavaScript 기능입니다. Chrome은 원래 assert를 키워드로 사용하여 이전 버전의 제안서 (Chrome 91)를 출시했습니다. 그런 다음 JSON 및 CSS용 HTML과 통합하는 동안 필요한 몇 가지 변경사항으로 인해 이 버전이 with를 사용하도록 업데이트되었습니다.
jitterBufferTarget
jitterBufferTarget 속성을 사용하면 애플리케이션이 RTCRtpReceiver 지터 버퍼가 유지할 미디어의 타겟 시간(밀리초)을 지정할 수 있습니다. 이는 사용자 에이전트에서 실행하는 버퍼링 양에 영향을 미치며, 이는 재전송 및 패킷 손실 복구에 영향을 미칩니다. 타겟 값을 변경하면 애플리케이션에서 재생 지연과 네트워크 지터로 인한 오디오 또는 동영상 프레임 부족 위험 간의 균형을 제어할 수 있습니다.
긴 애니메이션 프레임 타이밍
Long Animation Frames API는 Long Tasks API의 확장입니다. 후속 렌더링 업데이트와 함께 작업을 측정하여 장기 실행 스크립트, 렌더링 시간, 강제 레이아웃 및 스타일에 소비된 시간(레이아웃 트래싱이라고 함)과 같은 정보를 추가합니다.
개발자는 INP로 측정되는 '부진'의 진단으로 이를 사용할 수 있습니다. 이를 위해서는 INP가 나쁜 원인인 경우가 많은 기본 스레드 정체의 원인을 찾으면 됩니다.
NavigationActivation
NavigationActivation 인터페이스는 navigation.activation를 추가합니다. 여기에는 현재 문서가 활성화된 시점 (예: 초기화되었거나 뒤로/앞으로 캐시에서 복원된 시점)에 관한 상태가 저장됩니다.
즉, 개발자는 사용자가 어디에서 탐색했는지에 따라 맞춤설정된 페이지를 제공할 수 있습니다. 예를 들어 사용자가 홈페이지에서 유입된 경우 다른 애니메이션을 실행합니다.
페이지 공개 이벤트
pagereveal 이벤트는 문서가 처음 로드되거나, 뒤로/앞으로 캐시에서 복원되거나, 사전 렌더링에서 활성화된 후 첫 번째 렌더링 기회에 문서의 창 객체에서 발생합니다.
페이지 작성자는 이를 사용하여 이전 상태에서의 뷰 전환과 같은 페이지 진입 환경을 설정할 수 있습니다.
멀티 펜 잉크 처리를 위한 PointerEvent.deviceId
고급 펜 입력 기능이 있는 기기가 점점 더 보편화되고 있으므로 웹 플랫폼은 이러한 고급 기능을 완전히 지원하도록 계속 발전하여 최종 사용자와 개발자 모두에게 풍부한 환경을 제공하는 것이 중요합니다. 이러한 발전 중 하나는 기기의 디지타이저가 동시에 상호작용하는 두 개 이상의 펜 기기를 인식할 수 있는 기능입니다. 이 기능은 PointerEvent 인터페이스를 확장하여 개발자가 페이지와 상호작용하는 개별 펜을 안정적으로 식별하는 데 사용할 수 있는 세션 지속형, 문서 격리된 고유 식별자를 나타내는 새 속성 deviceId를 포함합니다.
탐색 요청에 대한 비공개 네트워크 액세스 확인: 경고 전용 모드
이 기능은 웹사이트 A가 사용자의 비공개 네트워크에 있는 다른 사이트 B로 이동하기 전에 다음을 실행합니다.
- 요청이 보안 컨텍스트에서 시작되었는지 확인합니다.
- 프리플라이트 요청을 전송한 후 B에서 비공개 네트워크 액세스를 허용하는 헤더로 응답하는지 확인합니다.
이미 하위 리소스 및 작업자를 위한 기능이 있지만 이 기능은 특히 탐색 요청에 사용됩니다.
이러한 확인 작업은 사용자의 비공개 네트워크를 보호하기 위한 것입니다. 이 기능은 '경고 전용' 모드이므로 확인에 실패해도 요청이 실패하지는 않습니다. 대신 개발자가 향후 시행에 대비할 수 있도록 DevTools에 경고가 표시됩니다.
Sec-CH-UA-Form-Factor 클라이언트 힌트
이 힌트는 사이트에서 응답을 조정할 수 있도록 사용자 에이전트 또는 기기의 '폼 팩터'를 나타냅니다.
Service Worker Static Routing API
이 API를 사용하면 개발자가 라우팅을 구성하고 서비스 워커가 실행하는 간단한 작업을 오프로드할 수 있습니다. 조건이 일치하면 서비스 워커를 시작하거나 JavaScript를 실행하지 않고도 탐색이 이루어지므로 웹페이지에서 서비스 워커 가로채기로 인한 성능 저하를 방지할 수 있습니다. 자세한 내용은 이 API에 관한 이전 블로그 게시물을 참고하세요.
공유 저장소 업데이트
이 업데이트는 iframe을 만들지 않고도 교차 출처 워크렛을 실행하는 것을 지원합니다.
zstd Content-Encoding
Zstandard(zstd)는 RFC8878에 설명된 데이터 압축 메커니즘입니다. zlib 수준의 실시간 압축 시나리오와 더 나은 압축률을 타겟팅하는 빠른 무손실 압축 알고리즘입니다. zstd 토큰이 IANA 등록 Content-Encoding 토큰으로 추가되었습니다.
Content-Encoding으로 zstd 지원을 추가하면 페이지를 더 빠르게 로드하고 대역폭을 덜 사용하며 서버에서 압축하는 데 드는 시간, CPU, 전력을 줄일 수 있으므로 서버 비용이 절감됩니다.
새로운 오리진 트라이얼
Chrome 123에서는 다음과 같은 새로운 오리진 트라이얼을 선택할 수 있습니다.
WebAssembly JavaScript Promise 통합
WebAssembly를 사용하여 작성된 반응형 애플리케이션을 지원하려면 WebAssembly 프로그램을 일시중지하고 재개할 수 있는 기능을 제공해야 합니다.
promise 통합의 기본 초기 사용 사례는 소스가 동기식 API를 사용하는 WebAssembly 프로그램이 웹 플랫폼에서 점점 더 많이 사용되는 비동기식 API를 사용할 수 있도록 허용하는 것입니다.
삭제
Chrome 123에서는 다음 기능이 삭제됩니다.
권한 및 권한 정책 window-management의 window-placement 별칭
Chrome 111에서는 window-placement 권한 및 권한 정책 문자열의 별칭으로 window-management가 추가되었습니다.
이는 window-placement를 지원 중단하고 삭제하여 문자열의 이름을 바꾸기 위한 광범위한 노력의 일환입니다. 용어 변경으로 Window Management API가 시간이 지남에 따라 발전함에 따라 설명자의 수명이 개선됩니다.
window-placement 별칭에 대한 지원 중단 경고는 Chrome 113에서 시작되었으며 이제 삭제됩니다.