特定の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つのオプションがありますが、これについては知っています。

1. 上記の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はサポートしていません。

2. 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プロパティ値を認識し、適用できるためです。

   
   
   
3. 他のJavaScript「プラグイン」を使用します。
   
   
   
   CSSプロパティのブラウザサポートを確認するには、既製のJSプラグインを使用できます。 たとえば、 Modernizr 。
   
   
4. 解析User-Agentを使用します。
   
   
   
   このメソッドを使用して、ユーザーのブラウザを特定し、目的の値を表示できます。
   
   

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



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