ブラウザでのCSSサポートのガイド

誰もが同じサイズの画面と解像度を持っている世界に住むことは決してないのと同じように、私たちは私たちのサイトを閲覧するすべての人が同じブラウザとブラウザバージョンを持っている世界に住むことは決してありません。 これは、古いブラウザ、または使用したいものをサポートしていないブラウザを扱うことは、Web開発者の仕事の一部であることを意味します。 とは言うものの、状況は以前よりもはるかに良くなっています。この記事では、遭遇する可能性のあるさまざまな種類のブラウザーサポートの問題について見ていきます。 それらに対処するためのいくつかの方法を紹介します。また、すぐに役立つ可能性のあるものについても見ていきます。

なぜこれらの違いがあるのですか？

大多数のブラウザがChromiumベースである世界でさえ、それらのブラウザはすべてGoogleChromeと同じバージョンのChromiumを実行しているわけではありません。 つまり、VivaldiなどのChromiumベースのブラウザは、GoogleChromeよりも数バージョン遅れている可能性があります。

そしてもちろん、ユーザーは必ずしもブラウザをすばやく更新するとは限りませんが、その状況は近年改善されており、ほとんどのブラウザはサイレントに自分自身をアップグレードしています。

そもそも、新しい機能がブラウザに組み込まれる方法もあります。 CSSの新機能がCSSワーキンググループによって設計され、それを実装するための指示とともに完全な仕様がブラウザベンダーに渡されたわけではありません。 多くの場合、仕様のより細かい詳細をすべて解決できるのは、実験的な実装が行われたときだけです。 したがって、機能開発は反復的なプロセスであり、ブラウザが開発時にこれらの仕様を実装する必要があります。 最近の実装は、ブラウザのフラグの後ろで行われるか、Nightlyまたはプレビューバージョンでのみ利用可能ですが、ブラウザが完全な機能を備えていると、他のブラウザがまだサポートしていない場合でも、すべての人がそれをオンに切り替える可能性があります。

これはすべて、私たちが望む限り、すべてのデスクトップと電話で同時に機能が魔法のように利用できる世界に私たちが存在することは決してないということを意味します。 あなたがプロのウェブ開発者であるなら、あなたの仕事はその事実に対処することです。

バグとサポートの欠如

ブラウザのサポートに関して私たちが直面している3つの問題があります。

1. 機能のサポートなし
   最初の問題（そして最も扱いやすい）は、ブラウザーがこの機能をまったくサポートしていない場合です。
2. ブラウザの「バグ」への対処
   2つ目は、ブラウザーがその機能をサポートしていると主張しているが、他のブラウザーがその機能をサポートしている方法とは異なる方法でサポートしている場合です。 このような問題は、最終的に一貫性のない動作になるため、「ブラウザのバグ」と呼ばれる傾向があります。
3. CSSプロパティの部分的なサポート
   これはより一般的になっています。 ブラウザが機能をサポートしている状況ですが、1つのコンテキストでのみです。

ブラウザ間の違いを理解することはあなたが何を扱っているかを理解するのに役立ちますので、これらの問題のそれぞれを順番に見ていきましょう。

1.機能のサポートなし

ブラウザが理解できないCSSプロパティまたは値を使用すると、ブラウザはそれを無視します。 これは、サポートされていない機能を使用する場合でも、機能を構成して使用しようとする場合でも同じです。 ブラウザがCSSのその行を理解しない場合、ブラウザはそれをスキップして、次に理解することを続行します。

このCSSの設計原則は、サポートされていないブラウザーには何も悪いことが起こらないという知識の下で、新しい機能を元気に使用できることを意味します。 一部のCSSでは、純粋に拡張機能として使用され、それがあなたがする必要があるすべてです。 この機能を使用して、その機能が利用できない場合でもエクスペリエンスが良好であることを確認してください。それだけです。 このアプローチは、プログレッシブエンハンスメントの背後にある基本的な考え方であり、プラットフォームのこの機能を使用して、新しいものを理解していないブラウザーで安全に使用できるようにします。

使用している機能がブラウザでサポートされているかどうかを確認したい場合は、Can IUseのWebサイトを参照してください。 きめ細かいサポート情報を探すもう1つの良い場所は、MDNの各CSSプロパティのページです。 そこでのブラウザサポートデータは非常に詳細になる傾向があります。

新しいCSSは古いCSSを理解します

