このページは Cloud Translation API によって翻訳されました。

Chrome 90 の新機能

Pete LePage

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

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

私は Pete LePage です。Chrome 90 のデベロッパー向けに 411 を使用しています。1990 年のスタイルを心がけましょう。

`overflow: clip` によるオーバーフローの防止

CSS は非常に優れている

CSS があれば十分です。チップの袋もあります。いろんな問題があっても経験したことはあると思いますがoverflow: hidden や auto の使用など、オーバーフローを処理するさまざまな方法に関する CSS のトリックに関する投稿があります。

CSS オーバーフロー仕様に、hidden と同様に機能する新しい clip プロパティが追加されました。

.overflow-clip {
  overflow: clip;
}

テキスト CSS 付きの正方形のボックスは、素晴らしいテキストが箱から出てくるので、

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

なお、クリップ境界を拡張できる overflow-clip-margin もあります。これは、表示されるはずのインクオーバーフローがある場合に役立ちます。

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

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 を使用すると、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 では問題ありません

宣言型シャドウルートは、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 への自動リダイレクトをまだ設定していない場合は、ここで設定することをおすすめします。

また、WebRTC との統合によりビデオ会議用に最適化された AV1 エンコーダが、パソコン版 Chrome に搭載されています。

特別な呼びかけ

1990 年代をテーマとした「New in Chrome」のエピソードを撮影してとても楽しかったです。1990 年を迎えるにあたり、Sean Meehan のアイデアと優れた協力者に深く感謝します。

GDS の設計

Fola Akinola 氏
Derek Bass 氏
Christopher Bodel 氏
Nick Krusick 氏
クリス・ウォーカー（Chris Walker）氏

サウンドデザインとその他の音楽

Bryan Gordon 氏

もちろん Loren Borja、Lee Carruthers、Lukas Holcek が「New in Chrome」の動画を担当してくれてありがとう