정식 출시일: 2024년 5월 14일
달리 명시되지 않는 한 다음 변경사항은 Android, ChromeOS, Linux, macOS, Windows용 Chrome 125 공개 버전 채널 출시에 적용됩니다.
HTML 및 DOM
선언적 Shadow DOM 직렬화
개발자가 섀도우 루트가 포함된 DOM 트리를 직렬화할 수 있는 기능이며 최근 HTML 표준에서 표준화되었습니다.
추적 버그 #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 항목 | 사양
CSS 맞춤 :state()의 새로운 문법
CSS 맞춤 상태를 사용하면 맞춤 요소가 자체 의사 클래스를 노출할 수 있습니다. 문법은 이제 CSSWG에서 지정되었으며 Chrome 125에서는 이제 새로운 구문 :state(foo)를 지원합니다. 이렇게 변경하면 Chrome에서 이전 구문 (:--foo)과
새 구문을 모두 지원하여 웹사이트가 새로운 구문으로
전환될 수 있는 창이 생깁니다.
밝기가 거의 100% 또는 0인 Oklab 및 Oklch 색상의 불연속성 제거
변경 전에는 다른 두 매개변수와 관계없이 밝기 값이 100% 인 모든 Lab, LCH, Oklab, Oklch 색상이 흰색으로 렌더링되었습니다. 이러한 공간에서 밝기 값이 0인 모든 색상은 검은색으로 렌더링되었습니다. 이 두 매핑은 경사에 불연속성을 발생시키며 웹 개발자에게 예상치 못한 문제였습니다.
이 롤백으로 이러한 색상은 더 이상 인위적으로 매핑되지 않으며 결과로 표시되는 색상은 근처 색상과 연속되며 디스플레이의 색 영역 매핑에 따라 달라집니다.
사용된 색 구성표 루트 스크롤바
'페이지의 지원되는 색 구성표' 값이 '일반'이거나 지정되지 않았고, 루트 요소의 계산된 color-scheme 값이 normal인 경우 브라우저에서 사용자가 선호하는 색 구성표를 사용하여 표시 영역 스크롤바를 렌더링하도록 합니다. 표시 영역 스크롤바는 웹 콘텐츠 외부에 있는 것으로 간주될 수 있습니다. 따라서 개발자가 색 구성표 지원을 명시적으로 지정하지 않은 경우 사용자 에이전트는 표시 영역 스크롤바를 렌더링할 때 사용자가 선호하는 색 구성표를 따라야 합니다.
이 변경사항은 개발자가 스크롤바의 색 구성표를 제어하는 것을 방해하지 않습니다. 새로운 동작으로 인해 브라우저에서는 개발자가 루트 요소에 색 구성표를 지정하지 않은 경우에만 사용자가 선호하는 색 구성표를 사용하여 표시 영역 비 오버레이 스크롤바를 렌더링합니다.
title | 추적 버그 #40259909 | ChromeStatus.com 항목 | 사양
view-transitions 클래스
새로운 CSS 속성 view-transition-class를 사용하면 하나 이상의 뷰 전환 클래스를 지정할 수 있습니다. 그런 다음 이러한 클래스를 사용하여 ViewTransition 유사 요소를 선택할 수 있습니다(예: ::view-transition-group(*.class)).
이 기능은 CSS 클래스가 일반 DOM 요소의 스타일 지정을 간소화하는 것과 비슷한 방식으로 뷰 전환 의사 요소의 스타일 지정을 간소화하는 ViewTransition API의 확장 프로그램입니다.
추적 버그 #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 인체공학을 개선하고, 개인 정보 보호를 개선합니다.
Compute Pressure API
Compute Pressure API는 시스템의 CPU 부하를 나타내는 높은 수준의 상태를 제공합니다. 이를 통해 구현 시 적절한 기본 하드웨어 측정항목을 사용하여 시스템이 관리할 수 없는 스트레스를 받지 않는 한 사용자가 사용 가능한 모든 처리 성능을 활용할 수 있도록 할 수 있습니다.
Intel은 이 API의 설계 및 구현 작업을 주도했으며, 이를 통해 화상 회의 앱이 기능과 성능의 균형을 동적으로 맞출 수 있습니다.
Compute Pressure API | 추적 버그 #40683064 | ChromeStatus.com 항목 | 사양
Storage Access API (SAA)를 쿠키가 아닌 저장소로 확장
이렇게 하면 서드 파티 컨텍스트에서 파티션을 나누지 않은 쿠키 및 비쿠키 저장소에 액세스할 수 있도록 Storage Access API의 제안된 확장 (이전 버전과 호환되며 오리진 트라이얼에 사용 중)이 실행됩니다. 현재 API는 비쿠키 스토리지와 사용 사례가 다른 쿠키에 대한 액세스만 제공합니다.
추적 버그 #40282415 | ChromeStatus.com 항목 | 사양
ID 어설션 엔드포인트에 대한 FedCM CORS 요구사항
FedCM API의 가져오기는 필요한 속성 때문에 추론하기 어렵습니다. 계정 엔드포인트와 관련하여 지속적인 논의가 진행되고 있지만 ID 어설션 엔드포인트가 CORS를 사용해야 한다는 의견도 대부분 있습니다. 이 업데이트는 이 가져오기의 보안 속성을 웹 플랫폼의 다른 가져오기와 더 밀접하게 맞춥니다.
FedCM 업데이트: Button Mode API 오리진 트라이얼, CORS, SameSite | 추적 버그 #40284123 | ChromeStatus.com 항목
FedCM 인증 요청이 더 이상 SameSite=Strict 쿠키를 전송하지 않음
이제 FedCM에서 CORS와 함께 ID 어설션 요청을 보냅니다. 이러한 변경사항에 따라 Chrome은
여전히 SameSite=None를 전송하지만
Chrome에서 더 이상 SameSite=Strict 쿠키를 ID 어설션 엔드포인트에 전송하지 않습니다. 계정 엔드포인트와 ID 어설션 엔드포인트에 서로 다른 쿠키 집합을 보내는 것은 적합하지 않으므로 이러한 변경으로 인해 쿠키의 일관성이 유지됩니다.
SameSite=Strict 쿠키를 전송하지 않는 것은 일반적으로 requestStorageAccess 동작 및 크로스 사이트 요청과도 일치합니다.
추적 버그 #329145816 | ChromeStatus.com 항목 | 사양
상호 운용 가능한 마우스 이동 기본 작업
Chrome에서는 텍스트 선택 및 드래그 앤 드롭과 같은 다른 API를 방지하기 위해 마우스 이동 이벤트 취소를 허용했습니다. 이는 다른 주요 브라우저와 일치하지 않으며 UI 이벤트 사양도 준수하지 않습니다. 이제 텍스트 선택이 더 이상 마우스 이동의 기본 동작이 아닙니다. 계속해서 selectstart 및 dragstart 이벤트를 취소하여 텍스트 선택과 드래그 앤 드롭을 방지할 수 있습니다.
이 기능은 Chrome 125부터 점진적으로 배포되며 Chrome 126부터 모든 사용자가 사용할 수 있을 것으로 예상됩니다.
데모 | 버그 추적 #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
정규 표현식 중복 이름이 지정된 캡처 그룹
중복 이름이 지정된 캡처 그룹을 사용하면 여러 대안에서 동일한 캡처 그룹 이름을 사용할 수 있습니다. 예:
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}))에 유효합니다.
Chrome 앱
Chrome 앱의 Direct Sockets API
이 업데이트를 통해 Chrome 앱에서 Direct Socket을 사용 설정하여 특수 앱을 격리된 웹 앱으로 쉽게 전환할 수 있습니다. 이를 통해 웹 앱이 네트워크 기기 및 시스템과 직접 전송 제어 프로토콜 (TCP) 및 사용자 데이터그램 프로토콜(UDP) 통신을 설정할 수 있습니다.
새로운 오리진 트라이얼
FedCM Button Mode API 및 다른 계정 API 사용
이 오리진 트라이얼에는 다음 두 가지 FedCM API가 포함됩니다.
Button Mode API를 사용하면 웹사이트에서 IdP에 로그인 버튼 클릭과 같은 버튼 클릭 내에서 FedCM을 호출할 수 있습니다. 이를 위해서는 사용자가 로그아웃할 때 UI를 표시하지 않는 위젯 모드와 달리 FedCM에서 항상 표시되는 사용자 인터페이스로 응답하도록 해야 합니다. 버튼 모드에서 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 및 Viewport Segments Enumeration API가 포함됩니다. 이러한 API는 개발자가 폴더블 기기를 타겟팅하는 데 도움이 되도록 설계되었습니다.
오리진 트라이얼 | 폴더블 API 오리진 트라이얼 | ChromeStatus.com 항목 | 사양
프리픽스가 붙은 HTMLVideoElement Fullscreen 속성 및 메서드에 대한 시도 지원 중단
이 지원 중단 체험판을 사용하면 코드를 조정하는 데 시간이 더 필요한 경우 접두사로 지정된 HTMLVideoElement 속성 및 메서드를 다시 지원할 수 있습니다.
오리진 트라이얼 | ChromeStatus.com 항목
미리 로드 스캔 건너뛰기
하위 리소스를 가져오지 않는 페이지의 성능 절충점을 살펴보기 위해 미리 로드 스캐너를 건너뜁니다.
미리 로드 스캐너 단계는 예측적 미리 가져오기를 구현하여 하위 리소스 가져오기를 사용하는 페이지의 성능을 향상시킵니다. 하지만 이 단계의 이점이 없는 페이지, 즉 하위 리소스가 없는 페이지의 경우 추가 처리 오버헤드가 발생하며 거의 이점이 없습니다.
이 오버헤드를 줄임으로써 이점을 활용하려는 고급 웹 사용자를 위해 이 실험은 페이지 수준 컨트롤을 제공하여 미리 로드 스캐너를 사용 중지합니다. 이 실험에서 수집한 데이터는 수정된 API 또는 HTML 미리 로드 스캐너의 다른 구현이 유용한지 평가할 수 있습니다.
오리진 트라이얼 | 추적 버그 #330802493 | ChromeStatus.com 항목 | 사양
지원 중단 및 삭제
권한 및 'window-management' 권한 정책의 'window-placement' 별칭 삭제
권한 및 'window-management' 권한 정책의 'window-placement' 별칭을 삭제합니다. 이는 'window-placement'를 지원 중단하고 삭제하여 문자열 이름을 바꾸려는 광범위한 노력의 일환입니다. 시간이 지남에 따라 Window Management API가 발전함에 따라 용어가 변경되면 설명어의 수명이 향상됩니다.
title | 추적 버그 #40842072 | ChromeStatus.com 항목 | 사양
기업 정책 삭제: NewBaseUrlInheritanceBehaviorAllowed
이 엔터프라이즈 정책이 재정의하는 기본 코드 변경사항 (새로운 기본 URL 상속 동작 사용 설정)은 2023년 8월 이후 안정화 버전 (Chrome 118)에서 사용 설정되었습니다. 알려진 문제가 처리된 이후 이 엔터프라이즈 정책은 Chrome 125에서 삭제되었습니다.
접두사가 붙은 HTMLVideoElement Fullscreen 속성 및 메서드 삭제
접두사가 붙은 HTMLVideoElement 전체화면 API는 Chrome 38부터 지원 중단되었습니다. 이 API는 2018년에 Chrome 71에서 접두어 없이 처음 출시된 Element.requestFullscreen()로 대체되었습니다.
다음 속성 및 메서드가 HTMLVideoElement에서 삭제됩니다.
webkitSupportsFullscreenwebkitDisplayingFullscreenwebkitEnterFullscreen()webkitExitFullscreen()webkitEnterFullScreen()(FullScreen에서 'S'의 대소문자가 다름)webkitExitFullScreen()
사이트에서 여전히 이 API를 사용하고 있고 코드를 업데이트하는 데 시간이 더 필요한 경우 이 게시물에 나와 있는 지원 중단 체험판에 등록하세요.
추가 자료
더 자세한 내용을 찾으시나요? 추가 리소스를 확인하세요.
- Chrome 125의 새로운 기능
- Chrome DevTools 125의 새로운 기능
- Chrome 125용 ChromeStatus.com 업데이트
- Chrome 출시 캘린더
- 지원 중단 예정
- 삭제 예정