JavaScript はブラウザが CSS3 属性をサポートしているかどうかをどのように判断しますか?

この記事では、JavaScript が CSS3 属性をサポートしているかどうかを判断する方法を主に紹介します。これを必要とする友人に共有します。ローエンドのブラウザは CSS3 に対応していないことを考慮するため、下方適応を行うために、特定のブラウザが使用する CSS3 プロパティをサポートしているかどうかを知る必要があることがよくあります。たとえば、一般的な CSS3 アニメーションの場合、ブラウザがそれをサポートしているかどうかを確認する必要があります。この記事では以下にいくつかの方法を紹介しますので、困っている友人は参考にしてください。

はじめに CSS3の登場により、ブラウザのパフォーマンスがより多彩になりました 日常的にアニメーションを書く場合、ブラウザがサポートしているかどうかを事前に判断する必要があります。 、特に CSS3 アニメーション ライブラリを作成する場合。たとえば、transition の animation-play-state は一部のブラウザでのみサポートされています。

次のメソッドでは、スクリプトを使用して、ブラウザが特定の CSS3 属性をサポートしているかどうかを判断できます: transition的animation-play-state，就只有部分浏览器支持。

下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性：

第一种：javascript比较常用下面这个代码：

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

使用：检查是否支持transform

if(support_css3('transform')){

}else{

}

第二：JavaScript方法2：不支持ie6

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

使用：

记得上面的属性，要用backgroundColor替换background-color

if(isPropertySupported('opacity')){

}else{

}

第三：CSS.supports

CSS.suports是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";
}

最后再分享一个判断浏览器是否支持某些HTML5属性的函数，比如input属性是否支持palaceholder

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

function elementSupportsAttribute(element, attribute) {
 var test = document.createElement(element);
 if (attribute in test) {
 return true;
 } else {
 return false;
 }
};

使用:

サポートされているかどうかを確認してください< code>transform

if (elementSupportsAttribute("textarea", "placeholder") {

} else {
 // fallback
}

2 番目: JavaScript メソッド 2: ie6 をサポートしていません

rrreee

使用:メンバーの上記の属性では、backgroundColor を backgroundColor の代わりに使用します

rrreee🎜🎜🎜🎜🎜 3 番目: CSS.supports🎜🎜🎜🎜CSS.supports は CSS3 @ サポート ルールの中でも特別なもので、@support ルールをサポートするルールはすべて次の機能をサポートします (この方法は推奨されません。結局のところ、@support互換性もあります。ブラウザは CSS3 属性の 1 つをサポートしている可能性がありますが、@support はサポートしていません)🎜🎜🎜rrreee🎜🎜🎜最後に、ブラウザがサポートしているかどうかを判断する関数を共有します。 input 属性などの特定の HTML5 属性 palaceholder をサポートするかどうか。🎜🎜🎜rrreee🎜🎜🎜🎜使用法: 🎜🎜🎜🎜rrreee🎜🎜🎜 上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトを参照してください。 🎜🎜関連するおすすめ: 🎜🎜🎜簡単なフレームチャートを作成するためのJavaScriptについて🎜🎜🎜🎜🎜バックグラウンドコントローラーに配列パラメータを渡すjsの方法について🎜🎜🎜🎜🎜🎜🎜🎜🎜

以上がJavaScript はブラウザが CSS3 属性をサポートしているかどうかをどのように判断しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。