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

CSSの新しいプロパティがブラウザでサポートされると、使いたくなりますが、その時ネックになるのがサポートしていないブラウザへの対応方法です。

サポートしているブラウザにはその新しい機能を、サポートしていないブラウザには理想的ではないけれど情報をしっかり提供できるように実装する方法を紹介します。

いわゆる「プログレッシブ エンハンスメント」の実装事例ですが、元記事では「タイニー エンハンスメント」としてより簡単にできる実装です。

CSSの新しいプロパティをサポートしていないブラウザへの対応方法

The Beauty Of Tiny Enhancements In CSS
by Ahmad Shadeed

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

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

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

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

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

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

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

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

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

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

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

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

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

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

ウィジェットの表示

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

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

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

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

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

404ページのデザイン

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

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

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

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

目の表示

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

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

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

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

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

::markerでリストのカラーを変更

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

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

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

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

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

フォールバックをしないで使用した場合

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

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

終わりに

ここまで見たきたように、CSSの新しい機能を使用することができます。サポートされていない場合はブラウザがその機能を果たします。ただし、これはすべてのユースケースに対応しているわけではありません。使用するCSSの機能に合わせて、コードを記述する必要があります。

CSSのデバッグに関する電子書籍を書いていることをお知らせします。

サイトのキャプチャ

興味がある場合は、debuggingcss.comにアクセスして、本に関する最新情報を購読してください。

コメントや提案があれば、@shadeed9までお願いします。

sponsors

top of page

©2021 coliss