이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chrome 117 베타

CSS의 CSS 그리드 서브그리드, 시작 및 종료 애니메이션 지원, 배열 그룹화, 반복자 도우미 등

달리 명시되지 않는 한, 설명된 변경사항은 Android, ChromeOS, Linux, macOS, Windows용 최신 Chrome 베타 채널 버전에 적용됩니다. 제공된 링크 또는 ChromeStatus.com의 목록을 통해 여기에 나열된 기능에 관해 자세히 알아보세요. Chrome 117은 2023년 8월 16일 현재 베타 버전입니다. 데스크톱용 Google.com 또는 Android의 Google Play 스토어에서 최신 버전을 다운로드할 수 있습니다.

CSS

이 버전에는 6가지 새로운 CSS 기능이 추가되었습니다. 처음 세 개의 속성은 시작 및 나가기 애니메이션을 사용 설정하는 개별 속성에서 전환을 사용 설정하기 위한 작업의 일부입니다.

@starting-style 규칙

이 at 규칙을 사용하면 작성자가 첫 번째 스타일 업데이트에서 CSS 전환을 시작할 수 있습니다.

CSS 전환은 요소의 첫 번째 스타일을 업데이트할 때 또는 표시 유형이 none에서 다른 유형으로 변경될 때 초기 스타일에서 전환을 트리거하지 않습니다. 이는 초기 스타일에서 예기치 않은 전환이 발생하는 것을 방지하기 위한 것입니다. 첫 번째 스타일 업데이트에서 전환을 시작하려면 이제 @starting-style 규칙 내에서 스타일을 적용할 수 있습니다. 예를 들어 다음 CSS는 div의 첫 번째 스타일을 업데이트할 때 녹색에서 라임색으로 배경색 전환을 시작합니다.

div { 
  transition: background-color 0.5s; 
  background-color: lime; 
} 

@starting-style {
  div { 
    background-color: green; 
  } 
}

오버레이 속성

개발자는 overlay 속성을 사용하여 종료 전환을 위해 요소를 상단 레이어에 유지할 수 있습니다. 오버레이 속성은 요소가 최상위 레이어에 있는지 여부를 나타내기 위해 추가되며 none 또는 auto의 두 값을 사용할 수 있습니다.

CSS 전환 동작 속성

transition-behavior CSS 속성은 전환에서 개별 속성을 사용할 수 있도록 하는 transition 속성의 긴 요소입니다. 전환 동작의 allow-discrete 값을 지정하면 이제 불연속 속성에서 애니메이션이 시작되고 50%의 초깃값에서 최종 값으로 전환됩니다. display: none 및 content-visibility: hidden가 초기 값 또는 최종 값 중 하나인 전환의 경우 표시되는 값이 전환이 진행되는 동안 전체 기간 동안 사용됩니다.

CSS 그리드 하위 그리드 값

이제 grid-template-columns 및 grid-template-rows의 subgrid 값이 Chrome에 구현되었습니다. 이 값을 사용하면 행, 열 또는 둘 다에 대해 새 트랙 정의를 만드는 대신 중첩된 그리드에서 상위 항목에 정의된 트랙을 사용할 수 있습니다.

CSS text-wrap: 예쁜

CSS text-wrap 속성의 pretty 값은 속도가 아닌 최상의 레이아웃에 맞게 최적화됩니다. 본문 텍스트용이므로 여러 줄이 필요합니다. pretty를 사용하면 개발자가 wrap보다 느릴 수 있는 레이아웃 메서드를 명시적으로 선택하여 성능에 최적화됩니다. 현재 Chrome 구현은 텍스트 단락 하단에 한 단어가 표시되지 않도록 분리된 항목을 최적화합니다.

Chrome 117에서 text-wrap: pretty의 데모를 사용하여 값에 따라 텍스트 표현이 어떻게 변경되는지 확인하세요.

include-intrinsic-size: auto none 지원

