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

в 0:20, , рубрики: css, javascript, support

Поддержка браузерами того или иного 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

Источник


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js