モダンCSSの新機能のブラウザ対応がこれで簡単になる！ Modernizrに代わる新しいスクリプト -SupportsCSS
Post on:2023年7月25日
sponsors
2023年もCSSの新しい機能が続々とリリースされ、進化が早いですね。魅力的な新機能を使用するときに気になるのが、ブラウザのサポートです。
ブラウザがその機能をサポートしているかチェックし、判別するクラスを付与してくれるといえば、Modernizrですが、その更新はストップしています。
そんなModernizrに代わる、モダンCSSに対応したスクリプト、SupportsCSSを紹介します。@containerも@layerも:has()もsubgridもcolor-mix()にも対応しています。
SupportsCSS
SupportsCSS -GitHub
SupportsCSSはModernizrにインスパイアされたスクリプトで、モダンCSSに使用されるセレクタ・機能・@ルールなどのサポートをライブ検出できます。
CSSの@supportsもサポートしている機能を検出できますが、SupportsCSSは@supportsが対応していない機能にも対応しています。
- クラスは
supports-[feature]あるいはno-[feature]として、<html>に追加されるため、段階的な拡張とビルド戦略が容易です。 :has()などのセレクタ、text-box-trimなどのプロパティ、相対色構文などの機能、@layerなどの@ルールもSupportsCSSは対応しています。- カスタムテストの追加が可能です。
- 検出されたサポートを反復処理する結果オブジェクトと、JavaScriptで条件チェックを行うための結果を公開しています。
SupportsCSSのインストール
SupportsCSSは、CDN経由で外部スクリプトとして利用できます。また、スクリプトをダウンロードして利用することもできます。
|
1 |
<script src="https://www.unpkg.com/supports-css@0.1.5"></script> |
SupportsCSSをいつ使用するのか
CSSの@supportsはCSS自体のサポートを検出するために存在しますが、@containerや@layerなどに対応していません。また、@supportsは部分的な実装をテストすることもできません。さらに、SupportsCSSによるクラスを使用するとセレクタの作成が簡単になります。
SupportsCSSによるクラスで、@supportsブロック内で使用する正しいセレクタの組み合わせを推測してテストする必要もなくなります。JavaScriptで簡単にアクセスできるように作成されたコレクション（後述）もあります。
一つだけ注意点があります。SupportsCSSはポリフィルではなく、機能を検出するだけです。PostCSSやLightningCSSなどのツールを使用して、プレフィックスや構文の引き下げなどの機能を使用します。SupportsCSSは、これらのツールの上にあるレイヤーです。
テストスイート
SupportsCSSで検出した機能のクラスは<html>に追加され、スタイルシート内でセレクタを変更するために使用できます。
.supports-[feature]: サポート対象です。.no-[feature]: 未サポートです。
キャプチャはSafari 16.5.2で、サポート状況はSafariに基づいています。
テストスイート
sponsors