이 기능은 auto && none도 포함하도록 기존 contain-intrinsic-size 구문을 확장합니다.

Web API

배열 그룹화

배열 그룹화는 매우 일반적인 연산으로, SQL의 GROUP BY 절 및 맵리듀스 프로그래밍 (map-group-reduce가 더 적합하다고 할 수 있음)으로 가장 잘 볼 수 있습니다. 데이터를 그룹으로 결합하는 기능을 통해 개발자는 동질 집단의 평균 연령이나 웹페이지의 일일 LCP 값과 같이 고차 데이터 세트를 계산할 수 있습니다. 이 기능은 Object.groupBy 및 Map.groupBy 정적 메서드를 추가하여 이를 사용 설정합니다. Object 메서드는 그룹이 속성 키인 일반 객체를 반환합니다. Map 메서드는 Map 를 반환하며, 여기서 키는 임의의 값이 될 수 있습니다.

Clear-Site-Data 헤더를 통해 클라이언트 힌트 삭제

이제 웹사이트에서 Clear-Site-Data: "clientHints"를 사용하여 클라이언트 힌트 캐시를 지울 수 있습니다. 이제 동일한 헤더에서 '쿠키', '캐시' 또는 '*'를 타겟팅하는 경우 클라이언트 힌트가 삭제됩니다. 이는 사용자가 UI 클라이언트 힌트에서 쿠키를 지우는 경우 클라이언트 힌트도 이미 삭제되기 때문입니다. 클라이언트 힌트 캐시도 캐시이며 각각 와일드 카드 대상과 일관성을 유지하기 위해서입니다.

Clear-Site-Data 헤더 와일드 카드 구문

이제 웹사이트에서 Clear-Site-Data: "*"를 전송하여 모든 스토리지 타겟 ('쿠키', '캐시', '스토리지')을 삭제할 수 있습니다. Chrome은 현재 'executionContexts'의 삭제를 지원하지 않지만 향후에 추가하면 '*'를 타겟팅하는 헤더도 모두 삭제됩니다.

customElements.getName

customElements.getName() 메서드는 지정된 맞춤 요소 정의의 태그 이름을 반환합니다.

반복자 도우미

반복자 도우미는 반복기의 일반적인 사용 및 소비를 허용하는 반복기 프로토타입의 새로운 메서드입니다.

EventTarget 인터페이스에서 CaptureController가 파생되도록 합니다.

CaptureController 인터페이스를 사용하면 화면 캡처 세션을 추가로 조작할 수 있습니다. 앞으로는 캡처 세션과 관련된 이벤트가 컨트롤러에서 전달될 것으로 예상됩니다. 이러한 이벤트의 리스너를 관리할 수 있도록 CaptureController에서 EventTarget 메서드를 사용할 수 있습니다.

PerformanceResourceTiming 전송 유형

PerformanceResourceTiming의 deliveryType 속성은 리소스가 전송된 방식에 대한 정보를 반환합니다. 예를 들어 캐시에서 제공된 리소스 (현재 transferSize를 통해 노출됨)와 이전 페이지에서 미리 가져온 탐색입니다.

URL setter의 포트 오버플로 검사

url.port 설정 시 포트 값이 확인됩니다. 16비트 숫자 제한을 초과하는 모든 값은 더 이상 유효하지 않습니다. 예를 들어 다음 스크립트는 변경 후 다르게 동작합니다.

u = new URL("http://test.com"); 
u.port = 65536; 
console.log(u.port);

변경 전에는 출력은 65536입니다. 변경 후에는 80이 출력됩니다.

Private State Token API

