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

다음 방법은 스크립트를 사용하여 브라우저가 특정 CSS3 속성을 지원하는지 여부를 확인할 수 있습니다.

첫 번째 유형: 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
}

두 번째: JavaScript 방법 2: ie6

rrreee

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

🎜🎜rrreee🎜🎜🎜🎜🎜세 번째: CSS.supports🎜🎜🎜🎜CSS.supports를 대체합니다. >는 CSS3입니다 @ 지원 규칙 중 특별한 것으로, @support 규칙을 지원하는 모든 규칙은 다음 기능을 지원합니다(결국 이 방법은 권장되지 않습니다. @support 호환성도 있고 일부 브라우저는 CSS3 속성 중 하나를 지원할 수 있지만 @support를 지원하지 않습니다)🎜🎜🎜rrreee🎜🎜🎜마지막으로 브라우저가 지원하는지 확인하는 기능을 공유하겠습니다. 입력 속성과 같은 특정 HTML5 속성 palaceholder 지원 여부.🎜🎜🎜rrreee🎜🎜🎜🎜사용법: 🎜🎜🎜🎜rrreee🎜🎜🎜위 내용은 이 글의 전체 내용입니다. 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 콘텐츠를 보려면 PHP 중국어 웹사이트를 팔로우하세요! 🎜🎜관련 추천: 🎜🎜🎜간단한 프레임 차트를 만들기 위한 JavaScript 정보🎜🎜🎜🎜🎜배열 매개변수를 백그라운드 컨트롤러에 전달하는 js 방법 정보🎜🎜🎜🎜🎜🎜🎜🎜🎜

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