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] {
  /* Вложенные утверждения */
}

@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;
}

Подводя итоги

Директивы позволяют делать с помощью CSS классные и безумные вещи. И хотя представленные здесь примеры демонстрируют некоторые базовые возможности, мы можем видеть как их можно использовать для создания стилей для самых разных условий, позволяя разрабатывать удобные интерфейсы и варианты взаимодействия в зависимости от разных сценариев.