モダンCSSの新機能のブラウザ対応がこれで簡単になる！ Modernizrに代わる新しいスクリプト -SupportsCSS

サイト構築 -CSS

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が対応していない機能にも対応しています。

SupportsCSS

クラスはsupports-[feature]あるいはno-[feature]として、<html>に追加されるため、段階的な拡張とビルド戦略が容易です。
:has()などのセレクタ、text-box-trimなどのプロパティ、相対色構文などの機能、@layerなどの@ルールもSupportsCSSは対応しています。
カスタムテストの追加が可能です。
検出されたサポートを反復処理する結果オブジェクトと、JavaScriptで条件チェックを行うための結果を公開しています。

SupportsCSSのインストール

SupportsCSSは、CDN経由で外部スクリプトとして利用できます。また、スクリプトをダウンロードして利用することもできます。

<script src="https://www.unpkg.com/supports-css@0.1.5"></script>

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は、これらのツールの上にあるレイヤーです。