JavaScriptでブラウザのCSSプロパティのサポートを確認しますか？

Question

JavaScriptでCSSプロパティがクライアントブラウザでサポートされているかどうかを知ることは可能ですか？私は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.supports polyfill

例使用することができ、クロスブラウザの互換性のために

：

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

をしかし、あなたはまだCSSプロパティを前に付けるために、ブラウザの接頭辞を指定する必要があります。たとえば：

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

Iは、機能検出のための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

お試しください。

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