Директивы CSS
Директивы — это конструкции, которая позволяет создавать в CSS инструкции
для изменения отображения либо поведения элементов страницы.
Директива начинается со знака @
, за которым следует одно из служебных слов.
Это общий синтаксис, которому следуют все директивы.
Обычные правила
Такие директивы следуют стандартному синтаксису:
@[КЛЮЧЕВОЕ СЛОВО] (ПРАВИЛО);
@charset
Эта директива определяет кодировку, используемую браузером. Это очень удобно, если
таблица стилей содержит символы, не входящие в ASCII (например UTF-8).
Обратите внимание, что кодировка указанная в HTTP-заголовке
переопределяет любые @charset
, заданные в вашей таблице стилей.
@charset "UTF-8";
@import
Эта директива сообщает таблице стилей о необходимости запросить и включить
в себя внешний CSS-файл, причём содержимое этого файла будет добавлено
непосредственно в то место, где находится @import
.
@import 'global.css';
Учитывая популярность CSS-препроцессоров поддерживающих @import
,
нужно помнить о том, что препроцессоры трактуют правило иначе, чем это
делает обычный CSS. Препроцессор запрашивает все импортируемые файлы,
обрабатывает их и отдаёт на выходе один CSS-файл. Обычный CSS обрабатывает
каждый @import
как отдельный HTTP-запрос для каждого отдельного файла.
@namespace
Эта директива особенно полезна для применения CSS к XML HTML (XHTML), с его помощью XHTML-элементы могут быть использованы как CSS-селекторы.
/* Пространство имён для XHTML */
@namespace url(http://www.w3.org/1999/xhtml);
/* Пространство имён для SVG встроенного в XHTML */
@namespace svg url(http://www.w3.org/2000/svg);
Вложенные правила
Вложенные директивы содержат подмножество дополнительных объявлений, которые могут служить условиями для конкретных ситуаций.
@[KEYWORD] {
/* Вложенные утверждения */
}
@document
Эта директива определяет условия для стилей, которые применяются к конкретной странице. Например, можно задать URL страницы и затем настроить стили именно для неё. На других страницах эти стили будут проигнорированы.
@document
/* Устанавливает правила для конкретной страницы */
url(http://css-tricks.com/),
/* Устанавливает правила для страниц, чей URL начинается с … */
url-prefix(http://css-tricks.com/snippets/),
/* Устанавливает правила для всех страниц, принадлежащих домену */
domain(css-tricks.com),
/* Правила для всех страниц с протоколом шифрования */
regexp("https:.*")
{
/* Описание стилей */
body { font-family: Comic Sans; }
}
На момент написания статьи поддержка @document
была довольно скудной:
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
Нет | Нет | -moz |
Нет | Нет | Нет | Нет |
@font-face
Эта директива позволяет загружать пользовательские шрифты для использования на странице. Такие шрифты по-разному поддерживаются браузерами, однако директива поддерживает разные условия, которые позволяют подключать и использовать эти шрифты.
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}
@keyframes
Эта директива является базовым для создания покадровой анимации, позволяя задавать начальные, конечные и промежуточные шаги CSS-анимации.
@keyframes pulse {
0% {
background-color: #001f3f;
}
100% {
background-color: #ff4136;
}
}
@media
В этой директиве находятся условные выражения, применяющие определённые стили в зависимости от характеристик экрана. Эти выражения могут содержать, например, размеры экрана, что может пригодиться для создания адаптивных стилей для различных устройств:
/* iPhone в портретной и альбомной ориентации */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
.module { width: 100%; }
}
Эта же директива позволит добавлять стили только при печати документа:
@media print {
}
@page
Эта директива определяет стили для отдельных страниц при выводе на печать.
Например, она содержит специальные псевдоэлементы для обращения к первой
(:first
), а также к левой (:left
) и правой (:right
) страницам при
печати двух страниц на листе.
@page :first {
margin: 1in;
}
@supports
Эта директива определяет поддерживает ли браузер те или иные возможности, и, если поддерживает, применяет к элементам заданные стили. Как Modernizr, но заточенный на проверку CSS-свойств.
/* Проверка одного условия */
@supports (display: flex) {
.module { display: flex; }
}
/* Проверка нескольких условий */
@supports (display: flex) and (-webkit-appearance: checkbox) {
.module { display: flex; }
}
К сожалению, @supports
не очень хорошо поддерживается браузерами:
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
28+ | Нет | 31+ | 12.1+ | Edge | 4.4+ | Нет |
Подводя итоги
Директивы позволяют делать с помощью CSS классные и безумные вещи. И хотя представленные здесь примеры демонстрируют некоторые базовые возможности, мы можем видеть как их можно использовать для создания стилей для самых разных условий, позволяя разрабатывать удобные интерфейсы и варианты взаимодействия в зависимости от разных сценариев.