Поддержка браузерами того или иного CSS свойства до сих пор остаётся одной из основных проблем веб-вёрстки, так как корректировка под различные браузера, особенно старые, занимает очень много времени и портит настроение. Поэтому многие верстальщики ограничиваются поддержкой IE с помощью условных комментариев, а некоторые вообще забивают на старые браузера и блокируют доступ к своему сайту со старых версий выводя сообщение типа «Ваш браузер устарел...».
В этой статье я расскажу, как можно проверить, поддерживает ли браузер то или иное CSS свойство.
Долгое время проверить поддержку с помощью одного CSS было невозможно. Но в 2013 году Firefox, Chrome и Opera «объявили» о поддержки специальной директивы под названием @supports и её JavaScript аналога — функции
Общий вид директивы
Пример использования
Если браузер поддерживает свойство
Ключевое слово not
С помощью ключевого слова not, можно осуществить проверку на отсутствие поддержки какого-либо свойства.
Если браузер не поддерживает
Ключевое слово or
Используя ключевое слово or, можно осуществить проверку на поддержку хотя бы одного свойства из указанных.
Если браузер поддерживает
Ключевое слово and
Если указать ключевое слово and, то можно проверить поддержку браузером двух или более свойств сразу.
Если браузер поддерживает
Множественные проверки и условия
Если браузер поддерживает
Есть четыре варианта на поддержку браузером CSS свойства с помощью JavaScript, про которые я знаю.
Определения поддержки браузером того или иного CSS свойства позволяет более детально подстроить сайт под разные браузера и их версии. Ещё нужно помнить: чем меньше CSS кода мы используем в проекте, тем меньше мороки будет с корректировкой.
На этом закончу статью. Я рассказал про все варианты проверки, про которые знал. Если вы знаете ещё варианты — пишите про них в комментариях.
В этой статье я расскажу, как можно проверить, поддерживает ли браузер то или иное 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, про которые я знаю.
- С помощью функции
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 её не поддерживает. - С помощью применения новых свойств элементу через 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) element.style.cssText = property + ':' + value; // Вносим новое свойство в style элемента else return false; // Если браузер не поддерживает свойство, то возвращаем false // Если браузер поддерживает данное значение для указанного свойства, то значения будут равны return element.style[property] === 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 свойства и может применить.
- С помощью других JavaScript «плюгинов».
Для проверка на поддержку браузером CSS свойства, можно использовать готовые JS плагины. К примеру, Modernizr.
- С помощью парсинга User-Agent.
Используя этот метод, мы можем определить браузер пользователя и вывести нужные значения.
Определения поддержки браузером того или иного CSS свойства позволяет более детально подстроить сайт под разные браузера и их версии. Ещё нужно помнить: чем меньше CSS кода мы используем в проекте, тем меньше мороки будет с корректировкой.
На этом закончу статью. Я рассказал про все варианты проверки, про которые знал. Если вы знаете ещё варианты — пишите про них в комментариях.