Chrome 90의 새로운 기능

Pete LePage

참고: Chrome 90이 안정화 버전에 출시되기 시작했으며 Chrome 90을 기념하여 동영상이 90년대 스타일로 제작되었습니다. 그럼 즐거운 시간 보내세요.

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

• CSS overflow 속성에 새로운 값이 있습니다.
• Feature Policy API의 이름이 Permissions Policy로 변경되었습니다.
• 또한 HTML에서 직접 Shadow DOM을 구현하고 사용하는 새로운 방법이 있습니다.
• 1990년대에 이와 거의 똑같은 재킷을 여러 개 가지고 있었습니다.
• 이 외에도 다양한 기능이 있습니다.

저는 피트 르페이지입니다. Chrome 90의 개발자를 위한 정보를 가지고 있습니다. 1990년대 스타일로 진행하겠습니다.

overflow: clip로 오버플로 방지

CSS IS AWESOME

CSS는 전부 다 가진 분이시군요! 하지만 모든 웹 개발자는 어느 시점에서 불편하게 넘쳐나는 것을 보고 경험해 보았을 것입니다. CSS Tricks에 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에서는 브라우저에서 특정 API 및 웹 기능의 동작을 선택적으로 사용 설정, 사용 중지, 수정할 수 있는 Feature Policy API를 도입했습니다. 이러한 정책은 사용자와 브라우저 간의 계약입니다. 브라우저에 사용자의 의도를 알립니다.

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

Chrome 90부터 Feature Policy API의 이름이 Permissions Policy로 변경되고 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에서 Shadow Roots를 표현하는 기본 제공 방법이 없는 서버 측 렌더링에서는 잘 작동하지 않습니다. 하지만 Chrome 90부터는 선언적 Shadow DOM을 사용하면 됩니다. HTML만 사용하여 섀도우 루트를 만들 수 있습니다.

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

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

다음 DOM 트리에 순수 HTML 마크업을 로드하면 됩니다.

<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로의 자동 리디렉션을 설정하지 않았다면 지금이 설정하기 좋은 시기입니다.

Chrome 데스크톱에 제공되는 AV1 인코더는 WebRTC 통합을 통해 화상 회의에 특별히 최적화된 솔루션입니다.

추가 자료

여기에는 주요 내용 중 일부만 다룹니다. Chrome 90의 추가 변경사항은 아래 링크를 확인하세요.

• Chrome DevTools의 새로운 기능 (90)
• Chrome 90 지원 중단 및 삭제
• Chrome 90의 ChromeStatus.com 업데이트
• Chrome 90 자바스크립트의 새로운 기능
• Chromium 소스 저장소 변경사항 목록

구독

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

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

특별히

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

GDS 설계

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

사운드 디자인 및 추가 음악

• 브라이언 고든

물론 저의 새로운 Chrome 동영상 작업을 모두 담당하고 있는 Loren Borja, Lee Carruthers, Lukas Holcek도 저보다 훨씬 더 잘 보이게 해주셨습니다. 감사합니다.