CSSだけでスタイルクエリのサポートを確認する方法、Safari 18のバグを回避する方法も
Post on:2024年11月6日
sponsors
スタイルクエリとは、親要素のスタイルに応じて子要素のスタイルを適用するCSSの機能です。たとえば、カードのコンテナがあり、カードによってラベルやボタンのスタイルを変更したい場合などに便利です。
このスタイルクエリがブラウザにサポートされているかをCSSだけで確認するテクニックを紹介します。
Feature detect Style Queries Support in CSS
by Bramus!
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
はじめに
先日、XでAdam Wathanが（カスタムプロパティの）スタイルクエリを確認する方法を尋ねていました。理論的には@supports at-rule()を使用すればよいのですが、実際にはブラウザのサポートがないため使用できません。
@starting-styleのサポートを検出する方法からヒントを得て、スタイルクエリのサポートを確認する方法が分かったので、解説します。
スタイルクエリについて詳しくは、下記をご覧ください。
CSSの進化が早い！ スタイルクエリ（@container style()）の基礎知識と便利な使い方を解説
スタイルクエリのサポートを確認するCSS
すぐにCSSのコードが知りたい人は、下記をご覧ください。
|
1 2 3 4 5 6 7 8 9 |
html { --sentinel: 1; } @container style(--sentinel: 1) { body { --supported: ; /* スペーストグル */ } } |
これにより、コード内で使用できるスペーストグルが提供されます。
このCSSの仕組み
このCSSは、スタイルクエリを使用することで機能します。ルート要素に--sentinelプロパティを設定し、body要素にスタイルクエリを使用してそれに応答させ、--supportedカスタムプロパティを宣言しようとします。
スタイルクエリがサポートされているブラウザでは、--supportedは空の値になります。サポートされていないブラウザでは、--supportedは無効な値（初期値）、スペーストグルになります。
この仕組みは、CSSのさまざまな場所で使用できます。
|
1 2 3 4 5 |
body { --bg-if-support: var(--supported) green; --bg-if-no-support: var(--supported, red); background: var(--bg-if-support, var(--bg-if-no-support)); } |
デモ
実際の動作は、デモページでご覧ください。
See the Pen
Feature Detect Style Queries (1/2) by coliss (@coliss)
on CodePen.
Safari 18のバグを回避する方法
Safari 18では（カスタムプロパティの）スタイルクエリがサポートされていますが、上記のデモは期待どおりに動作しません。
原因は、Safari 18でルート要素をコンテナにできないというバグです。
参考: Bug 271040 - Styled container query does not work on body tag
このバグを回避するには、DOMツリーのレベルを1つ下げる必要があります。
|
1 2 3 4 5 6 7 8 9 |
body { --sentinel: 1; } @container style(--sentinel: 1) { body > * { --supported: ; /* Space Toggle */ } } |
つまり、--supportedを使用してbody要素自体を条件付きでスタイルできませんが、そういったユースケースはかなり限られていると思います。
Safari 18でも期待どおりに動作するデモをご覧ください。
See the Pen
Feature Detect Style Queries (2/2) by coliss (@coliss)
on CodePen.
sponsors
