Chrome 90 の新機能

Pete LePage

必知事項は次のとおりです。

  • CSS の overflow プロパティに新しい値が追加されました。
  • Feature Policy API の名前が Permissions Policy に変更されました。
  • また、HTML で直接 Shadow DOM を実装して使用できる新しい方法もあります。
  • 1990 年代に、これとほぼ同じジャケットを何着か持っていました。
  • 他にもさまざまな機能があります。

Pete LePage と申します。Chrome 90 のデベロッパー向けの411 を、1990 年代スタイルでお届けします。

overflow: clip でオーバーフローを防ぐ

CSS IS AWESOME

CSS は、しかし、ウェブ デベロッパーなら誰でも、ある時点で不自然にオーバーフローする何かを見たことがあると思います。CSS Tricks には、overflow: hidden や auto の使用など、オーバーフローを処理するさまざまな方法に関する優れた投稿があります。

CSS Overflow 仕様には、hidden と同様に機能する新しい clip プロパティがあります。

.overflow-clip {
  overflow: clip;
}
テキスト CSS 付きの正方形のボックスは素晴らしい。すぐに使えるオーバーフロー機能が用意されています

overflow: clip を使用すると、プログラムによるスクロールなど、ボックスのあらゆる種類のスクロールを防ぐことができます。つまり、ボックスはスクロール コンテナと見なされず、新しい書式設定コンテキストを開始しません。必要に応じて、overflow-x と overflow-y を使用して、1 つの軸にクリッピングを適用できます。

overflow-clip-margin もあります。これを使用すると、クリップの境界を拡張できます。これは、インク オーバーフローが表示される必要がある場合に便利です。

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}
テキスト CSS 付きの正方形のボックスは素晴らしい。すぐに使えるオーバーフロー機能が用意されています

overflow: clip の動作については、https://petele-css-is-awesome.glitch.me/ をご覧ください。

機能ポリシーが権限ポリシーに変更されました

Chrome 74 では、Feature Policy API が導入されました。これにより、ブラウザ内の特定の 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 は、Web Components 標準の一部であり、CSS スタイルを特定の DOM サブツリーにスコープし、そのサブツリーをドキュメントの他の部分から分離する方法を提供します。これまで、Shadow DOM を使用する唯一の方法は、JavaScript を使用して Shadow ルートを作成することでした。

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 への自動リダイレクトを設定していない場合は、この機会に設定することをおすすめします。

また、Chrome デスクトップには、WebRTC 統合によるビデオ会議用に最適化された AV1 エンコーダが搭載されています。

関連情報

以下に、主なハイライトをいくつかご紹介します。Chrome 90 のその他の変更については、下記のリンクをご覧ください。

登録

最新の動画情報を受け取るには、Chrome デベロッパーの YouTube チャンネルにチャンネル登録してください。新しい動画が公開されるとメール通知が届きます。

Pete LePage と申します。Chrome 91 がリリースされ次第、Chrome の新機能についてお知らせします。

特別なメッセージ

1990 年代をテーマにした今回の「Chrome の新機能」エピソードの撮影はとても楽しかったです。このアイデアを思いつき、1990 年のタイムワープを実現するために素晴らしい人々を集めてくれた Sean Meehan に心から感謝します。

GDS 設計

  • Fola Akinola
  • Derek Bass
  • Christopher Bodel
  • Nick Krusick
  • Chris Walker

サウンド デザインと追加の音楽

  • Bryan Gordon

そしてもちろん、Loren Borja、Lee Carruthers、Lukas Holcek の 3 人には、Chrome の新機能に関する動画の制作をすべて担当していただき、実際の私よりもずっとかっこよく見せてもらっています。いつもありがとうございます。