新しいCSS機能が開発されると、それらが既存のCSSとどのように相互作用するかという点で注意が払われます。 たとえば、GridとFlexboxの仕様では、 display: gridとdisplay: flexが、フロートされたアイテムがグリッドアイテムになった場合や、マルチ列コンテナがグリッドに変わった場合などのシナリオをどのように処理するかについて詳しく説明されています。 これは、特定の動作が無視されることを意味し、サポートされていないブラウザーのCSSを単純に上書きするのに役立ちます。 これらのオーバーライドについては、MDNのプログレッシブエンハンスメントとグリッドレイアウトのページで詳しく説明しています。

機能クエリによるサポートの検出

上記の方法は、使用する必要のあるCSSが他のプロパティを必要としない場合にのみ機能します。 古いブラウザのCSSにプロパティを追加する必要がある場合があります。このプロパティは、この機能をサポートするブラウザによっても解釈されます。

この良い例は、グリッドレイアウトを使用する場合にあります。 グリッドアイテムになるフロートアイテムはすべてのフロート動作を失いますが、フロートを使用してグリッドレイアウトのフォールバックを作成しようとすると、アイテムにパーセンテージ幅とマージンが追加される可能性があります。

 .grid > .item { width: 23%; margin: 0 1%; } 

これらの幅とマージンは、フロートアイテムがグリッドアイテムの場合でも適用されます。 幅は、コンテナの全幅ではなく、グリッドトラックのパーセンテージになります。 次に、指定したギャップと同様に、任意のマージンが適用されます。

 .grid > .item { width: 23%; margin: 0 1%; } .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 1%; } 

ありがたいことに、CSSに組み込まれ、最新のブラウザーに実装されている機能があり、この状況に対処するのに役立ちます。 機能クエリを使用すると、ブラウザに何をサポートしているかを直接尋ねて、応答に基づいて行動することができます。 デバイスまたは画面の一部のプロパティをテストするメディアクエリと同様に、機能クエリはCSSのプロパティと値のサポートをテストします。

サポートのテスト

サポートのテストは最も単純なケースです。 @supportsを使用してから、CSSのプロパティと値をテストします。 機能クエリ内のコンテンツは、ブラウザがtrueで応答した場合、つまり機能をサポートしている場合にのみ実行されます。

サポートなしのテスト

機能をサポートしていないかどうかをブラウザに確認できます。 この場合、機能クエリ内のコードは、ブラウザがサポートをサポートしていないことを示した場合にのみ実行されます。

 @supports not (display: grid) { .item { /* CSS from browsers which do not support grid layout */ } }

複数のものをテストする

サポートするプロパティが複数必要な場合は、とを使用andください。

 @supports (display: grid) and (shape-outside: circle()){ .item { /* CSS from browsers which support grid and CSS shapes */ } }

あるプロパティまたは別のプロパティのサポートが必要な場合は、 orを使用してください。

 @supports (display: grid) or (display: flex){ .item { /* CSS from browsers which support grid or flexbox */ } }

テストするプロパティと値の選択

使用するすべてのプロパティをテストする必要はありません。使用する予定の機能のサポートを示すものだけです。 したがって、グリッドレイアウトを使用する場合は、 display: grid 。 将来的に（そして一度サブグリッドサポートがブラウザに登場すると）、より具体的にサブグリッド機能をテストする必要があるかもしれません。 その場合、 grid-template-columns: subgridをテストして、サブグリッドサポートを実装したブラウザーからのみ真の応答を取得します。

フロートフォールバックの例に戻ると、機能クエリによってどのように分類されるかがわかります。 必要なのは、ブラウザにクエリを実行して、グリッドレイアウトをサポートしているかどうかを確認することです。 含まれている場合は、アイテムの幅をautoに戻し、マージンを0に設定できます。

 .grid > .item { width: 23%; margin: 0 1%; } @supports(display: grid) { .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 1%; } .grid > .item { width: auto; margin: 0; } } 

機能クエリ内にすべてのグリッドコードを含めましたが、含める必要はないことに注意してください。 ブラウザがグリッドプロパティを理解していなかった場合、それらは無視されるため、機能クエリの範囲外に安全に配置できます。 この例の機能クエリ内に必要なものは、marginとwidthのプロパティです。これらは古いブラウザーのコードに必要ですが、サポートしているブラウザーによっても適用されます。

カスケードを受け入れる

