Chrome 90 の新機能

Pete LePage

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

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

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

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

CSS IS AWESOME

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

CSS オーバーフロー仕様に、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 チャンネルにチャンネル登録してください。新しい動画が公開されるとメール通知が届きます。

Chrome 91 がリリースされたらすぐにお知らせします。 Pete LePage です。

特別な呼びかけ

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 の新機能に関する動画の制作をすべて担当していただき、実際よりもずっとかっこよく見せてもらっています。本当にありがとうございます。