JavaScript는 브라우저가 CSS3 속성을 지원하는지 여부를 어떻게 결정합니까?

이 글은 주로 JavaScript가 브라우저가 CSS3 속성을 지원하는지 여부를 결정하는 방법을 소개합니다. 이제 이를 공유합니다. 필요한 친구들이 이를 참조할 수 있습니다.

실제로 CSS3의 일부 속성을 순서대로 사용할 수 있습니다. 저가형 브라우저는 CSS3에 적합하지 않다는 점을 고려하십시오. 하향 조정을 위해서는 특정 브라우저가 CSS3 속성을 지원하는지 여부를 알아야 하는 경우가 많습니다. 예를 들어 일반적인 CSS3 애니메이션의 경우 브라우저가 이를 지원하는지 확인이 필요합니다. 이 글에서는 아래의 몇 가지 방법을 공유하고 있으며, 도움이 필요한 친구들이 이를 참고할 수 있습니다.

머리말

CSS3의 등장으로 브라우저의 성능이 더욱 다양해졌습니다. 성능에 가장 큰 영향을 미치는 것은 일상적으로 애니메이션을 작성할 때 브라우저가 이를 지원하는지 미리 판단하는 것이 필요합니다. , 특히 CSS3 애니메이션 라이브러리를 작성할 때. 예를 들어 transition의 animation-play-state는 일부 브라우저에서만 지원됩니다. 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

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

사용:

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

} else {
 // fallback
}

두 번째: JavaScript 방법 2: ie6

rrreee

사용: 는 위 속성을 사용하려면 background-color

위 내용은 JavaScript는 브라우저가 CSS3 속성을 지원하는지 여부를 어떻게 결정합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!