Печатные стили

@media print: печать страниц из браузера, скрытие интерфейса, шрифты, принудительные разрывы и шпаргалка печати.

Уровень: средний 8 разделов 1 час

1. Как печатают сайты

Пользователь жмёт Ctrl+P — браузер печатает страницу. По умолчанию уходит «смесь»: интерфейс, реклама, синие ссылки, лишние страницы. Печатные стили @media print подчищают документ под бумагу.

@media print {
  .header, .sidebar, .footer, .btn { display: none; }
  .main { width: 100%; margin: 0; }
  a { color: #000; text-decoration: underline; }
}

2. Базовый сет печати

скрыть навигацию, футер, кнопки, формы, оверлеи;
главную область — полная ширина, без float/абсолютов;
тёмный фон → белый, тёмный текст → чёрный;
убрать border-image и фоны для экономии чернил.

.dark-mode { background: #fff !important; color: #000 !important; }
* { box-shadow: none !important; }

3. Разрывы страниц

Профессиональная печать контролирует, где заканчивается лист: avoid — не разрывать элемент, inside: avoid — абзац целиком, break-inside: avoid-page.

.card, li, blockquote {
  break-inside: avoid;    /* не рвать карточку/пункт серединой */
}
h2, h3 {
  break-after: avoid;     /* заголовок не остаётся на дне страницы */
}
.section {
  break-before: page;     /* начать с новой страницы */
}

4. Шрифты на бумаге

Печатный шрифт остаётся системным: отключите веб-шрифты (print не грузит woff2 в некоторых движках), используйте serif для читаемости.

@media print {
  body { font-family: Georgia, 'Times New Roman', serif; }
}

5. Ссылки в печати

Ссылки печатаются без «перехода по нажатию»: раскрывайте их в скобках через content после ссылки — полезно в документах-списках.

@media print {
  a[href^="http"]::after { content: " (" attr(href) ")"; }
}

6. Скрытие невидимых элементов

form controls, hovers-меню, тултипы, video — не печатаются: display: none;
iframe/embed — прятать (печать содержимого вёрстки некорректна);
рекламные и слайдер-блоки — убрать совсем;
спец alert-модалок (dialog) — перекрывать печать: display: none.

@media print {
  video, iframe, form, .modal { display: none !important; }
  .modal-overlay { position: static; }
}

7. Пробное печатание

Проверяют печать не «на глаз», а Ctrl+P → предпросмотр: проверьте разрывы, скрытия, шрифты. DevTools имеет печатную эмуляцию (осётриё режим устройства → media: print).

перед Ctrl+P сжимайте предпросмотр до 2–4 страниц;
разрывы элементов видно «крупно» в разметке — как отлаживать;
проверяйте и Настройки → печать: печатать фон (экономьте).

8. Чек-лист печати

@media print подключён отдельно или в конце стилей;
интерфейсные блоки скрыты;
фоны и тени отключены;
разрывы страниц расставлены (break-inside);
шрифты печатаются и читаемы;
ссылки раскрыты (при необходимости);
предпросмотр прошёлся по 2–3 страницам.

Что дальше

Курс завершён.

← Вернуться к курсам