こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
最近ではCSSもかなり進化して、「えっ、JavaScript使わなくてもこれできちゃうの？」なんて驚くことも増えてきましたよね。
でも、そんな便利な新機能にもひとつ大きな課題があります。
それは「すべてのブラウザが同じように対応しているわけではない」という点です。
そこで今回のテーマは、CSSの中で使えるちょっと便利な構文
@supports を使って、
「このプロパティが使えるならこうしよう」「使えないなら代わりにこれ！」というふうに、スマートにスタイルを切り替えるテクニックをご紹介します。
@supports ってなに？
CSSの @supports は、指定したプロパティがその環境（ブラウザ）でサポートされているかどうかをチェックする条件文です。
いわば、CSS版の「if文」みたいなものですね。
基本的な構文はこんな感じです。
@supports (display: grid) {
.container {
display: grid;
}
}
上記の例では、「もし display: grid が使えるブラウザなら、.container に対して grid を使おうね」という内容です。
逆に not を使って「この機能が使えないなら…」というネガティブ条件も指定できます。
@supports not (display: grid) {
.container {
display: flex;
}
}
なぜ @supports を使うべきなの？
最近のCSSは便利な機能が増えた一方、古いブラウザではまだ未対応のプロパティもあります。
そんなときに @supports を活用すると、以下のようなメリットがあります。
- 見た目が崩れにくい（対応してない環境でも代替スタイルで表示）
- JavaScriptに頼らずCSSだけで処理できる
- 将来のCSS更新にも柔軟に対応できる
つまり、モダンなデザインを実現しながら、対応していない環境もケアできる。
それが @supports の魅力なんです。
具体例で使い方をイメージしよう
それでは、実際のユースケースをいくつか見てみましょう。
- clamp() が使えないときのフォントサイズの代替指定
@supports (font-size: clamp(1rem, 2vw, 2rem)) { h1 { font-size: clamp(1rem, 2vw, 2rem); } } @supports not (font-size: clamp(1rem, 2vw, 2rem)) { h1 { font-size: 1.5rem; } } - backdrop-filter を使ったガラス風エフェクトのフォールバック
@supports (backdrop-filter: blur(10px)) { .overlay { backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.2); } } @supports not (backdrop-filter: blur(10px)) { .overlay { background-color: rgba(255, 255, 255, 0.8); } }
どちらも「モダンなブラウザにはリッチな見た目を提供」しながら、
「未対応ブラウザには劣化版のデザインを提供」する形です。
こうすれば、どの環境でも崩れない、安心の設計ができますよ。
よくある注意点とベストプラクティス
@supports を使ううえで知っておきたいポイントもあります。
- プロパティ単位ではなく「プロパティ＋値」で書く（例：`(display: grid)`）
- 構文ミスすると、条件ごと無視されてしまう
- 複雑な条件は `(A) and (B)` や `or` を使って制御可能
例えば以下のように複数条件を組み合わせて書くことも可能です。
@supports (display: grid) and (gap: 1rem) {
.grid-layout {
display: grid;
gap: 1rem;
}
}
まとめ
CSSの @supports は、モダンな機能を取り入れつつ、互換性の問題にもスマートに対応できる優秀なツールです！
ちょっとした書き方の工夫で、あなたのWebサイトがもっと安定し、ユーザーに優しいものになります。
これからどんどん進化していくCSSの世界でも、こういった「状況に応じた最適化」を意識することで、あなたのコードも一歩プロフェッショナルに近づいていきます!
ぜひ、今後の案件や自分の制作に @supports を活用してみてくださいね。