이 페이지는 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 텍스트 줄바꿈: pretty

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() 메서드는 지정된 맞춤 요소 정의의 태그 이름을 반환합니다.

반복자 도우미

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

CaptureController가 EventTarget 인터페이스에서 파생되도록 함

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이 출력됩니다.

비공개 상태 토큰 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 주소는 항상 네 부분으로 구성되어야 합니다.
http://[::1.2]과 같이 부분이 4개 미만인 주소는 더 이상 유효하지 않습니다. 이 기능은 URL 상호 운용성 2023의 일부입니다.

URL: '%00' 허용 을 유효한 URL 경로로 사용하세요.

URL의 경로 부분에 '%00'이 포함된 경우 현재 Chrome은 잘못된 URL로 간주합니다. (또는 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의 프레임당 양자기

'퀀타이저'를 추가합니다. VideoEncoderBitrateMode: VideoEncoder 이 API는 AV1, VP9 및 AVC 동영상 코덱의 각 프레임에 대한 양자기 매개변수를 지정할 수 있는 기능을 제공합니다.

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

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

오리진 트라이얼 진행 중

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

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

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

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

WebSQL 지원 중단 기능 트라이얼

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

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

탭으로 구분된 웹 앱

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

Tabbed Web Apps 오리진 트라이얼에 등록합니다.

지원 중단 및 삭제

이 버전의 Chrome에는 다음과 같은 지원 중단 및 삭제 기능이 도입되었습니다. 예정된 지원 중단, 현재 지원 중단 및 이전에 이루어진 삭제 목록을 보려면 ChromeStatus.com을 방문하세요.

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

unload 이벤트 지원 중단

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

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

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

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

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

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

이전에 대한 자세한 내용 및 시간이 더 필요한 경우 수행할 작업에 대한 자세한 내용은 기존 getStats() 이전 가이드를 참고하세요.

WebRTC getStats datachannelIdentifier의 -1 값 삭제

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

WebRTC getStats encoderImplementation 및 decoderImplementation '알 수 없음' 삭제

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

CSS 속성 -webkit-highlight

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