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

Оригинальная статья — https://habrahabr.ru/users/yuri_spiva…

Автор — Юрий Спивак


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

  1. С помощью функции CSS.supports(), про которую я упоминал выше.Технология работы функции почти не отличается от работы директивы. Отличие состоит в том, что функция CSS.supports() возвращает true, если свойство поддерживается, и false — если нет.Есть два варианта использования функции. Первый включает передачу двух аргументов — свойства и его значения:Если браузер поддерживает display: flex, то скрипт вернёт true.

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

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

    Примечание: так же, как и директива @supports, эта функция новая и IE её не поддерживает.

  2. С помощью применения новых свойств элементу через JavaScript.Когда-то я заметил, что браузер не может установить свойству элемента значение, которое не поддерживает. Таким образом, если, после применения нового значения свойству через JavaScript, оно не изменилось, то браузер не поддерживает данное значение.В итоге у нас выходит следующая функция:

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

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

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

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

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

  3. С помощью других JavaScript «плюгинов».Для проверка на поддержку браузером CSS свойства, можно использовать готовые JS плагины. К примеру, Modernizr.
  4. С помощью парсинга User-Agent.Используя этот метод, мы можем определить браузер пользователя и вывести нужные значения.

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

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