🧑🏼 🗃️ 🐟 特定のCSSプロパティのサポートについてブラウザをチェックします ⤵️ 🌩️ 🚍

さまざまなブラウザー（特に古いブラウザー）の調整には時間がかかり、気分を損なうため、ブラウザーによる1つまたは別のCSSプロパティのサポートは依然としてWebレイアウトの主な問題の1つです。そのため、多くのタイプセッターは条件付きコメントを使用したIEのサポートに限定され、一部のタイプセッターは一般に古いブラウザーにプラグインし、「お使いのブラウザーは古い...」などのメッセージを表示して古いバージョンからサイトへのアクセスをブロックします。

この記事では、ブラウザが特定のCSSプロパティをサポートしているかどうかを確認する方法を説明します。

サポートのCSSチェック

長い間、CSSだけでサポートをテストすることはできませんでした。しかし、2013年、Firefox、Chrome、Operaは@supportsと呼ばれる特別なディレクティブと、それに対応するCSS.supports()関数のサポートを「発表」しました。これについては以下で説明します。このディレクティブを使用すると、指定されたCSSプロパティのサポートについてブラウザーを確認できます。

ディレクティブの一般的なビュー

 @supports (property: value) { /*  */ }

使用例

ブラウザがdisplay: flexプロパティをサポートしている場合、ディレクティブからプロパティを起動します。

 @supports (display: flex) { /*  */ }

キーワードnot

notキーワードを使用すると、プロパティがサポートされていないことを確認できます。

ブラウザがdisplay: flexサポートしていない場合、ディレクティブからプロパティを起動します

 @supports not (display: flex) { /*  */ }

またはキーワード

キーワードを使用して、次のプロパティの少なくとも1つのサポートを確認できます。

ブラウザがdisplay: flexまたはdisplay: -webkit-flexサポートしている場合、ディレクティブからプロパティを起動します

 @supports (display: flex) or (display: -webkit-flex) { /*  */ }

キーワードと

andキーワードを指定すると、2つ以上のプロパティのブラウザサポートを一度に確認できます。

ブラウザがdisplay: flexおよびdisplay: -webkit-flexサポートしている場合、ディレクティブからプロパティを起動します

 @supports (display: flex) and (display: -webkit-flex) { /*  */ }

複数のチェックと条件

ブラウザがdisplay: flexまたはdisplay: -webkit-flex 、およびflex-wrap: wrapサポートしている場合、ディレクティブからプロパティを起動します

 @supports ((display: flex) or (display: -webkit-flex)) and (flex-wrap: wrap) { /*  */ }

注： @supportsディレクティブ@supportsかなり新しく、IEはサポートしていません。

JavaScriptサポートチェック

JavaScriptを使用したCSSプロパティのブラウザーサポートには4つのオプションがありますが、これについては知っています。

上記のCSS.supports()関数を使用します。

関数のテクノロジーは、ディレクティブとほぼ同じです。違いは、プロパティがサポートされている場合はCSS.supports()関数がtrue返し、サポートされていない場合はfalseです。

関数を使用するための2つのオプションがあります。 1つ目は、プロパティとその値の2つの引数を渡すことです 。

ブラウザがdisplay: flexサポートしている場合、スクリプトはtrueを返しtrue 。
```
 CSS.supports("display", "flex"); /* true / false */ 
```
2番目のオプションでは、文字列全体を引数として渡す必要があります 。

ブラウザがdisplay: flexまたはdisplay: -webkit-flexおよびflex-wrap: wrapサポートしている場合、スクリプトはtrueを返しtrue 。
```
 CSS.supports("((display: flex) or (display: -webkit-flex)) and (flex-wrap: wrap)"); /* true / false */ 
```
注： @supportsディレクティブと同じですが、この関数は新しく、IEはサポートしていません。
JavaScriptを介して要素に新しいプロパティを適用する。

ブラウザが要素プロパティをサポートしていない値に設定できないことに気づきました。したがって、JavaScriptを介してプロパティに新しい値を適用した後、値が変更されていない場合、ブラウザはこの値をサポートしていません。

その結果、次の機能があります。
```
 var SupportsCSS = function (property, value) { try { //   var element = document.createElement('span'); // ,      if (element.style[property] !== undefined) element.style[property] = value; //  ,    else return false; //  ,   false //        ,     return element.style[property] === value; } catch (e) { //     IE,   ,   ,   return false; } }; 
```
または、 try...catchことなく行うことができますtry...catch cssTextを介してプロパティを記述する場合はtry...catchしcssText ：
```
 var SupportsCSS = function (property, value) { //   var element = document.createElement('span'); // ,      if (element.style[property] !== undefined) element.style.cssText = property + ':' + value; //     style  else return false; //     ,   false //        ,     return element.style[property] === value; }; 
```
この関数を使用した検証は次のとおりです。
```
 SupportsCSS('display', 'flex'); /* true / false */ SupportsCSS('display', '-webkit-flex'); /* true / false */ SupportsCSS('display', '-ms-flexbox'); /* true / false */ 
```
この機能の利点は、古いブラウザを含む多くのブラウザで機能することです。 IE、Edge、古いSafari、Chrome、Operaのブラウザで機能をテストしました。

注：古いブラウザーで、最新のエミュレーターを使用してプロパティのサポートを確認すると、このメソッドはサポートされていない値でtrueを示しtrue 。

これは、古いバージョンをエミュレートしているにもかかわらず、これを実行するブラウザーがこのCSSプロパティ値を認識し、適用できるためです。
他のJavaScript「プラグイン」を使用します。

CSSプロパティのブラウザサポートを確認するには、既製のJSプラグインを使用できます。たとえば、 Modernizr 。
解析User-Agentを使用します。

このメソッドを使用して、ユーザーのブラウザを特定し、目的の値を表示できます。

特定のCSSプロパティに対するブラウザーサポートの定義により、さまざまなブラウザーとそのバージョンに合わせてサイトを微調整できます。また、覚えておく必要があります。プロジェクトで使用するCSSコードが少ないほど、調整に伴うトラブルが少なくなります。

これで記事は終わりです。私は知っているすべての検証オプションについて話しました。他のオプションを知っている場合は、コメントにそれらについて書いてください。

特定のCSSプロパティのサポートについてブラウザをチェックします

サポートのCSSチェック

JavaScriptサポートチェック

More articles: