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

Chrome 90의 새로운 기능

Pete LePage

다음 사항에 유의하시기 바랍니다.

CSS overflow 속성에 새로운 값이 있습니다.
Feature Policy API의 이름이 권한 정책으로 변경되었습니다.
Shadow DOM을 HTML에서 직접 구현하고 사용할 수 있는 새로운 방법이 있습니다.
1990년대에 이런 식으로 재킷을 여러 개 갖고 다녔습니다.
이 외에도 다양한 기능이 제공됩니다.

제 이름은 피트 르페이지입니다. Chrome 90 개발자 411을 획득했습니다. 1990년대 스타일입니다.

`overflow: clip`로 오버플로 방지

CSS IS AWESOME

CSS가 전부입니다. 하지만 모든 웹 개발자는 어색하게 쏟아지는 일을 목격하고 경험한 적이 있을 것입니다 CSS 도움말에서 overflow: hidden 또는 auto를 사용하는 등 오버플로를 처리하는 다양한 방법에 관한 유용한 게시물이 있습니다.

CSS 오버플로 사양에는 hidden와 비슷하게 작동하는 새로운 clip 속성이 있습니다.

.overflow-clip {
  overflow: clip;
}

overflow: clip를 사용하면 프로그래매틱 스크롤을 포함하여 상자의 모든 유형의 스크롤을 방지할 수 있습니다. 즉, 상자는 스크롤 컨테이너로 간주되지 않으며 새 서식 지정 컨텍스트를 시작하지 않습니다. 필요한 경우 overflow-x 및 overflow-y를 통해 단일 축에 클리핑을 적용할 수 있습니다.

참고로, 클립 테두리를 확장할 수 있는 overflow-clip-margin도 있습니다. 이 기능은 표시되어야 하는 잉크 오버플로가 있는 경우에 유용합니다.

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}

https://petele-css-is-awesome.glitch.me/에서 overflow: clip의 실제 사례를 확인하세요.

기능 정책이 권한 정책으로 변경되었습니다.

Chrome 74에 도입된 Feature Policy API를 사용하면 브라우저에서 특정 API 및 웹 기능의 동작을 선택적으로 사용 설정, 사용 중지, 수정할 수 있습니다. 이러한 정책은 사용자와 브라우저 간의 계약입니다. 사용자의 의도를 브라우저에 알립니다.

코드 또는 사용하는 서드 파티 라이브러리가 미리 선택된 규칙을 위반하면 브라우저는 더 나은 UX로 동작을 재정의하거나 '손으로 말해서'라고 말하여 API를 완전히 차단합니다.

Chrome 90부터 Feature Policy API의 이름이 권한 정책으로 변경되고 HTTP 헤더의 이름이 함께 변경되었습니다. 동시에 커뮤니티는 HTTP의 구조화된 필드 값을 기반으로 새로운 구문을 정했습니다.

Chrome 90 이상

Permissions-Policy: geolocation=()

Chrome 89 이하

Feature-Policy: geolocation 'none'

사이트에서 이 기능을 사용하는 방법은 기능 정책 소개를 참고하세요.

선언적 Shadow DOM

웹 구성요소 표준의 일부인 Shadow DOM은 CSS 스타일의 범위를 특정 DOM 하위 트리로 지정하고 해당 하위 트리를 문서의 나머지 부분에서 격리하는 방법을 제공합니다. 지금까지 Shadow DOM을 사용하는 유일한 방법은 JavaScript를 사용하여 섀도 루트를 구성하는 것이었습니다.

const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;

클라이언트 측 렌더링에서는 잘 작동하지만 서버 생성 HTML에서 그림자 루트를 표현하는 방법이 없는 서버 측 렌더링에서는 잘 작동하지 않습니다. 하지만 Chrome 90부터 선언적 Shadow DOM을 사용하면 됩니다. HTML만 사용하여 섀도우 루트를 만들 수 있습니다.

선언적 그림자 루트는 shadowroot 속성이 있는 <template> 요소입니다. 이는 HTML 파서에 의해 감지되며 즉시 상위 요소의 섀도 루트로 적용됩니다.

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

순수한 HTML 마크업을 로드하면 다음 DOM 트리가 생성됩니다.

<host-element>
  #shadow-root (open)
  <slot>
    ↳
    <h2>Light content</h2>
  </slot>
</host-element>

이를 통해 정적 HTML에서 Shadow DOM 캡슐화와 슬롯 프로젝션의 이점을 활용할 수 있습니다. 그림자 루트를 포함한 전체 트리를 생성하는 데는 JavaScript가 필요하지 않습니다.

자세한 내용은 web.dev에서 선언적 Shadow DOM을 참고하세요.

기타

물론 더 많은 기능이 있습니다.

개인 정보 보호와 HTTPS를 지원하는 사이트를 방문하는 사용자의 로드 속도를 개선하기 위해 Chrome의 주소 표시줄에서 기본적으로 https://를 사용합니다. HTTP에서 HTTPS로 자동 리디렉션을 설정하지 않았다면 지금 설정하는 것이 좋습니다.

또한 AV1 인코더는 WebRTC 통합을 통해 화상 회의에 특별히 최적화된 Chrome 데스크톱에 제공됩니다.

추가 자료

여기에서는 주요 특징 중 일부만 다루었습니다. 아래 링크에서 Chrome 90의 추가 변경사항을 확인하세요.

최신 동영상을 확인하고 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

저는 Pete LePage입니다. Chrome 91이 출시되면 곧 Chrome의 새로운 기능을 알려드리겠습니다.

특별한 감사 인사

1990년대 테마인 이 Chrome의 New 에피소드를 촬영하는 것은 정말 즐거웠습니다. 아이디어를 제안하고 1990년에 타임 워프를 여는 데 도움을 준 멋진 사람들을 한데 모아준 Sean Meehan에게 진심으로 감사드립니다.

GDS 디자인

폴라 아키놀라
데릭 베이스
크리스토퍼 보델
닉 크루식
크리스 워커

사운드 디자인 및 추가 음악

브라이언 고든

물론 Loren Borja, Lee Carruthers, Lukas Holcek은 Chrome의 새로운 동영상을 모두 작업하며 저보다 훨씬 더 보기 좋게 만들어 줍니다. 감사합니다.