Chrome 125

안정화 버전 출시일: 2024년 5월 14일

별도의 언급이 없는 한 다음 변경사항은 Android, ChromeOS, Linux, macOS, Windows용 Chrome 125 안정화 버전 채널 출시에 적용됩니다.

<ph type="x-smartling-placeholder">

HTML 및 DOM

선언적 Shadow DOM 직렬화

개발자가 섀도우 루트가 포함된 DOM 트리를 직렬화할 수 있는 기능으로, 최근 HTML 표준에서 표준화되었습니다.

<ph type="x-smartling-placeholder"></ph> 버그 추적 #41490936 | ChromeStatus.com 항목 | 사양

CSS

CSS 앵커 배치

CSS 앵커 포지셔닝을 사용하면 개발자가 절대 위치가 지정된 요소를 테더링할 수 있습니다. 페이지의 다른 요소 (앵커)에 선언적으로 연결할 수 있습니다. 할 수 있습니다. 앵커 포지셔닝은 앵커는 스크롤 가능합니다. 일반적인 사용 사례는 툴팁과 같은 팝오버를 호출한 요소 옆에 배치하거나 선택 메뉴와 팝오버 옵션 목록을 배치하는 것입니다. 앵커 배치 기능이 도입되기 전에는 이러한 사용 사례에서 JavaScript가 팝오버를 동적으로 배치하고 호출 요소가 스크롤될 때 앵커링된 상태를 유지해야 했습니다. 이는 성능 문제를 일으키고 올바르게 구현하기 어려운 작업입니다. 앵커 배치를 사용하면 이러한 사용 사례를 실행하는 데 사용할 수 있습니다

앵커 위치 지정 기능은 다수의 CSS 속성으로 구성됩니다. 가 몇 가지 주요 속성은 다음과 같습니다.

  • anchor-name: 요소를 다른 요소의 앵커로 설정합니다.
  • position-anchor: 고정된 요소가 앵커 위치 지정에 사용해야 하는 '기본' 앵커를 설명합니다.
  • anchor() 함수: 고정된 요소를 배치할 때 고정 요소의 위치를 참조하는 데 사용됩니다.
  • inset-area: 일반적인 상대 위치의 배치를 줄여서 나타냅니다.

CSS 앵커 위치 지정 API 소개 | 버그 추적 #40059176 | ChromeStatus.com 항목 | 사양

CSS 계단식 값 함수: round(), mod(), rem()

단계적 값 함수, 즉 round()님, mod() 및 rem()는 모두 주어진 다른 "단계 값"에 따라 다른 값을 계산합니다.

round() CSS 함수는 선택한 반올림 값에 따라 반올림된 숫자를 반환합니다. 전략입니다.

mod() CSS 함수는 JavaScript 나머지 연산자 (%)와 마찬가지로 첫 번째 매개변수를 두 번째 매개변수로 나눌 때 남은 나머지를 반환합니다. 나머지는 한 피연산자(분모)를 다른 피연산자(제수)로 나눌 때 남은 값입니다. 항상 피제수의 부호를 취합니다.

rem() CSS 함수는 첫 번째 매개변수가 입력되면 남은 나머지를 반환합니다. 두 번째 매개변수로 나뉘며, 이는 JavaScript 나머지 연산자와 유사합니다. (%). 나머지는 하나의 피연산자인 피연산자가 두 번째 피연산자인 제수로 나눈 값입니다. 항상 배당금의 부호를 취합니다.

버그 추적 #40253179 | ChromeStatus.com 항목 | 사양

<ph type="x-smartling-placeholder">

CSS 맞춤 :state()의 새로운 문법

CSS 맞춤 상태를 통해 맞춤 요소가 자체 의사 클래스를 노출할 수 있습니다. 이 구문이 CSSWG에 사양으로 지정되었으며, Chrome 125는 이제 구문 :state(foo). 이번 변경사항은 웹사이트가 새 문법으로 전환할 수 있도록 Chrome에서 기존 문법(:--foo)과 새 문법을 모두 지원하는 기간을 두고 적용됩니다.

ChromeStatus.com 항목 | 사양

밝기가 거의 100% 또는 0인 Oklab 및 Oklch 색상의 불연속성을 삭제합니다.

이 변경사항 이전에는 밝기 값이 100%인 모든 Lab, LCH, Oklab, Oklch 색상이 다른 두 매개변수와 관계없이 흰색으로 렌더링되었습니다. 밝기 값이 0인 이러한 공간의 모든 색상은 검은색으로 렌더링되었습니다. 이러한 두 매핑으로 인해 경사의 불연속성이 발생했으며 웹에는 예상치 못한 문제였음 있습니다.

