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

Chrome 105 の新機能

Pete LePage

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

コンテナクエリと :has() はレスポンシブです。
新しい Sanitizer API は、任意の文字列を処理する堅牢なプロセッサを提供し、クロスサイトスクリプティングの脆弱性を低減します。
Google は、Web SQL のサポート終了に向けて新たな一歩を踏み出します。
他にもたくさんあります。

ピートルページです。Chrome 105 のデベロッパー向け新機能を見ていきましょう

コンテナクエリと `:has()` CSS プロパティ

特にご要望の多かったコンテナクエリが Chrome 105 で導入されました。これにより、デベロッパーは親セレクタでサイズやスタイルの情報をクエリできるため、ページ上の場所に関係なく、子要素がレスポンシブなスタイル設定のロジックを持つことができます。

ビューポートのサイズではなくコンテナのサイズに対して評価される点を除き、@media クエリと似ています。

コンテナクエリを使用するには、親要素に包含を設定する必要があります。たとえば、画像とテキストを含むカードがあるとします。

2 列の 1 列のカード。

コンテナクエリを作成するには、カードコンテナに container-type を設定します。container-type を inline-size に設定すると、親の inline-direction サイズがクエリされます。

.card-container {
  container-type: inline-size;
}

これで、そのコンテナで @container を使用して任意の子にスタイルを適用できるようになりました。

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

この場合、container が 400px 未満になると、単一列レイアウトに切り替わります。

CSS `:has()` 疑似クラス

CSS の :has() 疑似クラスを使用すると、これをさらに一歩進められます。これにより、親要素に特定のパラメータを持つ子が含まれているかどうかを確認できます。

たとえば、p:has(span) は内部にスパンがある段落セレクタを示します。これを使用して、親段落自体やその中のあらゆるスタイルのスタイルを設定できます。また、figure:has(figcaption) を使用して、字幕を含む図要素のスタイルを設定することも可能です。

p:has(span) {
  /* magic styles */
}

figure:has(figcaption) {
  /* this figure has a figcaption */
}

詳細な説明と楽しいデモについては、Una の記事 @container と :has(): 2 つの強力な新しいレスポンシブ API をご覧ください。

Sanitizer API

ほとんどのウェブアプリでは、信頼できない文字列を扱うことがよくありますが、そのようなコンテンツを安全にレンダリングするのは難しい場合があります。十分に注意しないと、クロスサイトスクリプティングの脆弱性が誤って発生する可能性が高まります。

DomPurify などのライブラリも役立ちますが、メンテナンスの負担が若干増えます。HTML Sanitizer API は、プラットフォームにサニタイズを組み込むことで、クロスサイトスクリプティングの脆弱性を減らすのに役立ちます。

これを使用するには、Sanitizer の新しいインスタンスを作成します。次に、サニタイズされたコンテンツを挿入する要素で setHTML() を呼び出します。

const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });

Sanitizer API は、デフォルトで安全であるように設計されており、カスタマイズが可能です。これにより、特定の要素を削除したり、他の要素を許可したりするなど、さまざまな構成オプションを指定できます。

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);

詳しくは、Sanitizer API を使用した安全な DOM 操作をご覧ください。

セキュアでないコンテキストでの Web SQL のサポート終了

Google は以前、Web SQL のサポートを終了する予定であることを発表しました。Chrome 105 以降、セキュアでないコンテキストでの Web SQL のサポートは終了します。

警告: 現在のところ、このサポート終了は、http:// 経由で Web SQL を使用するサイトにのみ影響します（一部のイントラネットや企業のシナリオなど）。https:// 経由で Web SQL を使用するサイトには影響しません。

セキュアでないコンテキストで Web SQL を使用している場合は、できるだけ早く IndexDB または別のローカルストレージコンテナに移行する必要があります。

など多数

他にもたくさんあります。

ウェブアプリマニフェストを更新することで、パソコンとモバイルの両方でインストール済みの PWA の名前を更新できるようになりました。
Multiscreen Window Placement API は、正確なスクリーン名のラベルを取得します。
ウィンドウコントロールオーバーレイ API が利用できるようになりました。既存の全幅タイトルバーを小さなオーバーレイに切り替えることで、PWA はアプリのような感覚になります。これにより、タイトルバーの領域にカスタムコンテンツを配置できるようになります。

Chrome 105 の新機能

コンテナクエリと :has() CSS プロパティ

CSS :has() 疑似クラス

Sanitizer API

セキュアでないコンテキストでの Web SQL のサポート終了

など多数

関連情報

登録

コンテナクエリと `:has()` CSS プロパティ

CSS `:has()` 疑似クラス