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

возможно ли в JavaScript узнать, поддерживается ли свойство CSS браузером клиента? Я говорю о свойствах вращения CSS3. Я хочу выполнить некоторые функции, только если браузер поддерживает их.

24
browser-feature-detection css javascript

4 ответов

Я верю, что вы можете сделать это так:

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!');
}
36

существует новый DOM API CSS.поддерживает для этой цели. FF, Opera (как supportsCSS) и Chrome Canary уже реализуют этот метод.

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

пример:

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

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

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

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

8

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

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

in .css файл;

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

in .файл JS;

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

можно попробовать это?

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