이번 롤백을 통해 이러한 색상은 더 이상 인위적으로 매핑되지 않으며 결과로 표시되는 색상은 주변 색상과 연속으로 나타나며 디스플레이의 색 영역 매핑입니다.

ChromeStatus.com 항목 | 사양

색 구성표 루트 스크롤바를 사용했습니다.

'페이지의 지원되는 색상 구성표' 값이 'normal'이거나 지정되지 않았고 루트 요소의 계산된 color-scheme 값이 normal인 경우 브라우저가 사용자의 선호하는 색상 구성표를 사용하여 뷰포트 스크롤바를 렌더링합니다. 뷰포트 스크롤바는 웹 콘텐츠 외부에 있다고 간주할 수 있습니다. 따라서 사용자 에이전트는 사용자의 개발자가 표시 영역 스크롤바를 렌더링할 때 기본 색 구성표를 색 구성표에 대한 지원이 명시적으로 지정되지 않았습니다.

이러한 변경으로 인해 개발자가 할 수 있습니다. 새 동작을 사용하면 개발자가 루트 요소의 색 구성표를 지정하지 않은 경우에만 브라우저가 사용자의 기본 색 구성표를 사용하여 뷰포트 오버레이가 아닌 스크롤바를 렌더링합니다.

<ph type="x-smartling-placeholder"></ph> title[제목] | 버그 추적 #40259909 | ChromeStatus.com 항목 | 사양

view-transitions 클래스

새로운 CSS 속성 view-transition-class를 사용하면 다음을 할 수 있습니다. 하나 이상의 뷰 전환 클래스를 지정합니다. 그런 다음 예를 들어 이러한 클래스를 사용하는 ViewTransition 의사 요소 ::view-transition-group(*.class)입니다.

ViewTransition API의 확장 프로그램입니다. 유사한 방식으로 뷰 전환 의사 요소의 스타일을 단순화합니다. CSS 클래스가 일반 DOM 요소의 스타일을 단순화합니다.

<ph type="x-smartling-placeholder"></ph> 버그 추적 #41492972 | ChromeStatus.com 항목 | 사양

로드 중

WebSocket 구성 시 HTTP 및 HTTPS URL 허용

이 업데이트는 WebSocket 생성자에서 HTTP 및 HTTPS 스키마를 사용 설정합니다. 개발자가 상대 URL을 사용할 수 있습니다. 이것들은 ws: 및 wss: 내부 스키마

버그 추적 #325979102 | ChromeStatus.com 항목 | 사양

Web API

Attribution Reporting API 추가사항

Attribution Reporting API에 기능을 추가하여 실패 디버그 보고서 파싱 지원을 통한 디버깅 기능, API 개선 선호하는 등록 플랫폼을 지정하는 필드를 지원하여 에르고노믹스 개인 정보 보호 개선

<ph type="x-smartling-placeholder"></ph> ChromeStatus.com 항목

Compute Pressure API

Compute Pressure API는 높은 수준의 상태를 가질 수 있습니다. 이를 통해 올바른 기본 하드웨어 측정항목을 사용하도록 구현하여 사용자가 사용할 수 있는 모든 처리 능력을 활용할 수 있습니다. 시스템이 감당할 수 없는 스트레스를 받고 있지 않습니다.

Intel이 이 API의 설계 및 구현 작업을 주도했습니다. 이를 통해 화상 회의 앱에서 기능과 확인할 수 있습니다

<ph type="x-smartling-placeholder"></ph> Compute Pressure API | 버그 추적 #40683064 | ChromeStatus.com 항목 | 사양

이렇게 하면 Storage Access API의 제안된 확장 프로그램 (이전 버전)이 실행됩니다. 호환되며 오리진 트라이얼이 진행 중임)에서 파티션을 나누지 않은 쿠키에 대한 액세스를 허용합니다. 쿠키 외의 스토리지에 대한 액세스를 제공합니다 현재 API는 쿠키에 대한 액세스만 제공하며, 이러한 쿠키의 사용 사례는 비쿠키 저장소와 다릅니다.

버그 추적 #40282415 | ChromeStatus.com 항목 | 사양

ID 어설션 엔드포인트에 대한 FedCM CORS 요구사항

FedCM API의 가져오기는 있습니다. 계정에 대한 논의가 진행 중인 경우 ID 어설션 엔드포인트가 CORS를 사용합니다 이 업데이트는 이 가져오기의 보안 속성을 다른 항목 가져오기를 실행할 수 있습니다

