【CSS】@supportsでブラウザ対応状況を判別して条件分岐させる方法

2020年12月25日

Web制作をしていると、

最新のCSS機能を使いたいけど、未対応のブラウザがあるせいで使えない…

という経験がある人も多いのではないでしょうか。

特にIEや古いバージョンのブラウザでは、新しめのCSSプロパティがサポートされていないということが頻繁にありますよね。

今回の記事では、ブラウザが特定のCSSプロパティに対応しているかどうかを判別する@supportsの使い方を紹介します！

この機能を使用することで、

対応済みのブラウザにのみ最新のCSSを適用
対応していないブラウザにはフォールバックのコードを適用

というふうに振り分けることができます。

実際に例を見つつ説明していきますので、ぜひ使ってみてください。

@supportsの構文・記述方法

まずは構文から見ていきましょう。

@supports (display: grid) { /* display:gridに対応しているかどうか判別 */
  /* 対応しているブラウザにのみ、このコードが適用される */
  div {
    display: grid;
  }
}

メディアクエリと同じような構文ですね。

この例では、display: gridに対応しているブラウザにのみ、{}内のコードが適用されます。

また、notを足すことで、「〜がサポートされていない場合、{}内のコードを適用する」という書き方もできます。

@supports not (display: grid) { /* display:gridに対応しているかどうか判別 */
  /* 対応していないブラウザにのみ、このコードが適用される */
  div {
    float: right;
  }
}

この場合だと、display: gridがサポートされていないブラウザでは、float: rightを使うという意味になります。

@supportsのブラウザ対応状況

見てのとおり、IE以外のブラウザではほぼ対応されていますね。

IEにはフォールバックのコードを適用させ、モダンブラウザには@supports内のCSSコードを適用させるといった使い方ができます。

@supportsの実際の使い方を解説

ここからは実際に@supportsの使い方を見ていきましょう。

例として、比較的新しめのCSSプロパティmix-blend-modeを使用して進めていきます。

CSSプロパティmix-blend-modeについて

mix-blend-modeは、重なった図形や写真の色を混ぜ合わせることができるプロパティです。

上記の通り、IEやその他一部のブラウザではサポートされていませんね。

対応済みのブラウザ…mix-blend-modeを適用
未対応のブラウザ…フォールバックで対応

というのを実装していきましょう。

手順1. まずは通常通りCSSを書いていく

左が元の画像、右がmix-blend-mode適用後の見た目です。

/* 背景画像のスタイル */
.bg {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url("path/img.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* 画像に被せるオーバーレイのスタイル */
.bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, #ff6e7f 0%, #bfe9ff 100%);
  mix-blend-mode: multiply;
}

上記のコードで、mix-blend-modeが適用されました。

Google Chromeで確認すると、ブレンドモードがきれいに表示されています。

先程の表のとおり、Google Chromeはmix-blend-modeに対応しているので、問題なく使うことができますね。

続いて、mix-blend-modeに対応していないIEでチェックしてみましょう。

このようにmix-blend-modeが効かず、オーバーレイのみが表示されてしまっています。

手順2. @supportsで対応ブラウザにのみmix-blend-modeを適用する

/* 画像に被せるオーバーレイのスタイル */
.bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, #ff6e7f 0%, #bfe9ff 100%);
}

@supports (mix-blend-mode: multiply) {
  .bg::before {
    mix-blend-mode: multiply;
  }
}

上記のようにして、mix-blend-modeを@supportsの中に移動させます。

これで対応ブラウザにのみmix-blend-modeが適用されるようになりました。

しかし、IEではまだこの画面のような状態のままです。

疑似要素のオーバーレイが、画像の上にそのまま乗っかっている状態ですね。

次でIEや未対応のブラウザのためのフォールバックコードを用意していきましょう。

手順3. 未対応のブラウザのためのフォールバックを用意する

.bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* フォールバック */
  background-image: linear-gradient(to bottom, #b10519 0%, #1d5e80 100%);
  opacity: 0.5;
}

@supports (mix-blend-mode: multiply) {
  .bg::before {
    mix-blend-mode: multiply;
    background-image: linear-gradient(to bottom, #ff6e7f 0%, #bfe9ff 100%);
    opacity: 1;
  }
}

未対応のブラウザではmix-blend-modeの代わりに、オーバーレイの色を暗めにして半透明にするというフォールバックを用意しました。

opacityプロパティは全ブラウザに対応しているので、安心して使えますね。