JavaScript로 브라우저 CSS 속성 지원을 확인 하시겠습니까?

Question

CSS 속성이 클라이언트 브라우저에서 지원되는지 여부는 JavaScript에서 알 수 있습니까? CSS3의 회전 속성에 대해 이야기하고 있습니다. 브라우저에서 지원하는 경우에만 일부 기능을 실행하고 싶습니다.

Answer 1

난 당신이 이런 식으로 할 수 있다고 생각 :

이

if ('WebkitTransform' in document.body.style 
|| 'MozTransform' in document.body.style 
|| 'OTransform' in document.body.style 
|| 'transform' in document.body.style) 
{ 
    alert('I can Rotate!'); 
} 

Answer 2

그 목적을 위해, 새로운 DOM API CSS.supports 있습니다. FF, Opera (supportsCSS로) 및 Chrome Canary는 이미이 방법을 구현합니다. 당신은 여전히 ​​CSS 속성 접두어를위한 브라우저 접두사를 지정해야

CSS.supports("display", "table");//IE<8 return false 

을하지만 :

브라우저 간 호환성을 내 CSS.supports polyfill

예를 사용할 수 있습니다. 예를 들어 :

CSS.supports("-webkit-filter", "blur(10px)"); 

나는 기능이 검출 Modernizr을 사용하는 것이 좋습니다.

Answer 3

Modernizr 라이브러리를 사용할 수 있습니다.

CSS 변환 예 :

.css 파일;

.no-csstransforms .box { color: red; } 
.csstransforms .box { color: green; } 

.js 파일;

if (Modernizr.csstransforms) { 
    // supported 
} else { 
    // not-supported 
} 

Answer 4

5 회 시도해도됩니까?

var temp = document.createElement('div'); 
var isSupport = temp.style['propName'] != undefined;