Раньше у веб-дизайнера была возможность задавать стили веб-сайту только с помощью свойств и их значений. Теперь же все стало несколько сложнее, а скоро станет еще сложнее благодаря условным инструкциям CSS, которыми занимаются разработчики спецификаций CSS. Этот урок рассказывает о новых свойствах CSS, которые могут не поддерживаться некоторыми браузерами. Обратите на это внимание.

Для начала коротко расскажем о, вероятно, уже известных Вам media queries. Это условные инструкции, с помощью которых можно задать стили веб-странице, в зависимости от свойств компьютера пользователя. Например, можно задать следующие условные инструкции в файле стилей CSS:

@media screen and (min-width: 1000px) {

   /* CSS Goes here! */
}

Код, который помещен в фигурные скобки применится только к экранам с шириной более 1000px. Есть и другие media queries, касающиеся разрешения и других свойств. Вероятно, Вы знакомы со многими из них. Но Вы можете еще не знать, что спецификация условных инструкций также рассказывает о двух других условных инструкциях. Пока что они поддерживаются только браузером Firefox: начиная с версии 6.0 поддерживается условная инструкция @document, а с версии 17.0 — @supports.

Условная инструкция @supports

Предположим, что один браузер поддерживает определенное свойство, а другой — не поддерживает. Тогда понадобится обходной путь в виде скрипта для браузеров, которые не поддерживают это свойство. Так вот, условная инструкция @supports может с этим помочь, проверяя, поддерживается ли указанное свойство в данном браузере.

Например, по какой-то причине Вы хотите, чтобы некоторый код CSS применялся только к браузеру, который поддерживает модель гибкого окна CSS. Тогда можно сделать следующее:

@supports (display: flex) {
    /* Put some CSS here */
}

Код CSS в фигурных скобках будет задействован только если браузер поддерживает модель гибкого окна CSS. После этого можно задать другой код CSS, который переписывает вышеуказанный код CSS, если браузер не поддерживает модель гибкого окна CSS, например:

/* If flexbox isn't supported, backup CSS goes here */
@supports (display: flex) {
    /* Flexible box CSS goes here */
}

Как и с media queries, можно осуществлять проверку для нескольких условий, используя операторы «или» и «и»:

@supports (display: flex) and (box-shadow: 0 0 10px rgba(0,0,0,0.1)) { 
    /* If box shadows and the flex box are supported */
}
@supports ((display: flex) and (animation-duration: 1s)) or ((diplay: flex) and (transition-duration: 1s)) {
    /* If flex box and animation duration are supported, or if flex box and transition duration are supported */
}

Отрицание 

Можно проверить, поддерживает ли браузер определенное свойство, используя оператор «не». Например, код CSS в фигурных скобках ниже будет применен, только если модель гибкого окна не поддерживается:

@supports not(display: flex) {
    /* Back up CSS goes here */
} 

Условная инструкция @document

Условная инструкция @document задает стили указанной странице. Например, с ее помощью станет возможно задать стили определенной странице с помощью CSS:

@document url('http://www.inserthtml.com/') {
    /* CSS goes here */
}

Или можно применить стили ко всему, что расположено в определенной папке:

@document url-prefix('http://www.inserthtml.com/css') {
    /* CSS goes here */
}