必知事項は次のとおりです。
- コンテナクエリと :has() はレスポンシブです。
- 新しい Sanitizer API は、任意の文字列を処理する堅牢なプロセッサを提供し、クロスサイト スクリプティングの脆弱性を低減します。
- Google は、Web SQL のサポート終了に向けて新たな一歩を踏み出します。
- 他にもたくさんあります。
ピート ルページです。Chrome 105 のデベロッパー向け新機能を 見ていきましょう
コンテナクエリと :has()
CSS プロパティ
特にご要望の多かったコンテナクエリが Chrome 105 で導入されました。これにより、デベロッパーは親セレクタでサイズやスタイルの情報をクエリできるため、ページ上の場所に関係なく、子要素がレスポンシブなスタイル設定のロジックを持つことができます。
ビューポートのサイズではなくコンテナのサイズに対して評価される点を除き、@media クエリと似ています。
コンテナクエリを使用するには、親要素に包含を設定する必要があります。たとえば、画像とテキストを含むカードがあるとします。
コンテナクエリを作成するには、カードコンテナに 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 のサポートは終了します。
セキュアでないコンテキストで Web SQL を使用している場合は、できるだけ早く IndexDB または別のローカル ストレージ コンテナに移行する必要があります。
など多数
他にもたくさんあります。
- ウェブアプリ マニフェストを更新することで、パソコンとモバイルの両方でインストール済みの PWA の名前を更新できるようになりました。
- Multiscreen Window Placement API は、正確なスクリーン名のラベルを取得します。
- ウィンドウ コントロール オーバーレイ API が利用できるようになりました。既存の全幅タイトルバーを小さなオーバーレイに切り替えることで、PWA はアプリのような感覚になります。これにより、タイトルバーの領域にカスタム コンテンツを配置できるようになります。
関連情報
ここでは、重要なハイライトの一部についてのみ説明します。Chrome 105 で追加される変更については、以下のリンクをご覧ください。
- Chrome DevTools の新機能(105)
- Chrome 105 のサポート終了と削除
- ChromeStatus.com の更新(Chrome 105)
- Chromium ソース リポジトリの変更リスト
- Chrome リリース カレンダー
登録
最新情報を入手するには、Chrome Developers YouTube チャンネルに登録してください。新しい動画が公開されるたびに、メール通知が届きます。
Chrome 106 のリリースと同時に Chrome の最新情報をお伝えします