必知事項は次のとおりです。
- CSS
overflow
プロパティに新しい値があります。 - Feature Policy API の名称が権限ポリシーに変更されました。
- また、Shadow DOM を HTML で直接実装して使用する新しい方法があります。
- 1990 年代に、こんなジャケットを何個か持っていました。
- 他にも多くの機能があります。
私は Pete LePage です。Chrome 90 のデベロッパー向けに 411 を使用しています。1990 年のスタイルを心がけましょう。
overflow: clip
によるオーバーフローの防止
CSS があれば十分です。チップの袋もあります。いろんな問題があっても
経験したことはあると思いますがoverflow: hidden
や auto
の使用など、オーバーフローを処理するさまざまな方法に関する CSS のトリックに関する投稿があります。
CSS オーバーフロー仕様に、hidden
と同様に機能する新しい clip
プロパティが追加されました。
.overflow-clip { overflow: clip; }
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 に搭載されています。
関連情報
ここでは、重要なハイライトの一部についてのみ説明します。Chrome 90 で追加される変更点については、以下のリンクをご覧ください。
- Chrome DevTools の新機能(90)
- Chrome 90 のサポート終了と削除
- ChromeStatus.com の更新(Chrome 90)
- JavaScript の新機能(Chrome 90)
- Chromium ソース リポジトリの変更リスト
登録
最新の動画をご覧になりたい場合は、Chrome Developers YouTube チャンネルにご登録ください。新しい動画が公開されるたびに、メール通知が届きます。
Chrome 91 のリリースと同時に 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」の動画を担当してくれて ありがとう