- PVSM.RU - https://www.pvsm.ru -
Проверка на поддержку конкретных технологий браузером с помощью JavaScript по праву считается наилучшей практикой при клиент-сайд разработке (Часто используют другой способ, заключающийся в проверке из какого браузера пользователь просматривает страницу — Прим. пер.), но, к сожалению, такую проверку нельзя было сделать с использованием только лишь CSS. Firefox [1], Chrome [2] и Opera [3]недавно объявили о поддержке CSS директивы @supports
и CSS.supports
(JavaScript), которые помогут разработчикам определять справится ли браузер пользователя с CSS свойством или нет. Давайте посмотрим на них в деле!
Проверить свой браузер [4]
(Если надпись зеленая, то ваш браузер поддерживает @supports, если красная, то нет. Также можно посмотреть на сообщение в консоли браузера.)
Синтаксис директивы @supports
такой же, как и у @media
запросов:
@supports(prop:value) {
/* стили */
}
Директива @supports
предоставляет разработчикам различные варианты ее использования.
@supports (display: flex) {
div { display: flex; }
}
Это наиболее простой способ использования.
@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 аналогом для @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
— описание расположения элементов. Некоторые новейшие браузеры поддерживают flexbox [5], в то время как остальные плетутся позади. В таком случае можно написать следующий код:
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
, вам следует потратить какое-то время на установку самой последней 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 [6]
http://dev.w3.org/csswg/css-conditional/#at-supports [7]
Твиттер, посвященный технологии [8]
О flexbox на хабре [9]
Автор: lkart
Источник [10]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/33087
Ссылки в тексте:
[1] Firefox: http://mcc.id.au/blog/2013/04/supports-enabled-by-default
[2] Chrome: https://twitter.com/paul_irish/status/303541608895348736
[3] Opera : http://dev.opera.com/articles/view/native-css-feature-detection-via-the-supports-rule/
[4] Проверить свой браузер: http://davidwalsh.name/demo/css-supports.php
[5] flexbox: http://dev.w3.org/csswg/css-flexbox/
[6] http://caniuse.com/css-featurequeries: http://caniuse.com/css-featurequeries
[7] http://dev.w3.org/csswg/css-conditional/#at-supports: http://dev.w3.org/csswg/css-conditional/#at-supports
[8] Твиттер, посвященный технологии: https://twitter.com/supports
[9] О flexbox на хабре: http://habrahabr.ru/post/153925/
[10] Источник: http://habrahabr.ru/post/178021/
Нажмите здесь для печати.