最新のCSS機能を使いたいけど、未対応のブラウザがあるせいで使えない...という経験がある人も多いのではないでしょうか。IEや古いバージョンのブラウザでは、新しめのCSSプロパティがサポートされていないということが頻繁にありますよね。対応していないブラウザにはフォールバックのコードを適用というふうに振り分けることができます。実際に例を見つつ説明していきますので、ぜひ使ってみてください。目次@supportsの構文・記述方法まずは構文から見ていきましょう。}}メディアクエリと同じような構文ですね。gridに対応しているブラウザにのみ、{}内のコードが適用されます。notを足すことで、「〜がサポートされていない場合、{}内のコードを適用する」という書き方もできます。rightを使うという意味になります。見てのとおり、IE以外のブラウザではほぼ対応されていますね。IEにはフォールバックのコードを適用させ、モダンブラウザには@supports内のCSSコードを適用させるといった使い方ができます。@supportsの実際の使い方を解説ここからは実際に@supportsの使い方を見ていきましょう。例として、比較的新しめのCSSプロパティmix-blend-modeを使用して進めていきます。CSSプロパティmix-blend-modeについてmix-blend-modeは、重なった図形や写真の色を混ぜ合わせることができるプロパティです。上記の通り、IEやその他一部のブラウザではサポートされていませんね。未対応のブラウザ...フォールバックで対応というのを実装していきましょう。左が元の画像、右がmix-blend-mode適用後の見た目です。multiply;}上記のコードで、mix-blend-modeが適用されました。Chromeで確認すると、ブレンドモードがきれいに表示されています。Chromeはmix-blend-modeに対応しているので、問題なく使うことができますね。続いて、mix-blend-modeに対応していないIEでチェックしてみましょう。IEで確認した場合このようにmix-blend-modeが効かず、オーバーレイのみが表示されてしまっています。}}上記のようにして、mix-blend-modeを@supportsの中に移動させます。これで対応ブラウザにのみmix-blend-modeが適用されるようになりました。IEではまだこの画面のような状態のままです。疑似要素のオーバーレイが、画像の上にそのまま乗っかっている状態ですね。次でIEや未対応のブラウザのためのフォールバックコードを用意していきましょう。}}未対応のブラウザではmix-blend-modeの代わりに、オーバーレイの色を暗めにして半透明にするというフォールバックを用意しました。opacityプロパティは全ブラウザに対応しているので、安心して使えますね。IEで確認した場合このように、全く同じ見た目ではないですが、IEでもほぼ同じ見た目になりました。Chromeでも確認してみましょう。先ほどと全く同じのままで、mix-blend-modeが適用されていますね。未対応ブラウザではフォールバックを適用ということができました。【まとめ】@supportsで対応済みのブラウザには最新のCSS、それ以外はフォールバックを適用させる方法@supportsを使って、ブラウザの対応状況に応じて条件分岐させる方法を紹介しました。CSSを通常どおり書く最新のCSS機能には@supportsを使用する未対応のブラウザのためのフォールバックを用意するこれらの手順で、モダンブラウザには最新のCSS機能、それ以外は代替策を使うことができるようになります。Firefoxなどのモダンブラウザが圧倒的に多いため、最新のCSSを使いたいですよね。案件によってはIEやマイナーなブラウザにも対応させる必要があるので、そういう場面にはすごく使える機能です。IEのみを指定してスタイルを指定する方法も紹介してますので、よければ目を通してみてください。Explorerに対応しなければいけない案件が多いですね。IEでは未対応のCSSプロパティがあったり、表示が崩れたりといった問題がよ...記事が役に立ったらサポートしてくださいWeb制作に関する記事案を募集中!Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。要望が多かったものは解説記事を作成します。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。scale()で要素を上下・左右に反転させる方法CSS【レスポンシブ対応】padding-topで要素の比率を保持しつつサイズを可変させる方法CSS起弥フロントエンドエンジニア兵庫県出身のフリーランスフロントエンドエンジニアです。Web制作を通して気づいたこと、学んだことを発信していきます。当サイトに関する質問はこちら»ポートフォリオサイトWeb制作のポートフォリオサイトです。Web制作の実績等はこちらから確認いただけます。Note」を新設しました2022年4月16日パートナーとして一緒に仕事してくださるデザイナー様を募集中です2021年8月5日GatsbyJSでポートフォリオサイトをリニューアルしました。(2)コーディング代行「CodeHive」コーディング代行チーム「コードハイブ」を立ち上げました。