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

Chrome 105 の新機能

Pete LePage

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

コンテナクエリと :has() の組み合わせ対応できる環境が整っています。
新しい Sanitizer API は、任意の文字列を表示して、クロスサイトスクリプティングの脆弱性を軽減できます。
Google は、Web SQL のサポート終了に向けて新たな一歩を踏み出しています。
他にも多くの機能を利用できます。

Pete LePage と申します。それでは詳しく見ていきましょう。 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 のサイズが 400 ピクセル未満の場合は、使用します。

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 はセキュアでないコンテキストでの Web SQL のサポートを終了

警告: 現在、このサポート終了の影響を受けるのは、 http://（イントラネットや企業のシナリオなど）。動作 https:// を介して Web SQL を使用するサイトには影響しません。

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

その他

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

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

Chrome 105 の新機能

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

CSS :has() 疑似クラス

Sanitizer API

安全でないコンテキストでの Web SQL のサポートを終了

その他

関連情報

登録

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

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