Проверка на поддержку конкретных технологий браузером с помощью JavaScript по праву считается наилучшей практикой при клиент-сайд разработке (Часто используют другой способ, заключающийся в проверке из какого браузера пользователь просматривает страницу — Прим. пер.), но, к сожалению, такую проверку нельзя было сделать с использованием только лишь CSS. Firefox, Chrome и Opera недавно объявили о поддержке CSS директивы
Проверить свой браузер
(Если надпись зеленая, то ваш браузер поддерживает
Синтаксис директивы
Директива
Это наиболее простой способ использования.
Множественные проверки могут быть осуществлены при помощи цепочки слов
Если необходимо выполнить несколько множественных проверок, то, как и во многих языках программирования, можно использовать скобки:
Синтаксис условий
JavaScript аналогом для
Второй вариант требует передачи в качестве аргумента целой строки:
Перед использованием JavaScript аналога важно сперва проверить поддержку этой технологии браузером. Opera использует другое название метода, что слегка увеличивает код:
В большинстве случаев, лучший способ использовать
Примеры иных удачных вариантов использования
Если вы горите желанием попробовать новые технологии вроде
http://caniuse.com/css-featurequeries
http://dev.w3.org/csswg/css-conditional/#at-supports
Твиттер, посвященный технологии
О flexbox на хабре
@supports
и CSS.supports
(JavaScript), которые помогут разработчикам определять справится ли браузер пользователя с CSS свойством или нет. Давайте посмотрим на них в деле!Проверить свой браузер
(Если надпись зеленая, то ваш браузер поддерживает
@supports
, если красная, то нет. Также можно посмотреть на сообщение в консоли браузера.)CSS @supports
Синтаксис директивы
@supports
такой же, как и у @media
запросов:@supports(prop:value) {
/* стили */
}
Директива
@supports
предоставляет разработчикам различные варианты ее использования.Простая проверка свойства
@supports (display: flex) {
div { display: flex; }
}
Это наиболее простой способ использования.
Ключевое слово not
@supports
в паре со словом not
осуществляет проверку на отсутствие поддержки какого-либо свойства:@supports not (display: flex) {
div { float: left; } /* задан альтернативный стиль */
}
Множественные проверки и условия
Множественные проверки могут быть осуществлены при помощи цепочки слов
or
и and
:/* or */
@supports (display: -webkit-flex) or
(display: -moz-flex) or
(display: flex) {
/* добавляем сюда ваших клёвых стилей */
}
/* and */
@supports (display: flex) and (-webkit-appearance: caret) {
/* и сюда тоже добавим */
}
Если необходимо выполнить несколько множественных проверок, то, как и во многих языках программирования, можно использовать скобки:
/* and and or */
@supports ((display: -webkit-flex) or
(display: -moz-flex) or
(display: flex)) and (-webkit-appearance: caret) {
/* стили сюда */
}
Синтаксис условий
@supports
совпадает с таковым у @media
запросов.JavaScript CSS.supports
JavaScript аналогом для
@supports
является метод window.CSS.supports
. Есть два варианта его использования. Первый включает передачу двух аргументов — свойства и его значения:var supportsFlex = CSS.supports("display", "flex");
Второй вариант требует передачи в качестве аргумента целой строки:
var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)");
Перед использованием JavaScript аналога важно сперва проверить поддержку этой технологии браузером. Opera использует другое название метода, что слегка увеличивает код:
var supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false);
Использование @supports
В большинстве случаев, лучший способ использовать
@supports
это установить определенный резервный набор стилей и затем заменить их на другие, в случае если нужное свойство поддерживается. Прекрасный повод для использования @supports
— описание расположения элементов. Некоторые новейшие браузеры поддерживают flexbox, в то время как остальные плетутся позади. В таком случае можно написать следующий код:section {
float: left;
}
@supports (display: -webkit-flex) or
(display: -moz-flex) or
(display: flex) {
section {
display: -webkit-flex;
display: -moz-flex;
display: flex;
float: none;
}
}
Примеры иных удачных вариантов использования
@supports
появятся после того, как разработчики потратят больше времени на эксперименты с этой новой технологией.Подключение @supports
Если вы горите желанием попробовать новые технологии вроде
@supports
, вам следует потратить какое-то время на установку самой последней edge-версии браузера Canary, Firefox Nightly, или Opera Next. Opera 12.1, WebKit Nightly и Firefox Nightly — все они поддерживают @supports
. Старые версии Firefox предоставляют соответствующую поддержку после включения правила [layout.CSS.supports-rule.enabled]
.@supports
является долгожданным дополнением к спецификациям CSS и JavaScript. Определение поддержки конкретных технологий браузером — лучшая практика, и @supports
является более удобным и подходящим способом для этого, чем различные хаки. Подозреваю, что в ближайшие пару лет мы увидим всплеск использования директивы @supports
, одновременно с увеличением популярности и удобства flexbox.Полезные ссылки
http://caniuse.com/css-featurequeries
http://dev.w3.org/csswg/css-conditional/#at-supports
Твиттер, посвященный технологии
О flexbox на хабре