Стили для печати: @media print и минимизация лишнего вывода

Зачем нужны стили для печати? 🖨️

Когда пользователь нажимает Ctrl+P, браузер пытается адаптировать страницу для печати. Но без специальных стилей результат часто выглядит ужасно:

🔥 Лишние элементы (меню, баннеры, футеры)
🌈 Фон, который "съедает" чернила
📜 Длинные тексты, которые обрезаются

Решение — @media print!

@media print {
  /* Здесь живут стили только для печати */
}

Базовые приёмы оптимизации

1. Удаляем ненужные блоки

@media print {
  .header, .sidebar, .ad-banner {
    display: none !important;
  }
}

💡 Используйте !important — некоторые браузеры игнорируют обычные стили при печати.

2. Фон и цвет текста

Чёрно-белая печать — стандарт:

@media print {
  body {
    color: black !important;
    background: white !important;
  }

  a {
    color: #000 !important;
    text-decoration: underline !important;
  }
}

🎨 Если цвет важен (например, графики), явно укажите print-color-adjust: exact;.

Контролируем разрывы страниц

1. Запрещаем разрывы внутри секций

@media print {
  .article {
    page-break-inside: avoid;
  }
}

2. Разрывы до/после элементов

@media print {
  h2 {
    page-break-after: avoid; /* Не разрывать после заголовка */
  }

  .chapter {
    page-break-before: always; /* Новая страница перед главой */
  }
}

⚠️ Устаревшие свойства break-before и break-after работают аналогично, но page-break-* поддерживается лучше.

Специальные CSS-свойства для печати

1. Нумерация страниц

@page {
  margin: 2cm;

  /* Верхний колонтитул */
  @top-center {
    content: "Моя крутая статья";
  }

  /* Номер страницы */
  @bottom-right {
    content: counter(page);
  }
}

2. Размер и ориентация страницы

@page {
  size: A4 landscape; /* Альбомная ориентация */
}

Реальный пример: стилизация резюме

Допустим, у вас есть HTML-резюме. Вот как его оптимизировать:

@media print {
  /* Скрываем ненужное */
  .social-links, .print-button {
    display: none;
  }

  /* Улучшаем читаемость */
  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  /* Разрывы между разделами */
  section {
    margin-bottom: 1cm;
    page-break-inside: avoid;
  }

  /* Ссылки в тексте */
  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}

🔗 Подсказка: attr(href) выводит URL ссылки прямо в тексте — полезно для распечаток.

Тестирование без принтера

Chrome DevTools: Откройте вкладку Rendering → эмулируйте print в CSS Media.
PDF-экспорт: Нажмите Печать → выберите «Сохранить как PDF».

/* Временно для отладки */
@media print {
  body { outline: 2px solid red; } /* Подсветка областей */
}

Итоговый чеклист

✅ Удалите всё лишнее через display: none
✅ Оптимизируйте цвета для ЧБ-печати
✅ Контролируйте разрывы страниц
✅ Добавьте нумерацию через @page
✅ Протестируйте в DevTools перед отправкой на принтер

Готово! Теперь ваши страницы будут выглядеть идеально даже на бумаге. 🚀

Если хотите глубже погрузиться в CSS, загляните на YouTube-канал Данилы Бежина — там есть разборы сложных случаев!