CSS @supports で対応ブラウザを見極め！スマートなCSS制御の方法とは？

こんにちは！静岡県浜松市で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 を活用すると、以下のようなメリットがあります。

つまり、モダンなデザインを実現しながら、対応していない環境もケアできる。
それが @supports の魅力なんです。

具体例で使い方をイメージしよう

それでは、実際のユースケースをいくつか見てみましょう。

どちらも「モダンなブラウザにはリッチな見た目を提供」しながら、
「未対応ブラウザには劣化版のデザインを提供」する形です。

こうすれば、どの環境でも崩れない、安心の設計ができますよ。

よくある注意点とベストプラクティス

@supports を使ううえで知っておきたいポイントもあります。

例えば以下のように複数条件を組み合わせて書くことも可能です。

@supports (display: grid) and (gap: 1rem) {
  .grid-layout {
    display: grid;
    gap: 1rem;
  }
}

まとめ

CSSの @supports は、モダンな機能を取り入れつつ、互換性の問題にもスマートに対応できる優秀なツールです！
ちょっとした書き方の工夫で、あなたのWebサイトがもっと安定し、ユーザーに優しいものになります。

これからどんどん進化していくCSSの世界でも、こういった「状況に応じた最適化」を意識することで、あなたのコードも一歩プロフェッショナルに近づいていきます!

ぜひ、今後の案件や自分の制作に @supports を活用してみてくださいね。

satokotadesignキャンペーン実施中！