At-правило

Обычное правило CSS выглядит как селектор и набор свойств. Но часть задач так не решить: нужно сказать «эти стили только для печати», «подключи такой-то шрифт», «вот анимация из трёх кадров». Для этого в языке есть отдельный тип конструкций, которые открываются словом с собачкой. Браузер видит имя после @ и понимает, по каким правилам читать продолжение.

Какие бывают

• Однострочные, заканчиваются точкой с запятой: @import подключает другую таблицу стилей, @charset указывает кодировку файла, @layer a, b; объявляет порядок слоёв.
• Условные, с блоком внутри: @media применяет стили по характеристикам экрана, @supports — если браузер поддерживает свойство, @container — по размеру родительского контейнера.
• Описательные: @font-face описывает шрифт, @keyframes — кадры анимации, @page — поля страницы при печати.

Пример

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-display: swap;
}

@supports (display: grid) {
  .catalog { display: grid; }
}

@media print {
  .header, .footer { display: none; }
}

Здесь подключается собственный шрифт с показом запасного до загрузки, сетка включается только там, где она работает, а при печати скрываются шапка и подвал. Подробно о третьем случае — в статье про медиазапрос, а о том, как @layer меняет приоритеты, — в статье «Слой каскада».

Типичные ошибки

• @import в середине файла. Он работает, только если стоит в самом начале — до любых обычных правил. Иначе браузер его молча пропускает.
• Цепочки @import. Каждый импорт загружается лишь после того, как получен файл, где он объявлен, и отрисовка страницы ждёт всю цепочку. Надёжнее подключить файлы отдельными тегами link или собрать в один при сборке.
• Шрифт без font-display. Пока он грузится, текст может быть невидим. Значение swap сразу показывает системный шрифт.