> php教程 > PHP开发 > 브라우저가 CSS3 속성을 지원하는지 여부를 확인하는 JavaScript의 다양한 방법

브라우저가 CSS3 속성을 지원하는지 여부를 확인하는 JavaScript의 다양한 방법

高洛峰
풀어 주다: 2016-12-07 10:00:55
원래의
1191명이 탐색했습니다.

머리말

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{
 
}
로그인 후 복사

두 번째: JavaScript 방법 2: ie6은 지원되지 않습니다.

function isPropertySupported(property)
{
 return property in document.body.style;
}
로그인 후 복사

사용:

위 속성을 기억하고, 배경색을 대체하려면 backgroundColor를 사용하세요

if(isPropertySupported('opacity')){
 
}else{
 
}
로그인 후 복사

세 번째: 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 속성을 지원하는지 확인하는 기능을 공유하겠습니다.

function elementSupportsAttribute(element, attribute) {
 var test = document.createElement(element);
 if (attribute in test) {
 return true;
 } else {
 return false;
 }
};
로그인 후 복사

:

if (elementSupportsAttribute("textarea", "placeholder") {
 
} else {
 // fallback
}
로그인 후 복사


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