最近使いたいCSSの新しいプロパティが増えてきた！サポートしていないブラウザへの対応方法を解説

Post on:2021年3月11日

はじめに

CSSの新しい機能を使用することは、今ほど簡単なことはないでしょう。主要なブラウザすべてで完全にサポートされていないCSSの機能を使用するときは、サポートされていないブラウザでも動作するベースのコードと、モダンブラウザ用に拡張バージョンのコードを記述します。

例えば、CSSの新しい機能が特定のブラウザでサポートされると、「EdgeやIEではサポートされていないから、使えない」といったリプライをTwitterで見かけます。

この記事では、CSSのその新しい機能をサポートしていないブラウザに害を与えずに使用する方法を解説したいと思います。

1. fit-contentをサポートしていないブラウザへの対応方法

私は先日、クライアントのプロジェクトで記事の本文に追加できるウィジェットを実装しました。このウィジェットには別の関連記事へのリンクが含まれており、少し目立つようにする必要がありました。

記事の本文に追加できるウィジェット

このウィジェットの幅は、中のコンテンツに応じて変化します。これに対応するには、次のような方法があります。

inline-block要素にする
width: fit-content;で幅を設定する

inline-blockは私にとって安心感がないので、あまり好きではありません。例えば、別のウィジェットがあったら、、、横並びになってしまいます。ウィジェットはスタンドアロンの要素でなければいけません。

そのため、2番目の「width: fit-content;で幅を設定する」を採用しました。

<p class="widget widget--more">
  <a href="#">Understanding Z-Index in CSS</a>
</p>

<a href="#">Understanding Z-Index in CSS</a>

</p>

.widget--more {
  width: fit-content;
}

.widget--more {

width: fit-content;

}

fit-contentはすべてのブラウザにサポートされている訳ではありません。サポートされていない場合はどうなるでしょうか？

<p>はブロックレベルの要素なので、ウィジェットは親要素の全幅を占めます。

上: fit-contentをサポートしているブラウザ、下: サポートしていないブラウザ

fit-content;をサポートしていないブラウザでも、ユーザーエクスペリエンスには害はありません。ウィジェットは期待通りに機能しています。

fit-contentについて詳しく知りたい時は、下記をご覧ください。

fit-content, min-content, max-contentの便利な使い方、CSSでコンテンツに依存してサイズを決める

2. clip-pathをサポートしていないブラウザへの対応方法

私はブランドやプロダクトのトーンに合わせた404ページのデザインに取り組むのが好きです。この例では、404のシェイプがあり、0には左右に動く目があります。

404のシェイプがあり、0の目は左右に動く

<div class="eyes">
  <div class="eyes__item"></div>
  <div class="eyes__item"></div>
</div>

</div>

これを実装するには、以下のようにclip-pathを使用する方法が必要でした。

clip-pathがサポートされている場合は、目が動く。
サポートされていない場合は、ソリッドに実装して目は動かない。

そのためには、ソリッドの目を作成してから、それぞれの上にclip-pathで動く目を追加する必要があります。

.eyes__item {
  position: relative;
  width: calc(10px + 0.75vw);
  height: calc(20px + 0.75vw);
  background-color: #4b4d65;
  border-radius: 50%;

  &:after {
    content: "";
    clip-path: ellipse(12px 12px at 58% 100%);
    animation: rollingEye 4s infinite;
    /* Other styles */
  }
}

.eyes__item {

position: relative;

width: calc(10px + 0.75vw);

height: calc(20px + 0.75vw);

background-color: #4b4d65;

border-radius: 50%;

&:after {

content: "";

clip-path: ellipse(12px 12px at 58% 100%);

animation: rollingEye 4s infinite;

/* Other styles */

}

左: clip-pathで実装、右: 非対応ブラウザ

これはプログレッシブエンハンスメントの簡単な例で、非対応ブラウザでも見た目は同じです。

clip-pathについて詳しく知りたい時は、下記をご覧ください。

CSSのclip-pathプロパティでいろいろ簡単に実装できる、便利な使い方と実装のポイント

3. ::markerをサポートしていないブラウザへの対応方法

CSSの::marker疑似要素は、リストの黒丸や数字のカラーやサイズを変更するのに役立ちます。拡張機能として使用できますが、サポートされていない場合でも情報の取得に問題はありません。

.list li::marker {
  color: #fcf2db;
  font-size: 1.2em;
}

.list li::marker {

color: #fcf2db;

font-size: 1.2em;

}

左: ::markerをサポートしているブラウザ、右: 非対応ブラウザ

::markerについて詳しく知りたい時は、下記をご覧ください。

あまり知られていない::marker疑似要素

4. gapをサポートしていないブラウザへの対応方法

CSSのすべてのプロパティが簡単な解決方法でフォールバックできるとは限りません。Flexboxのgapプロパティを例に見てましょう。

gapはFlexboxの子アイテム間のギャップ（スペース）を定義するのに役立ちます。ただし、フォールバックをしないで使用すると、下記のように表示されます。

gapが非対応ブラウザではギャップがなくなる

JavaScriptを使用してgapのサポートを検出し、非対応ブラウザにはフォールバックとしてマージンを使用できます。

.flex-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.flex-wrapper .item {
  flex: 0 0 calc(33.33% - 1rem);
  margin-left: 1rem;
  margin-bottom: 1rem;
}

/* gapがサポートされている場合 */
.flexbox-gap .flex-wrapper {
  gap: 1rem;
}

.flexbox-gap .flex-item {
  margin-left: 0;
  margin-bottom: 0;
}