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

Chrome 65의 새로운 기능

Pete LePage

CSS Paint API를 사용하면 CSS Paint API를 사용하여 이미지를 생성할 수 있습니다
Server Timing API를 사용하면 웹 서버가 성능 타이밍 정보를 얻을 수 있습니다.
새로운 CSS display: contents 속성을 사용하면 사라지죠.

이 외에도 더 많은 기능이 있습니다.

저는 피트 르페이지입니다. 자세히 살펴보고 Chrome 65의 개발자를 위한 새로운 기능을 살펴보겠습니다.

변경사항의 전체 목록을 확인하려면 자세한 내용은 Chromium 소스 저장소 변경 목록

CSS 페인트 API

CSS Paint API를 사용하면 다음 작업을 할 수 있습니다. background-image와 같은 CSS 속성의 이미지를 프로그래매틱 방식으로 생성 또는 border-image.

이미지를 참조하는 대신 새 페인트 함수를 사용하여 캔버스 요소처럼 이미지를 그립니다.

<style>
  .myElem { background-image: paint(checkerboard); }
</style>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

예를 들어 페이지에 DOM 요소를 추가하는 대신 파급 효과를 만들어 머티리얼 스타일 버튼에 대한 페인트 API를 사용할 수 있습니다.

또한 지원되지 않는 CSS 기능을 폴리필하는 강력한 방법이기도 합니다. 할 수 없습니다.

Surma의 게시물은 데모 설명에서 확인할 수 있습니다.

Server Timing API

탐색 및 리소스 타이밍 API를 사용하여 실제 사용자를 위한 사이트 실적입니다. 지금까지는 서버가 성능 타이밍을 보고할 수 있는 방법을 제공합니다.

새로운 Server Timing API를 사용하면 타이밍 정보를 브라우저에 전달하도록 합니다. 더 잘 이해할 수 있고 확인할 수 있습니다

데이터베이스 읽기 시간, 시작 시간, 시작 시간 등 원하는 만큼 많은 측정항목을 추적할 수 있습니다. Server-Timing 헤더를 추가하여 응답:

'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'

Chrome DevTools에 표시되거나 응답에서 가져올 수 있습니다. 다른 실적 분석과 함께 저장할 수 있습니다.

`display: contents`

새로운 CSS display: contents 속성은 꽤 세련됩니다.

컨테이너 요소에 추가되면 모든 하위 요소가 DOM에서 대신 기본적으로 사라집니다. div가 두 개 있다고 가정해 보겠습니다. 하나는 있습니다. 외부 div에는 빨간색 테두리와 회색 배경이 있으며 너비를 설정했습니다. 200픽셀로 설정할 수 있습니다 안쪽 div에는 파란색 테두리와 연한 파란색 배경이 있습니다.

.disp-contents-outer {
  border: 2px solid red;
  background-color: #ccc;
  padding: 10px;
  width: 200px;
}
.disp-contents-inner {
  border: 2px solid blue;
  background-color: lightblue;
  padding: 10px;
}

기본적으로 내부 div는 외부 div에 포함됩니다.

내가 바로 내면 <div>

외부 div에 display: contents를 추가하면 외부 div가 사라집니다. 제약 조건이 더 이상 내부 div에 적용되지 않습니다. 내부 이제 div의 너비가 100% 입니다.

DevTools를 사용하여 DOM을 검사하면 외부 div가 여전히 존재하는 것을 확인할 수 있습니다.

유용할 수 있는 사례가 많지만 가장 일반적인 이유는 Flexbox입니다 Flexbox를 사용하면 가변형 컨테이너의 직계 하위 요소만 가변 항목이 됩니다.

그러나 하위 요소에 display: contents를 적용하면 하위 요소가 유연해집니다. 이전에 적용했던 것과 동일한 규칙을 사용하여 액세스할 수 있습니다

Rachel Andrew의 멋진 게시물을 확인해 보세요. 디스플레이 내용물이 담긴 상자 정리 를 참조하세요.

그 외에도 다양한 기능 제공

이러한 것들은 개발자를 위한 Chrome 65의 일부 변경사항일 뿐입니다. 더 많은 것이 있습니다.

HSL 및 HSLA, RGB, RGBA 좌표를 지정하기 위한 문법 를 다음과 일치: CSS 색상 4 사양.
새 기능 정책에서는 HTTP 헤더 또는 iframe allow 속성

Chrome DevTools의 새로운 기능, 을 읽고 Chrome 65 DevTools의 새로운 기능을 알아보세요. 또한 데이터 애널리스트의 프로그레시브 웹 앱의 새로운 기능 PWA 로드쇼 동영상 시리즈 YouTube 채널 페이지에서 구독 버튼을 클릭하세요. YouTube 채널 새 동영상이 게시될 때마다 이메일 알림을 받게 됩니다.

저는 피트 르페이지입니다. Chrome 66이 출시되자마자 Chrome의 새로운 기능을 소개해 드리겠습니다.