이는 서드 파티 쿠키와 같은 교차 사이트 영구 식별자를 사용하지 않고 사이트 간에 제한된 비공개 신호를 전파하기 위한 새로운 API입니다. 서드 파티 쿠키를 사용하는 사기 방지 방법은 서드 파티 쿠키가 지원 중단되면 작동하지 않습니다. Private State Token API는 사기 방지 신호를 생성하거나 정의하지 않습니다. 이는 해당 퍼스트 파티 및 토큰 발급기관에 따라 다릅니다. 대신 API는 이러한 신호로 전송되는 정보에 제한을 적용하여 개인 정보 보호를 유지합니다. 이 API는 IETF에 의해 표준화되고 있는 개인 정보 보호 패스 프로토콜의 변형에 기반합니다. 이는 개인 정보 보호 패스 프로토콜의 웹에 노출된 형태로 간주될 수 있습니다. API 사양은 새로운 버전 및 토큰 유형에 맞춰 업데이트될 예정이며 개인 정보 보호 패스 실무 그룹 사양을 통해 최신 상태로 유지될 예정입니다. 예상되는 변경은 기본 암호화 프로토콜 및 토큰 발급 코드에 있을 것입니다. 개발자가 발급 및 사용 Fetch API에 대한 변경사항은 없을 것으로 예상됩니다. Private State Token API의 이전 명칭은 Trust Token API입니다. 기본 의미 체계를 더 정확하게 파악하고 사용자에게 개인 정보 보호의 이점을 강조하기 위해 이름이 변경되었습니다.

URL 표준 호환 IPv4 임베디드 IPv6 호스트 파서

IPv4 삽입된 IPv6 호스트 파서 파싱 동작이 웹 URL 표준을 엄격하게 따르도록 업데이트됩니다. IPv6 주소에 도입된 제한사항은 다음과 같습니다.

삽입된 IPv4 주소는 항상 4개의 부분으로 구성됩니다.
http://[::1.2] 등 4개 미만의 부분으로 구성된 주소는 더 이상 유효하지 않습니다. 이 기능은 URL 상호 운용성 2023의 일부입니다.

URL: '%00'을(를) 유효한 URL 경로로 허용

현재 Chrome에서는 URL의 경로 부분에 URL 표준을 준수하지 않는 '%00' (또는 null)이 포함된 URL이 잘못된 것으로 간주합니다. 예를 들어 new URL(...)에서 잘못된 URL 예외가 발생하므로 Chrome에서 다음 테스트가 실패합니다.

assertEquals(new URL("http://example.com/%00").pathname, "/%00");

URL 표준에 따르면 URL 경로의 문자나 바이트 시퀀스가 URL을 무효화해서는 안 됩니다. 이 변경사항으로 인해 Chrome이 해당 표준을 따르도록 업데이트됩니다.

WebRTC RTP 헤더 확장 프로그램 제어

WebRTC RTCRtpTransceiver API를 확장하여 협상되는 RTP 헤더 확장 프로그램을 제어합니다.

VideoEncoder의 프레임당 양자화

VideoEncoder용 '양자화기' VideoEncoderBitrateMode를 추가합니다. 이를 통해 AV1, VP9 및 AVC 동영상 코덱의 각 프레임에 양자화 매개변수를 지정할 수 있습니다.

`requestDevice()`의 WebUSB `exclusionFilters` 옵션

navigator.usb.requestDevice()의 exclusionFilters 옵션을 사용하면 웹 개발자가 브라우저 선택 도구에서 일부 기기를 제외할 수 있습니다. 이는 범위가 더 넓은 필터와 일치하지만 지원되지 않는 기기를 제외하는 데 사용할 수 있습니다.

오리진 트라이얼 진행 중

Chrome 117에서는 다음과 같은 새로운 오리진 트라이얼을 선택할 수 있습니다.

Shared Brotli를 사용한 압축 사전 전송

이 기능은 지정된 이전 응답을 Brotli 압축 HTTP 응답을 위한 외부 사전으로 사용하기 위한 지원을 추가합니다.

압축 사전 전송 오리진 트라이얼에 등록합니다.

WebSQL 지원 중단 체험판