フォールバックを提供する非常に簡単な方法は、ブラウザーが理解できないCSSを無視するという事実と、他のすべてが同等の特異性を持っている場合、どのCSSが要素に適用されるかに関してソースの順序が考慮されるという事実を利用することです。 。

まず、この機能をサポートしていないブラウザ用のCSSを作成します。 次に、使用するプロパティのサポートをテストします。ブラウザがサポートをサポートしていることを確認した場合は、フォールバックコードを新しいコードで上書きします。

これは、モバイルファーストのアプローチに従って、レスポンシブデザインにメディアクエリを使用する場合に使用する手順とほぼ同じです。 このアプローチでは、小さい画面のレイアウトから始めて、ブレークポイントを上に移動しながら大きい画面のレイアウトを追加または上書きします。

CSS機能クエリを使用できますか？ caniuse.comからの主要なブラウザ全体でのCSS機能クエリのサポートに関するデータ。

上記の作業方法は、機能クエリをサポートしていないブラウザについて心配する必要がないことを意味します。 Can I Useからわかるように、機能クエリは非常に優れたサポートを提供します。 それらをサポートしていない傑出したブラウザは、InternetExplorerのどのバージョンでもありません。

ただし、使用する新機能はIEでもサポートされていない可能性があります。 そのため、現時点では、ほとんどの場合、サポートなしでブラウザー用のCSSを作成することから始め、次に機能クエリを使用してテストします。 この機能クエリは、サポートをテストする必要があります。

1. 機能クエリをサポートするブラウザは、サポートがある場合はtrueを返すため、クエリ内のコードが使用され、古いブラウザのコードが上書きされます。
2. ブラウザが機能クエリをサポートしているが、テストされている機能をサポートしていない場合、falseが返されます。 機能クエリ内のコードは無視されます。
3. ブラウザが機能クエリをサポートしていない場合、機能クエリブロック内のすべてが無視されます。つまり、IE11などのブラウザは古いブラウザコードを使用します。これは、まさにあなたが望むものである可能性が非常に高いです。

2.ブラウザの「バグ」への対処

2番目のブラウザサポートの問題は、ありがたいことにあまり一般的ではなくなりつつあります。 「WhatWeWished For」（昨年末に公開）を読むと、過去のより厄介なブラウザのバグのいくつかを少し見学することができます。 とは言うものの、どのソフトウェアにもバグがありがちですが、ブラウザも例外ではありません。 また、仕様の実装は循環的であるため、ブラウザが何かを実装した後、仕様が変更されたため、更新を発行する必要があるという事実を追加すると、 そのアップデートが出荷されるまで、ブラウザが互いに異なることをする状況にあるかもしれません。

ブラウザが何かのサポートがそれをひどくサポートしていると報告した場合、機能クエリは私たちを助けることができません。 ブラウザが「はい、でもおそらく気に入らないでしょう」と言うことができるモードはありません。 実際の相互運用性のバグが発生した場合、これらの状況では、もう少し創造性を発揮する必要があります。

バグが発生していると思われる場合、最初に行うことはそれを確認することです。 バグのある動作が見られ、ブラウザがさまざまなことをしていると思うとき、問題は私たちにあることがあります。 おそらく、無効な構文を使用したか、不正な形式のHTMLのスタイルを設定しようとしています。 そのような場合、ブラウザは何かをしようとします。 ただし、設計どおりの言語を使用していないため、ブラウザごとに対応方法が異なる場合があります。 HTMLとCSSが有効であることを簡単に確認することは、優れた最初のステップです。

その時点で、私はおそらく簡単な検索を行い、私の問題がすでに広く理解されているかどうかを確認します。 FlexbugsやGridbugsなどの既知の問題のリポジトリがいくつかあります。 ただし、適切に選択された少数のキーワードでさえ、その主題をカバーするStack Overflowの投稿や記事を表示し、回避策を提供する可能性があります。

しかし、バグの原因がよくわからないため、解決策を探すのがかなり難しいとしましょう。 したがって、次のステップは、問題の縮小されたテストケースを作成することです。つまり、バグの原因を正確に特定するのに役立つ、無関係なものをすべて取り除きます。 CSSのバグがあると思われる場合は、JavaScriptを削除するか、フレームワークの外部で同じスタイルを再作成できますか？ 私はよくCodePenを使用して、私が見ているものの縮小されたテストケースをまとめます。 これには、コードについて質問する必要がある場合に他の人と簡単に共有できる方法でコードを提供できるという追加の利点があります。

