ブラウザが CSS3 属性をサポートしているかどうかを判断するための JavaScript のさまざまなメソッド

はじめに

CSS3 の登場により、ブラウザのパフォーマンスがより多彩になりました。パフォーマンスに最も大きな影響を与えるのはアニメーションです。特に CSS3 を記述する場合は、ブラウザがアニメーションをサポートしているかどうかを事前に判断する必要があります。アニメーションライブラリのとき。たとえば、遷移アニメーション再生状態は一部のブラウザでのみサポートされます。

次のメソッドは、スクリプトを使用して、ブラウザが特定の CSS3 属性をサポートしているかどうかを判断できます:

最初のタイプ: JavaScript は、次のコードでより一般的に使用されます:

var support_css3 = (function() {
 var div = document.createElement('div'),
  vendors = 'Ms O Moz Webkit'.split(' '),
  len = vendors.length;
  
 return function(prop) {
  if ( prop in div.style ) return true;
  
  prop = prop.replace(/^[a-z]/, function(val) {
   return val.toUpperCase();
  });
  
  while(len--) {
   if ( vendors[len] + prop in div.style ) {
   return true;
   }
  }
  return false;
 };
})();

使用法: 変換がサポートされているかどうかを確認します

if(support_css3('transform')){
 
}else{
 
}

2 番目: JavaScript メソッド 2: ie6 はサポートされていません

function isPropertySupported(property)
{
 return property in document.body.style;
}

使用法:

上記の属性を覚えて、background-color をbackgroundColor に置き換えてください

if(isPropertySupported('opacity')){
 
}else{
 
}

3 番目: CSS.supports

CSS.supports は、CSS3 @support ルールの中でも特別なものです。 @support ルールをサポートするすべてのルールは、次の機能をサポートします (この方法は推奨されません。結局のところ、@support にも互換性があります。一部のブラウザーは CSS3 属性をサポートしている可能性があります)。ただし、@support はサポートされていません)

//pass the same string as you pass to the @supports rule
if(CSS.supports("(background-color: red) and (color:white"))
{
 document.body.style.color = "white";
 document.body.style.backgroundColor = "red";
}

最後に、入力属性が Palaceholder をサポートしているかどうかなど、ブラウザーが特定の HTML5 属性をサポートしているかどうかを判断する関数を共有します。 :

りー