必知事項は次のとおりです。
- コンテナクエリと :has() の組み合わせ 対応できる環境が整っています。
- 新しい Sanitizer API は、 任意の文字列を表示して、クロスサイト スクリプティングの脆弱性を軽減できます。
- Google は、Web SQL のサポート終了に向けて新たな一歩を踏み出しています。
- 他にも多くの機能を利用できます。
Pete LePage と申します。それでは詳しく見ていきましょう。 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 のサイズが 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 のサポートを終了
安全でないコンテキストで Web SQL を使用している場合は、IndexDB に移行する必要があります。 または別のローカル ストレージ コンテナにできるだけ早く移行する必要があります。
その他
もちろん、他にもたくさんあります。
- パソコンとモバイルの両方でインストール済みの PWA の名前を更新できるようになりました ウェブアプリ マニフェストを更新します。
- Multi-screen window Placement API は、正確なスクリーン名のラベルを取得します。
- ウィンドウ コントロール オーバーレイ API を使用できるようになりました。これにより 既存のフル幅のタイトルバーを 作成します。これにより、タイトルバー領域にカスタム コンテンツを配置できます。
関連情報
ここでは、主なハイライトの一部のみを取り上げています。以下のリンクを確認してください。 その他の変更が行われます。
- Chrome DevTools の新機能(105)
- Chrome 105 のサポート終了と削除
- ChromeStatus.com のアップデート(Chrome 105)
- Chromium ソース リポジトリの変更リスト
- Chrome リリース カレンダー
登録
最新情報を入手するには、 Chrome Developers YouTube チャンネル 新しい動画が公開されるたびに メールでも通知されます
Chrome 106 のリリースと同時に Chrome の新機能を紹介します