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

Проверка на поддержку конкретных технологий браузером с помощью JavaScript по праву считается наилучшей практикой при клиент-сайд разработке (Часто используют другой способ, заключающийся в проверке из какого браузера пользователь просматривает страницу — Прим. пер.), но, к сожалению, такую проверку нельзя было сделать с использованием только лишь CSS. Firefox ^[1], Chrome ^[2] и Opera ^[3]недавно объявили о поддержке CSS директивы @supports и CSS.supports (JavaScript), которые помогут разработчикам определять справится ли браузер пользователя с CSS свойством или нет. Давайте посмотрим на них в деле!

Проверить свой браузер ^[4]
(Если надпись зеленая, то ваш браузер поддерживает @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 ^[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

Если вы горите желанием попробовать новые технологии вроде @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]