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

高洛峰
リリース: 2016-12-07 10:00:55
オリジナル
1176 人が閲覧しました

はじめに

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 属性をサポートしているかどうかを判断する関数を共有します。 :

りー

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート