Как узнать о поддержке браузером CSS свойства?

#javascript #css

Хочу сделать сайт, который будет корректно выглядеть в большинстве браузеров. Но
на пути к созданию столкнулся с проблемой кроссбраузерности. То есть, один браузер
поддерживает данное CSS, а другой — нет.

Как я могу знать, поддерживает ли данный браузер указанное CSS свойство? Можно ли
это узнать на одном CSS?
    

Ответы

Ответ 1

С помощью одного CSS

Узнать, поддерживает ли данный браузер указанное CSS свойство, можно через CSS директиву
под названием @supports.

Эта директива работает так же, как и @media.

/* Узнаём, поддерживает ли браузер display: flex; */
@supports (display: flex) {
   /* Стили */
}


Так же можно установить свойства при условии, если браузер не поддерживает указанное
CSS свойство

/* Узнаём, поддерживает ли браузер display: flex; */
@supports not (display: flex) {
   /* Стили */
}


Ещё можно проверить несколько свойств сразу, используя оператор and

/* Узнаём, поддерживает ли браузер display: flex; и flex-wrap: wrap; */
@supports (display: flex) and (flex-wrap: wrap) {
   /* Стили */
}


А если нам нужно хотя бы одно рабочее свойство, можно использовать оператор or

/* Узнаём, поддерживает ли браузер display: flex; */
@supports (display: flex) or (display: -webkit-flex) {
   /* Стили */
}


Но нужно учесть, что данная директива новая и в IE вообще не работает.

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



С помощью JS

Данную задачу, с помощью JS, я знаю, как решить двумя способами:


Использовать аналог CSS @Supports только на JS — функцию CSS.supports()

// Узнаём, поддерживает ли браузер display: flex;
CSS.supports("display", "flex"); // true/false


Так же, как и в CSS, можно указать несколько свойств.

// Узнаём, поддерживает ли браузер display: flex; и flex-wrap: wrap;
CSS.supports("( display: flex ) and ( flex-wrap: wrap )"); // true/false


Но так же, как и в CSS, этот метод является новым и не будет работать в IE вообще.
Проверить с помощью применения стилей через JS.

Суть этого метода в том, что браузер не может установить свойству элемента значение,
которое не поддерживает. Таким образом, если, после применения нового значения свойству
через JavaScript, оно не изменилось, то браузер не поддерживает данное значение.

В итоге у нас выходит следующая функция:

var SupportsCSS = function (property, value) {
   try {
      // Создаём новый элемент
      var element = document.createElement('span');
      // Проверяем, есть ли такое свойство в браузере
      if (element.style[property] !== undefined) 
         element.style[property] = value; // Если есть, то присваиваем
      else 
         return false; // Если нет, то false

      // Если браузер поддерживает данное значение для указанного свойства, то значения
будут равны
      return element.style[property] === value;
   } catch (e) {
      // В случае со старым IE, при присваивании значения, которое не поддерживается,
вылетает ошибка
      return false;
   }
};


И вот так это работает:



var SupportsCSS = function (property, value) {
    try {
        var element = document.createElement('span');
        if (element.style[property] !== undefined) 
            element.style[property] = value;
        else 
            return false;

        return element.style[property] === value;
    } catch (e) {
        return false;
    }
};

// Проверяем
console.log( SupportsCSS('display', 'flex') );
console.log( SupportsCSS('display', '-webkit-box') );
console.log( SupportsCSS('display', 'Lol :)') );
console.log( SupportsCSS('flex-wrap', 'wrap') );
console.log( SupportsCSS('-webkit-flex-wrap', 'nowrap') );
   





  Примечание: Если вы проверяете поддержку свойства в старом браузере, через эмулятор
современного браузера, то данный метод будем показывать true на значениях, которые
не поддерживаются.


Преимущество этого метода в том, что он будет работать во всех браузерах.

Пример запуска скрипта в Safari 5.17:




Специальные сервисы

Чтобы не заморачиваться, поддержу можно посмотреть на специальных сайтах. К примеру,
один из самых популярных сайтов — http://caniuse.com/



Подробнее можно прочитать здесь: https://habrahabr.ru/post/336466/


Ответ 2

Modernizr


  Modernizr — это JavaScript-библиотека, которая узнаёт, что из HTML5 и CSS3 умеет
браузер пользователя.


Если вкратце, то библиотека добавляет классы вашему  опираясь на которые можно
выбирать какие свойства будет использовать элемент:

.block { display: flex; }
html:not(.flexbox) .block { display: block; }


Методы для js:

if(Modernizr.touchevents) {
  // do something ...
}


Так же тестирование тех или иных возможностей браузера, скажем для выбора "подключать
полифилы или нет":

Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});


Более подробно можно почитать в статье на Хабре - Modernizr: практическое применение