Print Styles

Print styles — CSS-правила в медиазапросе @media print, которые определяют внешний вид страницы при печати или экспорте в PDF.

Зачем нужно

Браузер при печати использует те же стили, что и для экрана — навбар, боковое меню, рекламные блоки попадают в распечатку. Print styles позволяют скрыть лишнее, расставить разрывы страниц, переключить цветовую схему на чёрно-белую и добавить URL-ссылок, которые невидимы на экране. Это важно для счетов, договоров, статей и любого контента, который пользователь может печатать.

Где используется

  • Счета и квитанции
  • Статьи и документация
  • Резюме и портфолио
  • Юридические документы

Базовый шаблон

@media print {
  /* Скрыть навигацию, кнопки, рекламу */
  nav,
  header,
  footer,
  .sidebar,
  .btn,
  .cookie-banner {
    display: none !important;
  }

  /* Убрать фоновые цвета для экономии чернил */
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
  }

  /* Сброс шрифта на стандартный */
  body {
    font-size: 12pt;
    line-height: 1.4;
    font-family: Georgia, serif;
  }

  /* Избегать разрывов внутри параграфов и заголовков */
  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }

  h2, h3 {
    page-break-after: avoid;
    break-after: avoid;
  }
}

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

@media print {
  /* Разрыв перед элементом */
  .invoice {
    page-break-before: always;
    break-before: always;
  }

  /* Разрыв после элемента */
  .chapter {
    page-break-after: always;
    break-after: always;
  }

  /* Не разрывать элемент */
  .card, .table-row {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

Отображение URL ссылок при печати

@media print {
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }

  /* Не добавлять URL для якорных ссылок */
  a[href^="#"]::after,
  a[href^="javascript"]::after {
    content: "";
  }
}

Подключение отдельного файла

<link rel="stylesheet" href="print.css" media="print">

Или через @import:

@import url("print.css") print;

Размер страницы

@media print {
  @page {
    size: A4 portrait;
    margin: 15mm 20mm;
  }

  @page :first {
    margin-top: 30mm; /* первая страница с большим отступом */
  }
}

Частые ошибки

  1. Не скрыты элементы навигации — пользователь получает распечатку с меню и кнопками, которые не нужны
  2. Тёмный фон без переопределения — при печати тёмные фоны расходуют много чернил; всегда добавляйте background: transparent
  3. page-break-* без современного алиаса — свойства page-break-before/after/inside устарели; используйте break-before/after/inside с fallback

Связанные темы

Ресурсы