<ph type="x-smartling-placeholder"></ph> FedCM 업데이트: Button Mode API 오리진 트라이얼, CORS, SameSite | 버그 추적 #40284123 | ChromeStatus.com 항목

이제 FedCM은 CORS를 사용하여 ID 어설션 요청을 전송합니다. 이렇게 변경되면 Chrome은 더 이상 SameSite=Strict 쿠키를 ID 어설션 엔드포인트로 전송하지 않음 Chrome에서 여전히 SameSite=None을 전송합니다. 계정 엔드포인트와 ID 어설션 엔드포인트에 서로 다른 쿠키 세트를 전송하는 것은 적절하지 않으므로 이 변경사항을 통해 일관성을 유지합니다.

SameSite=Strict 쿠키를 전송하지 않는 것은 requestStorageAccess 동작 및 일반적인 크로스 사이트 요청과도 일치합니다.

버그 추적 #329145816 | ChromeStatus.com 항목 | 사양

상호 운용 가능한 마우스 이동 기본 작업

Chrome에서 mousemove 이벤트 취소를 허용하여 텍스트 선택과 같은 다른 API(이전에는 드래그 앤 드롭 포함)를 방지했습니다. 이것은 다른 전공 브라우저 UI 이벤트 사양을 준수하지 않습니다. 이제 텍스트 선택이 마우스 이동의 기본 동작이 더 이상 사용되지 않습니다. 텍스트 선택 및 드래그 앤 드롭으로 selectstart 및 dragstart 이벤트를 취소하여 계속 방지 로 나뉩니다.

이 기능은 Chrome 125부터 점진적으로 출시될 예정이며 예상되는 출시 버전입니다. Chrome 126부터 모든 사용자에게 제공될 예정입니다.

<ph type="x-smartling-placeholder"></ph> 데모 | 버그 추적 #40078978 | ChromeStatus.com 항목 | 사양

정규 표현식 수정자

정규 표현식 수정자는 i, m, 및 s분 패턴을 그리는 것입니다.

하위 표현식의 플래그를 사용 설정하려면 (?X:subexpr)를 사용합니다. 여기서 X는 i, m, s 중 하나입니다. 하위 표현식의 플래그를 사용 중지하려면 (-X:subexpr)를 사용합니다.

예를 들어 대소문자 구분 i 플래그의 경우 다음과 같습니다.

const re1 = /^[a-z](?-i:[a-z])$/i;
re1.test("ab"); // true
re1.test("Ab"); // true
re1.test("aB"); // false

const re2 = /^(?i:[a-z])[a-z]$/;
re2.test("ab"); // true
re2.test("Ab"); // true
re2.test("aB"); // false

ChromeStatus.com 항목 | 사양

정규 표현식에 이름이 지정된 중복 캡처 그룹이 있음

이름이 지정된 중복 캡처 그룹을 사용하면 대안 간에 동일한 캡처 그룹 이름을 사용할 수 있습니다. 예:

const re = /(?<year>[0-9]{4})-[0-9]{2}|[0-9]{2}-(?<year>[0-9]{4})/;

이 경우 year는 첫 번째 대체 텍스트 변환 ((?<year>[0-9]{4})-[0-9]{2})에 유효합니다. 또는 두 번째 대안 ([0-9]{2}-(?<year>[0-9]{4}))입니다.

ChromeStatus.com 항목 | 사양

Chrome 앱

Chrome 앱의 Direct Sockets API

이 업데이트를 통해 특수 앱을 Chrome 앱에서 Chrome 앱에서 Direct Socket을 사용 설정하여 격리된 웹 앱을 직접 전송 제어 프로토콜 (TCP) 및 사용자 데이터그램 프로토콜 설정 네트워크 장치 및 시스템과의 (UDP) 통신에 사용될 수 있습니다.

ChromeStatus.com 항목 | 사양

새로운 오리진 트라이얼

FedCM Button Mode API 및 기타 계정 API 사용

이 오리진 트라이얼에는 다음과 같은 두 가지 FedCM API가 포함됩니다.

Button Mode API를 사용하면 웹사이트에서 다음과 같은 버튼 클릭 내에서 FedCM을 호출할 수 있습니다. Sign-in to IdP(IdP에 로그인) 버튼을 클릭합니다. 이를 위해서는 FedCM이 사용자가 로그아웃할 때 UI를 표시하지 않는 위젯 모드와 달리 항상 표시된 사용자 인터페이스로 응답해야 합니다. 다음에서 FedCM API 호출: 버튼 모드: 사용자가 IdP에 로그인 (대화상자 창)할 때 님이 로그아웃했습니다.

