Як адаптувати сторінку для друку?

Повне пояснення

Що це і навіщо

• Print‑сторінка потрібна, коли користувач хоче отримати фізичну копію контенту без зайвих елементів UI.

Ключові принципи

• Використання медіа‑запиту @media print.
• Сховання елементів, що не потрібні у друкованому вигляді (навігація, кнопки, фони).
• Налаштування шрифтів і розмірів для читабельності.

Як це працює

• Браузер під час друку застосовує стилі, оголошені в @media print.
• Інші правила залишаються без змін, тому сторінка виглядає так само на екрані.

Практика і реалізація

@media print {
  body {font-size:12pt; line-height:1.5;}
  nav, .sidebar {display:none;}
  a[href]:after {content:" (" attr(href) ")"; font-size:0.8em;}
}

Тестування

• Перевірка в DevTools → Rendering → Print preview.
• Використання window.print() у тестах Jest + Puppeteer.

Оптимізація продуктивності

• Уникайте надмірних @media print правил, щоб не збільшувати розмір CSS.

Accessibility

• Додавайте aria-hidden="true" до елементів, що сховані в друкованому вигляді.

Безпека та валідація

• Переконайтеся, що у @media print не містяться небезпечних скриптів.

Типові помилки й edge cases

• Забудьте про display:none у @media print, що призводить до порожніх сторінок.
• Не забувайте про page-break-before/after для контролю розбиття.

Cheatsheet + follow‑up питання

• @media print { ... }
• page-break-before: always;
• Як забезпечити, щоб посилання в друкованому вигляді містили URL? – використайте a[href]:after.