Chrome에서 WebSQL이 삭제됩니다. 이를 사용하는 사이트는 Wasm을 통해 SQLite로 이동하는 것이 좋습니다.

이 지원 중단 체험판을 통해 이전에 시간이 더 필요한 개발자는 Chrome 123 (2024년 3월)까지 WebSQL을 계속 사용할 수 있습니다. WebSQL 지원 중단 체험판에 등록합니다.

탭으로 구분된 웹 앱

웹 앱 창에 탭 표시줄을 만들 수 있도록 허용합니다. 예를 들어 동일한 앱에서 여러 문서를 수정할 수 있습니다. 이렇게 하면 새로운 디스플레이 모드 '탭'과 새로운 매니페스트 필드가 추가되어 탭 표시줄을 맞춤설정할 수 있습니다.

탭으로 웹 앱 오리진 트라이얼에 등록

지원 중단 및 삭제

이 버전의 Chrome에서는 아래에 나열된 지원 중단 및 삭제 기능이 도입되었습니다. 예정된 지원 중단, 현재 지원 중단, 이전 삭제 목록을 확인하려면 ChromeStatus.com을 방문하세요.

이번 Chrome 버전에서는 두 가지 기능이 지원 중단됩니다.

unload 이벤트 지원 중단

Chrome 117부터 unload 이벤트 핸들러의 지원 중단 프로세스가 시작됩니다. 사이트에서 이러한 API를 사용하는 경우 unload 지원 중단에 관한 전용 게시물에서 자세한 내용을 확인하시기 바랍니다.

TLS SHA-1 서버 서명 지원 중단

Chrome은 TLS 핸드셰이크 중에 서버 서명에 SHA-1을 사용하는 서명 알고리즘에 대한 지원을 중단합니다. 이미 삭제된 서버 인증서 또는 계속 지원되는 클라이언트 인증서의 SHA-1 지원에는 영향을 미치지 않습니다.

이번 Chrome 버전에서는 네 가지 기능이 삭제됩니다.

[WebRTC] 콜백 기반 레거시 getStats() 취소

RTCPeerConnection에는 두 가지 버전의 getStats()가 있습니다. 그 중 하나는 프로미스 해결을 통해 보고서를 반환하는 사양을 준수하는 것이고, 다른 하나는 콜백을 첫 번째 인수로 사용하여 매우 다른 보고서를 반환하는 비표준 버전입니다. 이제 콜백 기반 메서드가 삭제되었습니다.

이전에 관한 자세한 내용 및 시간이 더 필요한 경우 취해야 할 조치는 기존 getStats() 이전 가이드를 참고하세요.

WebRTC getStats datachannelIdentifier의 -1 값을 삭제했습니다.

WebRTC getStats API는 dataChannelIdentifier 속성을 노출합니다. datachannel 연결이 설정되기 전에 통계가 쿼리되는 경우에는 더 이상 '-1' 값을 제공하지 않습니다. 대신 사전 멤버가 생략됩니다.

WebRTC getStats encoderImplementation 및 DedefrImplementation 'unknown' 삭제

WebRTC getStats API는 발신 및 수신 동영상의 인코더 및 디코더 구현 이름을 노출합니다. 동영상 프레임이 인코딩 또는 디코딩되기 전에 통계가 쿼리되는 경우에는 더 이상 '알 수 없음' 값을 제공하지 않습니다. 대신 사전 멤버가 생략됩니다.

CSS 속성 -webkit-highlight

텍스트를 강조하기 위한 CSS 속성 -webkit-highlight(표준화되지 않음)를 삭제합니다. 크로뮴에서 눈에 띄는 효과가 없습니다 (파싱되지만 콘텐츠 렌더링에는 사용되지 않음). 이 속성은 2014년에 WebKit에서 삭제되고 MDN에서 지원 중단된 것으로 표시되었으며 최근 CSS Highlight Pseudo 사양으로 대체되었습니다.