CSS @page — как работает
CSS @page: принцип работы, корректный синтаксис, практический сценарий, ограничения, ошибки и актуальная совместимость.
Суть темы
Практический смысл «@page» связан с тем, чтобы управлять условием, ресурсом или областью применения блока CSS. Правило @page управляет частью таблицы стилей на уровне, отличном от обычной декларации. Контрольная проверка «@page» проходит в карточке материала с длинным заголовком, а наблюдаемой точкой служит поведение без пользовательской таблицы стилей.
Проверяя «@page», соблюдайте правило: соблюдайте допустимое место @-правила и порядок относительно других правил. Для «@page» изменяйте одно условие за запуск и фиксируйте фактический результат.
Синтаксис @page
Минимальная запись «@page» нужна для отделения самой возможности от стилей и разметки проекта. Проверьте фрагмент отдельно перед переносом.
@page {
margin: 2cm;
}Как работает @page
Браузер обрабатывает «@page» в контексте области «CSS @-правила»: интерпретируется на уровне таблицы стилей, а не как обычное свойство элемента. Для «@page» наблюдения через поведение без пользовательской таблицы стилей и порядок фокуса в дереве доступности отделяют исходное условие от результата.
Проверка в проекте
- Соблюдайте допустимое место @-правила и порядок относительно других правил; результат относится непосредственно к «@page».
- Сравнить дерево доступности до и после добавления конструкции при разборе «@page».
- Проверьте «@page» в карточке материала с длинным заголовком через поведение без пользовательской таблицы стилей и запишите наблюдаемое изменение.
Используйте «@page», когда требуется управлять условием, ресурсом или областью применения блока CSS; подтвердите выбор предметной проверкой: соблюдайте допустимое место @-правила и порядок относительно других правил. Для «@page» более простой вариант предпочтителен, если он сохраняет тот же смысл и поведение.
Практика с @page
Перенесите «@page» в рабочем фрагменте интерфейса и испытайте его в карточке материала с длинным заголовком. Сначала воспроизведите правильный результат, затем намеренно добавьте риск для «@page»: неверное положение или синтаксис @page может сделать весь блок недействительным.
Сценарий: в карточке материала с длинным заголовком.
Ошибки при работе с @page
Устойчивость
Неверное положение или синтаксис @page может сделать весь блок недействительным — это предметный риск для «@page».
Доступность
Потеря содержимого при печати или отключении фоновых изображений при использовании «@page».
Каскад
Проверка только мышью и только на широком экране; для «@page» проверьте это отдельно.
Поддержка @page
Для «@page» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «@page»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1, источник 2.
Вопросы о @page
Как понять, что «@page» выбрано правильно?
«@page» выбрано правильно, когда оно решает задачу «управлять условием, ресурсом или областью применения блока CSS», сохраняет результат в карточке материала с длинным заголовком и проходит предметную проверку: соблюдайте допустимое место @-правила и порядок относительно других правил.
Нужен ли запасной вариант для «@page»?
Запасной вариант для «@page» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «@page» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.