【CSS Modules】@supportsアットルールの使い方

@supports関数は、Webブラウザが特定のCSS機能に対応しているかどうかを判別し、その結果に基づいてスタイルを適用する機能を提供するCSSのat-ruleです。この規則は、主に新しいCSSプロパティや値の組み合わせを安全に使用するために利用されます。

具体的な使い方としては、@supports (display: grid) のように、検証したいCSSのプロパティと値を括弧で囲んで条件として記述します。もしWebブラウザがこの条件の機能に対応している場合のみ、@supportsブロック内に記述されたCSSスタイルが実際に適用されます。これにより、最新のCSS技術を導入する際に、それらをサポートしない古いブラウザに対しては別の基本的なスタイルを適用するといった、いわゆるプログレッシブエンハンスメント（段階的機能強化）の実装が可能になります。

複数の条件を組み合わせることも可能です。例えば、and（かつ）、or（または）、not（でない）といった論理演算子を使用して、より複雑な対応状況のチェックを行えます。これにより、複数のCSSプロパティのサポート状況を同時に確認したり、特定の機能がサポートされていない場合にのみスタイルを適用したりすることが可能になります。

@supportsは、ブラウザ間の互換性の問題を吸収し、Webサイトの安定性とメンテナンス性を高める上で非常に強力なツールです。システムエンジニアを目指す方々にとって、将来を見据えたWebデザインと開発において、このat-ruleの理解と活用は不可欠な知識となるでしょう。

Copy
1@supports (display: grid) {
2  .grid-container {
3    display: grid;
4    grid-template-columns: 1fr 1fr;
5  }
6}
7
8@supports not (mix-blend-mode: multiply) {
9  .hero-image {
10    background-color: #f0f0f0;
11  }
12}
13
14@supports (display: flex) and (flex-wrap: wrap) {
15  .flex-items {
16    display: flex;
17    flex-wrap: wrap;
18  }
19}

引数なし

引数はありません

戻り値なし

戻り値はありません