At-ключевое слово

Термин из спецификации CSS Syntax, которая описывает, как браузер разбирает таблицу стилей. Сначала текст режется на токены — минимальные значимые кусочки: идентификаторы, числа, строки, скобки. Встретив @, за которым идёт имя, токенизатор выдаёт особый токен — at-ключевое слово. Для парсера это сигнал: дальше не обычное правило с селектором, а особая конструкция.

Верстальщику понятие нужно редко, но оно помогает понять, почему CSS устроен именно так и как ведут себя ошибки и незнакомые конструкции.

Как парсер видит строку

@media (min-width: 768px) {
  .menu { display: flex; }
}
/* @media — at-ключевое слово с именем «media»
   (min-width: 768px) — прелюдия
   { … } — блок правила */

Имя после @ определяет, как читать остальное. Для media прелюдия — список медиазапросов, для import — адрес файла, для keyframes — имя анимации, внутри которой идут ключевые кадры.

Чем отличается от at-правила

At-ключевое слово — только «заголовок», одно слово с собачкой. At-правило — вся конструкция целиком: ключевое слово, прелюдия и либо блок в фигурных скобках, либо точка с запятой в конце. Можно сказать, что ключевое слово задаёт тип правила, а правило — это уже готовая инструкция для браузера.

Незнакомые @-слова

Если браузер встречает at-ключевое слово, которого не знает, он аккуратно пропускает всё правило до конца блока или точки с запятой и продолжает разбор. Поэтому старые браузеры не ломаются на новых конструкциях, а лишь игнорируют их.

На этом же держатся вендорные варианты вроде @-webkit-keyframes, а также синтаксис препроцессоров. @mixin, @include и @use в Sass выглядят как at-ключевые слова, но браузер их не понимает: их обрабатывает CSS-препроцессор при сборке, и в итоговый файл они попадать не должны. Если такая строка всё же оказалась в готовом CSS, значит, файл подключили без компиляции.