Проверить поддержку CSS свойств браузера с помощью JavaScript?

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 (как поддерживает CSS) и Chrome Canary уже реализуют этот метод.

Для кросс-браузерной совместимости вы можете использовать мой CSS.supports polyfill

Пример:

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

Но вам все равно нужно указать префикс браузера для префикса свойств css. Например:

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

Я предлагаю использовать Modernizr для обнаружения признаков.

Answer 3

Может быть попробовать это?

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

Answer 4

Вы можете использовать Modernizr библиотека.

Пример преобразования CSS:

в файле .css;

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

в файле .js;

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