At-rules

At-rules это CSS операторы, которые показывают CSS как себя вести. Они начинаются со знака at, '@' (U+0040 КОММЕРЧЕСКОЕ AT), сопровождается идентификатором, и включает в себя всё до следующей точки с запятой, ';' (U+003B ТОЧКА С ЗАПЯТОЙ), или до следующего CSS блока, в зависимости от того, что наступит раньше.

/* Общая структура */
@ИДЕНТИФИКАТОР (ПРАВИЛО);

/* Пример: говорит браузеру использовать UTF-8 кодировку символов */
@charset "utf-8";

Существует несколько at-правил, обозначаемые идентификаторами, каждое из которых имеет свой синтаксис:

  • @charset — Определяет кодировку символов, используемый таблицей стилей.
  • @import — Сообщает движку CSS включить внешнюю таблицу стилей.
  • @namespace — Сообщает механизму CSS, что все его содержимое должно рассматриваться с приставкой пространства имен XML.
  • Вложенные at-правила — Подмножество вложенных операторов, которые могут использоваться как оператор таблицы стилей, а также внутри правил условной группы.
    • @media — Условное групповое правило, которое будет применять его содержимое, если устройство соответствует критериям условия, определенному с помощью медиазапроса.
    • @supports — Условное групповое правило, которое будет применять его содержимое, если браузер соответствует критериям данного условия.
    • @document — Условное групповое правило, которое будет применять его содержимое, если документ, в котором применяется таблица стилей, соответствует критериям данного условия.
    • @page — Описывает аспект изменений макета, который будет применен при печати документа.
    • @font-face — Описывает аспект внешнего шрифта для загрузки.
    • @keyframes — Описывает аспект промежуточных шагов в последовательности анимации CSS.
    • @viewport — Описывает аспекты области просмотра для устройств с маленьким экраном. (в настоящее время на стадии разработки проекта)
    • @counter-style — Определяет конкретные counter-styles, которые не являются частью предопределенного набора стилей.
    • @font-feature-values (плюс @swash, @ornaments, @annotation, @stylistic, @styleset и @character-variant)
      — Определите общие имена в font-option-alternates для функции, которая по-разному активируется в OpenType (at the Candidate Recommendation stage, but only implemented in Gecko as of writing)

Условные групповые правила

Как и значения свойств, каждое at-правило имеет свой синтаксис. Тем не менее, некоторые из них могут быть сгруппированы в специальную категорию, называемую Условные групповые правила. Эти операторы имеют общий синтаксис, и каждый из них может включать вложенные операторы - либо наборы правил, либо вложенные правила. Кроме того, все они передают общее семантическое значение - все они связывают некоторый тип условия, которое в любой момент оценивается как истинное или ложное. Если условие оценивается как истинное, то будут применяться все операторы в группе. Условные групповые правила описываются в CSS Conditionals Level 3 и в:

Поскольку каждая условная группа может также содержать вложенные операторы, может быть неопределенное количество вложений.

Характеристики

Specification Status Comment
CSS Conditional Rules Module Level 3 Кандидат в рекомендации Начальное определение
Compatibility Standard
Определение 'CSS At-rules' в этой спецификации.
Живой стандарт Стандартизирует @-webkit-keyframes.

Читайте также