또한 버튼 모드는 명시적 사용자 내에서 호출되므로 UI가 더 두드러질 수도 있습니다 (예: 중앙 및 모달). 명확하게 구현되어 있지 않은 위젯 모드의 UI와 비교하면 있습니다. FedCM 업데이트: Button Mode API 출처 체험판, CORS, SameSite에서 Button Mode API가 작동하는 방식을 자세히 알아보세요.

Use Other Account API를 사용하면 ID 공급자가 사용자가 다른 계정을 찾습니다.

시작 버전 체험판 | 데모 | 버그 추적 #40284792 | ChromeStatus.com 항목 | 사양

폴더블 API

이 오리진 트라이얼에는 Device Posture API 및 표시 영역 세그먼트가 포함되어 있습니다 Enumeration API 개발자가 폴더블을 타겟팅하는 데 도움이 되도록 설계된 API 기기에서 사용할 수 있습니다.

<ph type="x-smartling-placeholder"></ph> 오리진 트라이얼 | 폴더블 API 오리진 트라이얼 | ChromeStatus.com 항목 | 사양

접두사가 있는 HTMLVideoElement 전체 화면 속성 및 메서드의 지원 중단 체험판

이 지원 중단 기능 트라이얼을 통해 HTMLVideoElement 속성 및 메서드를 사용하여 생성합니다.

시작 버전 체험판 | ChromeStatus.com 항목

미리 로드 스캔 건너뛰기

탐색을 위해 미리 로드 스캐너를 건너뜁니다. 하위 리소스 가져오기가 없는 페이지의 성능 저하

사전 로드 스캐너 단계는 예측적 미리 가져오기를 구현하여 하위 리소스 가져오기가 있는 페이지의 성능을 개선합니다. 하지만 페이지의 경우 하위 리소스가 없는 페이지의 경우 이는 추가적인 처리 오버헤드이지만 이점이 거의 없습니다.

이 오버헤드를 줄여 이점을 얻으려는 고급 웹 사용자를 위해 이 실험은 미리 로드 스캐너를 사용 중지하는 페이지 수준 제어를 제공합니다. 데이터 이 실험에서 수집된 API는 수정된 API 또는 다른 API 버전 HTML 미리 로드 스캐너 구현이 도움이 될 것입니다.

<ph type="x-smartling-placeholder"></ph> 오리진 트라이얼 | 버그 추적 #330802493 | ChromeStatus.com 항목 | 사양

지원 중단 및 삭제

권한 및 권한 정책 'window-management'의 'window-placement' 별칭 삭제

'window-placement'를 삭제합니다. 권한 및 권한 정책의 별칭 'window-management'로 이동합니다. 이것은 결국 'window-placement' 지원 중단 및 삭제에 대해 안내해 드립니다. 용어 변경으로 Window Management API가 시간이 지남에 따라 진화함에 따라 설명자의 수명이 개선됩니다.

<ph type="x-smartling-placeholder"></ph> title[제목] | 버그 추적 #40842072 | ChromeStatus.com 항목 | 사양

엔터프라이즈 정책 삭제: NewBaseUrlInheritanceBehaviorAllowed

이 코드가 실행되는 기본 코드 변경사항 (새로운 기본 URL 상속 동작 사용 설정)은 엔터프라이즈 정책 재정의는 8월 이후 안정화 버전에서 사용 설정되었습니다. 2023년 (Chrome 118). 알려진 문제가 해결되었으므로 이 엔터프라이즈 정책은 Chrome 125에서 삭제되었습니다.

<ph type="x-smartling-placeholder"></ph> ChromeStatus.com 항목

접두사가 있는 HTMLVideoElement 전체 화면 속성 및 메서드 삭제

접두사가 있는 HTMLVideoElement 전체 화면 API는 Chrome 38부터 지원 중단되었습니다. 이러한 함수는 2018년 Chrome 71에서 접두사가 없는 Element.requestFullscreen()로 대체되었습니다.

다음 속성과 메서드가 HTMLVideoElement에서 삭제됩니다.

  • webkitSupportsFullscreen
  • webkitDisplayingFullscreen
  • webkitEnterFullscreen()
  • webkitExitFullscreen()
  • webkitEnterFullScreen()('S'의 대소문자는 FullScreen)
  • webkitExitFullScreen()

사이트에서 여전히 이러한 기능을 사용하고 있고 코드 업데이트에 시간이 더 필요한 경우 이 게시물에 나열된 지원 중단 체험판에 등록하세요.

ChromeStatus.com 항목

추가 자료

더 많은 정보를 찾고 싶으신가요? 다음 추가 리소스를 확인하세요.

Chrome 다운로드

Chrome용 다운로드 Android, 데스크톱 또는 iOS: