Chrome 65의 새로운 기능

  • 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 기능을 폴리필하는 강력한 방법이기도 합니다.

수르마는 설명 자료에 여러 데모가 포함된 유용한 게시물을 올렸습니다.

Server Timing API

탐색 및 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를 사용하면 Flex 컨테이너의 직계 하위 요소만 Flex 항목이 됩니다.

그러나 하위 요소에 display: contents을 적용하면 하위 요소가 가변 항목이 되고 상위 요소에 적용될 것과 동일한 규칙을 사용하여 배치됩니다.

자세한 내용과 기타 예는 레이첼 앤드류의 유용한 게시물인 디스플레이 콘텐츠가 포함된 해체 상자를 참고하세요.

그 외에도 다양한 기능 제공

개발자를 위한 Chrome 65의 몇 가지 변경사항은 물론 이 외에도 많은 변경사항이 있습니다.

  • 색상 속성의 HSLHSLA, RGBRGBA 좌표를 지정하는 문법이 이제 CSS 색상 4 사양일치합니다.
  • HTTP 헤더 또는 iframe allow 속성을 통해 동기 XHR을 제어할 수 있는 새로운 기능 정책이 추가되었습니다.

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

저는 Pete LePage입니다. Chrome 66이 출시되면 바로 이곳에서 Chrome의 새로운 기능을 알려드리겠습니다.