Новая CSS директива @supports

Проверка на поддержку конкретных технологий браузером с помощью JavaScript по праву считается наилучшей практикой при клиент-сайд разработке (Часто используют другой способ, заключающийся в проверке из какого браузера пользователь просматривает страницу — Прим. пер.), но, к сожалению, такую проверку нельзя было сделать с использованием только лишь CSS. Firefox, Chrome и Opera недавно объявили о поддержке CSS директивы @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 на хабре