Проверяем браузер на поддержку определённого CSS свойства

Поддержка браузерами того или иного CSS свойства до сих пор остаётся одной из основных проблем веб-вёрстки, так как корректировка под различные браузера, особенно старые, занимает очень много времени и портит настроение. Поэтому многие верстальщики ограничиваются поддержкой IE с помощью условных комментариев, а некоторые вообще забивают на старые браузера и блокируют доступ к своему сайту со старых версий выводя сообщение типа «Ваш браузер устарел...».

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

CSS проверка на поддержку

Долгое время проверить поддержку с помощью одного CSS было невозможно. Но в 2013 году Firefox, Chrome и Opera «объявили» о поддержки специальной директивы под названием @supports и её JavaScript аналога — функции CSS.supports(), про которую я буду писать ниже. С помощью этой директивы, можно проверить браузер на поддержку указанного CSS свойства.

Общий вид директивы

@supports (property: value) {
   /* Стили */
}

Пример использования

Если браузер поддерживает свойство display: flex, то он запустит свойства из директивы.

@supports (display: flex) {
   /* Стили */
}

Ключевое слово not

С помощью ключевого слова not, можно осуществить проверку на отсутствие поддержки какого-либо свойства.

Если браузер не поддерживает display: flex, то он запустит свойства из директивы

@supports not (display: flex) {
   /* Стили */
}

Ключевое слово or

Используя ключевое слово or, можно осуществить проверку на поддержку хотя бы одного свойства из указанных.

Если браузер поддерживает display: flex или display: -webkit-flex, то он запустит свойства из директивы

@supports (display: flex) or (display: -webkit-flex) {
   /* Стили */
}

Ключевое слово and

Если указать ключевое слово and, то можно проверить поддержку браузером двух или более свойств сразу.

Если браузер поддерживает display: flex и display: -webkit-flex, то он запустит свойства из директивы

@supports (display: flex) and (display: -webkit-flex) {
   /* Стили */
}

Множественные проверки и условия

Если браузер поддерживает display: flex или display: -webkit-flex, и flex-wrap: wrap, то он запустит свойства из директивы

@supports ((display: flex) or (display: -webkit-flex)) and (flex-wrap: wrap) {
   /* Стили */
}

Примечание: директива @supports достаточно новая и IE её не поддерживает.

JavaScript проверка на поддержку

Есть четыре варианта на поддержку браузером CSS свойства с помощью JavaScript, про которые я знаю.

1. С помощью функции CSS.supports(), про которую я упоминал выше.

   Технология работы функции почти не отличается от работы директивы. Отличие состоит в том, что функция CSS.supports() возвращает true, если свойство поддерживается, и false — если нет.

   Есть два варианта использования функции. Первый включает передачу двух аргументов — свойства и его значения:

   Если браузер поддерживает display: flex, то скрипт вернёт true.

   CSS.supports("display", "flex"); /* true / false */

   Второй вариант требует передачи в качестве аргумента целой строки:

   Если браузер поддерживает display: flex или display: -webkit-flex, и flex-wrap: wrap, то скрипт вернёт true.

   CSS.supports("((display: flex) or (display: -webkit-flex)) and (flex-wrap: wrap)"); /* true / false */

   Примечание: так же, как и директива @supports, эта функция новая и IE её не поддерживает.
2. С помощью применения новых свойств элементу через JavaScript.

   Когда-то я заметил, что браузер не может установить свойству элемента значение, которое не поддерживает. Таким образом, если, после применения нового значения свойству через 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;
      }
   };

   Или же можно обойтись без try...catch, если будем записывать свойства через cssText:

   var SupportsCSS = function (property, value) {
       // Создаём элемент
       var element = document.createElement('span');
       // Проверяем, поддерживает ли браузер данное свойство
       if (element.style[property] !== undefined) {
           // Вносим новое свойство в style элемента
           element.style.cssText = property + ':' + value;
           // Получаем текущее значение свойства
           var getPropertyValue = window.getComputedStyle ? window.getComputedStyle(element, null).getPropertyValue(property) : element.style[property];
       } else {
           // Если браузер не поддерживает свойство, то возвращаем false
           return false;
       }
   
       // Если браузер поддерживает данное значение для указанного свойства, то значения будут равны
       return getPropertyValue === value;
   };

   Проверка с помощью этой функции выглядит следующим образом:

   SupportsCSS('display', 'flex'); /* true / false */
   SupportsCSS('display', '-webkit-flex'); /* true / false */
   SupportsCSS('display', '-ms-flexbox'); /* true / false */
   

   Преимущество данной функции в том, что она будет работать во многих браузер, в том числе старых. Я протестировал функцию в браузерах IE, Edge, старом Safari, Chrome, Opera.

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

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

3. С помощью других JavaScript «плюгинов».

   Для проверка на поддержку браузером CSS свойства, можно использовать готовые JS плагины. К примеру, Modernizr.

4. С помощью парсинга User-Agent.

   Используя этот метод, мы можем определить браузер пользователя и вывести нужные значения.

Определения поддержки браузером того или иного CSS свойства позволяет более детально подстроить сайт под разные браузера и их версии. Ещё нужно помнить: чем меньше CSS кода мы используем в проекте, тем меньше мороки будет с корректировкой.

На этом закончу статью. Я рассказал про все варианты проверки, про которые знал. Если вы знаете ещё варианты — пишите про них в комментариях.

Автор: Yuri Spivak

Источник