Как проверить, поддерживается ли css box-shadow (jQuery)?

Question

Я создаю макет в полном CSS. Однако некоторые браузеры (например, IE6) не поддерживают box-shadow (.. и -webkit-box-shadow или -moz-box-shadow). Я хотел бы проверить, не поддерживается ли он, а затем добавить другие стили.

Как это возможно в jQuery?

Марти Лайн

Answer 1

var check = document.createElement('div');

var shadow = !!(0 + check.style['MozBoxShadow']);
if(shadow)
   alert('moz-box-shadow available');

Это способ «Сделай сам» . Другим надежным способом является библиотека modernizr, которая делает обнаружение функций для вас.

http://www.modernizr.com/

Здесь jQuery вообще не нужен.

Answer 2

Удобная функция (чистый JavaScript, без jQuery) для проверки того, какие функции CSS поддерживаются браузером, описана в Быстрый совет: определение поддержки CSS3 в браузерах с JavaScript .

выглядит следующим образом:

var supports = (function() {
   var div = document.createElement('div'),
      vendors = 'Khtml 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) {
            // browser supports box-shadow. Do what you need.
            // Or use a bang (!) to test if the browser doesn't.
            return true;
         } 
      }

      return false;
   };
})();

Использование выглядит следующим образом:

if (supports('boxShadow')) { 
   // Do whatever
}

Для меня это сработало!: -)