CSS Conditional Rules

CSS Conditional Rules, как следует из названия, являются условными конструкциями, которые можно применять в самом CSS. Они реализуют проверку поддержки свойств текущим браузером с возможностью группировать условные выражения с помощью логических операторов and, or и not. В этом посте хотелось бы рассказать, кроме прочего, о синтаксисе этого модуля CSS3 и текущей поддержке его браузерами.

Что нового?

Итак, в чем качественное отличие CSS Conditional Rules от, например, условных комментариев? Я бы выделил два главных:

• это проверка поддержки указанных свойств браузером, а не проверка имени и версии браузера.
• это реализация условных конструкций прямо в CSS, таким образом, мы можем управлять «потоком применения» свойств CSS, а не выбираем в HTML-коде какие заранее подготовленные для разных браузеров файлы стилей подключить; проще говоря, если нам нужно реализовать свойство, неподдерживаемое всеми необходимыми браузерами, у нас появляется гибкий инструмент для degradation.

А на практике?

Синтаксис прост. Например, у нас есть свойство font-size, в котором мы хотим использовать функцию calc() для вычисления размера шрифта, а в качестве аргумента этой функции мы хотим передать выражение, которое вычисляет размер шрифта от размера шрифта корневого элемента body. Но сколько браузеров сегодня это поддерживает? Маловато. А что делать с остальными? С использованием условий CSS3 вопрос получит такой ответ:

body {
    font-size: 14px;
}
@supports (font-size: calc(1rem + 12px)) {
    h1 {
        font-size: calc(1rem + 12px);
    }
}
@supports not (font-size: calc(1rem + 12px)) {
    h1 {
        font-size: 26px;
    }
}

Пример избыточен, но зато видна логика. Правило @supports предваряет условную конструкцию. Условным выражением считается то, что находится в круглых скобках, при этом круглые скобки всегда обязательны. Мы можем комбинировать условные выражения с помощью операторов and и or, а также отрицать выражения с помощью not.

При этом для избежания ситуаций, когда составленное вами условие можно трактовать не единственным способом, необходимо группировать условия с помощью круглых скобок, это понятнее на примере. Рассмотрим пример из спецификации:

/* Это неправильный код! */
@supports (transition-property: color) or
          (animation-name: foo) and
          (transform: rotate(10deg)) {

}

Казалось бы, синтаксис верный, чего же боле? Проблема в том, что эту конструкцию можно трактовать по разному. Что мы имели ввиду: нам нужна поддержка [(transition или animation) и (transform)] или [(transition) или (animation и transform)]? Неизвестно. Именно поэтому мы должны использовать круглые скобки так же, как я сделал это только что, описывая возможные варианты. Нижеследующие варианты того же кода будут правильными.

@supports ((transition-property: color) or
          (animation-name: foo)) and
          (transform: rotate(10deg)) {

}

@supports (transition-property: color) or
          ((animation-name: foo) and
          (transform: rotate(10deg))) {

}

Ну и когда?

А теперь о статусе поддержки на данный момент. Сама спецификация находится в статусе рабочего черновика. В стабильных версиях сегодня это не поддерживает никто. 3 августа поддержка @supports появилась в Firefox 17.0a1, то есть сейчас она есть в ветке Firefox Aurora и где-нибудь в октябре будет в Beta. Про поддержку другими браузерами я пока ничего не слышал (быть может, кто-то из хабражителей подскажет). В самом же Firefox 17 эта опция может быть отключенной в настройках, если разработчики решат, что спецификация еще недостаточно стабильна.

UPD: в бета-версии Opera 12.10 появилась поддержка @supports.