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

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適用後

左が元の画像、右が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で確認した場合

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

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

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プロパティは全ブラウザに対応しているので、安心して使えますね。

IEで確認した場合

このように、全く同じ見た目ではないですが、IEでもほぼ同じ見た目になりました。

Google Chromeでも確認してみましょう。

Google Chromeで確認した場合

先ほどと全く同じのままで、mix-blend-modeが適用されていますね。

これらの手順で、

  • 対応ブラウザでは最新のCSSプロパティmix-blend-modeを適用
  • 未対応ブラウザではフォールバックを適用

ということができました。

【まとめ】@supportsで対応済みのブラウザには最新のCSS、それ以外はフォールバックを適用させる方法

@supportsを使って、ブラウザの対応状況に応じて条件分岐させる方法を紹介しました。

  1. CSSを通常どおり書く
  2. 最新のCSS機能には@supportsを使用する
  3. 未対応のブラウザのためのフォールバックを用意する

これらの手順で、モダンブラウザには最新のCSS機能、それ以外は代替策を使うことができるようになります。

実際ブラウザのシェアはGoogle Chrome, Safari, Firefoxなどのモダンブラウザが圧倒的に多いため、最新のCSSを使いたいですよね。

しかし案件によってはIEやマイナーなブラウザにも対応させる必要があるので、そういう場面にはすごく使える機能です。

IEのみを指定してスタイルを指定する方法も紹介してますので、よければ目を通してみてください。

Web制作に関する
記事案を募集中!

Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。
要望が多かったものは解説記事を作成します。

よかったらシェアしてね!

コメント

コメントする

目次
閉じる