ほとんどの場合、問題を切り分けたら、目的の結果を達成するための別の方法を考えることができます。 他の誰かが狡猾な回避策を思いついたことがわかります。または、どこかに投稿して提案を求めることができます。

そうは言っても、ブラウザのバグがあり、同じ問題について話している人が他に見つからない場合は、報告する必要のある新しいものを見つけた可能性があります。 最近登場した新しいCSSのすべてで、人々がCSSの他の部分と組み合わせて物事を使い始めると、問題が発生することがあります。

このような問題の報告については、LeaVerouからのこの投稿をチェックしてください。 ブラウザのバグを報告してください！」 この記事には、縮小されたテストケースを作成するための優れたヒントもあります。

3.CSSプロパティの部分的なサポート

3番目のタイプの問題は、最新のCSS仕様の設計方法により、より一般的になっています。 グリッドレイアウトとフレックスボックスについて考えると、これらの仕様は両方とも、ボックスアライメントレベル3のプロパティと値を使用してアライメントを行います。 したがって、 align-items 、 justify-content 、 column-gapなどのプロパティは、GridとFlexboxの両方、およびその他のレイアウト方法で使用されるように指定されています。

ただし、執筆時点では、 gapプロパティはグリッドをサポートするすべてのブラウザのグリッドレイアウトで機能し、 column-gapはマルチコルで機能します。 ただし、FirefoxのみがFlexboxにこれらのプロパティを実装しています。

マージンを使用してFlexboxのフォールバックを作成し、 column-gapをテストしてマージンを削除すると、グリッドまたはマルチcolumn-gapをサポートするブラウザーでボックス間にスペースがなくなるため、フォールバック間隔は次のようになります。削除されました。

 @supports(column-gap: 20px) { .flex { margin: 0; /* almost everything supports column-gap so this will always remove the margins, even if we do not have gap support in flexbox. */ } }

これは、機能クエリの現在の制限です。 別の機能の機能のサポートをテストする方法はありません。 上記の状況で、ブラウザに質問したいのは、「Flexboxで列ギャップをサポートしていますか？」です。 このように、私は自分のフォールバックを使用できるように否定的な応答を得ることができます。

CSSフラグメンテーションプロパティのbreak-before 、 break-after 、およびbreak-insideも同様の問題があります。 これらはページが印刷されるときにサポートが向上するため、ブラウザはサポートを要求することがよくあります。 ただし、multicolでのサポートをテストしている場合は、誤検知のように見えるものが表示されます。 この問題についてCSSワーキンググループで問題を提起しましたが、解決するのは簡単な問題ではありません。 考えがあれば、そこに追加してください。

セレクターサポートのテスト

現在、機能クエリはCSSのプロパティと値のみをテストできます。 テストしたいもう1つのことは、セレクター仕様のレベル4などの新しいセレクターのサポートです。 これを実現する機能クエリの新機能の説明文とFirefoxNightlyのフラグの背後にある実装もあります。

Firefoxでabout:configにアクセスし、フラグlayout.css.supports-selector.enabledを有効にすると、さまざまなセレクターがサポートされているかどうかをテストできます。 構文は現在非常に単純です。たとえば、 :hasセレクターをテストします。

 @supports selector(:has){ .item { /* CSS for support of :has */ } }

これは開発中の仕様ですが、ブラウザサポートの常に存在する問題を管理するのに役立つ機能がどのように追加されているかを確認できます。

参考文献

機能を使用して、それが1つの主要なブラウザーでサポートされていないことを発見したり、物事がさまざまな方法で動作しているように見える場合は、イライラするように思われることがあります。 私は役立つかもしれないいくつかの実用的なさらなる読書を切り上げました。

• 「CSSグリッドの使用：グリッドなしのブラウザーのサポート」古いブラウザーとCSSグリッドを処理するためのオプション
• 機能クエリの「機能クエリ」MDNリファレンスページ
• 「CSSグリッドとプログレッシブエンハンスメント」グリッドプログレッシブエンハンスメントのMDNガイド
• 「Flexboxの下位互換性」古いプレフィックス付き実装の詳細を含むFlexboxサポートのMDNガイド
• 「パターンライブラリファースト」パターンライブラリを使用してフォールバックコードを管理する方法