머리말
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 }