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

Chrome 65의 새로운 기능

Pete LePage

CSS Paint API를 사용하면 이미지를 프로그래매틱 방식으로 생성할 수 있습니다.
Server Timing API를 사용하면 웹 서버가 HTTP 헤더를 통해 성능 타이밍 정보를 제공할 수 있습니다.
새로운 CSS display: contents 속성으로 인해 상자가 사라질 수 있습니다.

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

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

변경사항의 전체 목록을 확인하려면 Chromium 소스 저장소 변경사항 목록을 확인하세요.

CSS 페인트 API

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

이미지를 참조하는 대신 새 페인트 함수를 사용하여 캔버스 요소와 마찬가지로 이미지를 그릴 수 있습니다.

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

예를 들어, 머티리얼 스타일 버튼에 물결 효과를 만들기 위해 DOM 요소를 추가하는 대신 그림 그리기 API를 사용할 수 있습니다.

또한 아직 브라우저에서 지원되지 않는 CSS 기능을 폴리필하는 강력한 방법이기도 합니다.

Surma의 설명에는 여러 데모가 포함된 훌륭한 게시물이 있습니다.

Server Timing API

Navigation and Resource Timing 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가 작성한 Vanishing Box with display content를 참고하세요.

그 외 다양한 기능

이는 개발자를 위한 Chrome 65의 변경사항 중 일부일 뿐이며, 더 많은 사항이 있습니다.

색상 속성의 HSL 및 HSLA, RGB, RGBA 좌표를 지정하는 문법은 이제 CSS 색상 4 사양과 일치합니다.
HTTP 헤더 또는 iframe allow 속성을 통해 동기 XHR을 제어할 수 있는 새로운 기능 정책이 있습니다.

Chrome DevTools의 새로운 기능을 확인하여 Chrome 65 DevTools의 새로운 기능을 알아보세요. 프로그레시브 웹 앱에 관심이 있다면 새로운 PWA 로드쇼 동영상 시리즈를 확인하세요. 그런 다음 YouTube 채널에서 구독 버튼을 클릭하면 새 동영상이 게시될 때마다 이메일 알림을 받게 됩니다.

저는 Pete LePage입니다. Chrome 66이 출시되는 즉시 Chrome의 새로운 기능을 소개해 드리겠습니다.