2022 年 8 月に Stable 版とベータ版のウェブブラウザに導入された興味深い機能をいくつかご紹介します。
安定版ブラウザのリリース
8 月に Firefox 104、Chrome 104、Chrome 105 が安定版になりました。
個々の変換
Chrome 104 には、CSS 変換の個々のプロパティが含まれています。プロパティは、scale、rotate、translate です。これらのプロパティを使用して、変換のこれらの部分を個別に定義できます。
これにより、Chrome はこれらのプロパティをすでにサポートしている Firefox と Safari に統合されます。
新しいメディアクエリの構文
Chrome 104 には、メディアクエリの範囲構文も含まれています。この API はすでに Firefox に搭載されており、メディアクエリを効率化します。たとえば、次のメディアクエリがあるとします。
@media (min-width: 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
比較演算子を使用して次のように記述できます。
@media (width >= 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
コンテナクエリ
Chrome 105 は、待望のコンテナクエリ機能をウェブ プラットフォームに導入するエキサイティングなリリースです。メディアクエリではビューポートのサイズをクエリできるのに対し、コンテナクエリではコンテナのサイズでクエリを実行できます。
コンテナクエリを使用するには、container-type プロパティを使用してコンテインメントを有効にします。
.card-container {
container-type: inline-size;
}
container-type を inline-size に設定すると、親のインライン方向のサイズがクエリされます。英語などのラテン語の言語では、テキストは左から右にインラインで表示されるため、これはカードの幅になります。
これで、そのコンテナで @container を使用して、任意の子にスタイルを適用できるようになりました。
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
コンテナクエリについて詳しくは、@container と :has(): Chromium 105 でリリースされた 2 つの強力な新しいレスポンシブ API の投稿をご覧ください。
:has() 親疑似クラス
上記の投稿には :has() もあります。この新しい疑似クラス CSS :has() 疑似クラスを使用すると、条件に基づいて親要素と兄弟要素をターゲットにできます。詳しくは、:has() ファミリー セレクタをご覧ください。
Sanitizer API
Chrome 105 には Sanitizer API もあります。この API はプラットフォームにサニタイズを組み込んで、クロスサイト スクリプティングの脆弱性を取り除きます。
また、Chrome 105 には :modal CSS 疑似クラスがあります。これは、その外部にある要素とのインタラクションがすべて除外されている状態の要素と一致します。たとえば、showModal() API で開いた <dialog> です。
findLast() メソッドと findLastIndex() メソッド
Firefox 104 では、Array.prototype.findLast()、Array.prototype.findLastIndex()、TypedArray.prototype.findLast()、TypedArray.prototype.findLastIndex() の各メソッドに対するサポートが追加されました。これらは、配列または TypedArray の関数の最後の要素の値とインデックス（それぞれ）を見つけるために使用されます。
ベータ版ブラウザのリリース
ベータ版ブラウザのバージョンでは、次の安定バージョンのブラウザのプレビュー機能が提供されます。この機会に、自分のサイトがリリースされる前に新しい機能や削除をテストすることをおすすめします。
リリース日が月に入りにくいため、8 月にリリースされた新しいベータ版は Firefox 105 のみで、現時点では詳細が発表されていません。
6 月にお知らせした Safari 16 のベータ版も現在も進行中です。