Урок 33 · CSS

Стили только для печати

Меню, фоны и кнопки на бумаге не нужны. Текст, заголовок и ссылка — нужны.

Почему это следующий шаг

Движение уже можно убавить. Печать — ещё один режим той же страницы.

Как сделать

В @media print спрячь шапку, фильтр и кнопки. Фон статьи сделай белым, текст чёрным. У ссылки можно показать адрес через content: " (" attr(href) ")". Ширину колонки сними, чтобы принтер использовал лист. Картинки оставь, если без них пропадает смысл.

@media print {
  header, .toc, .lesson-nav { display: none; }
  body { background: #fff; color: #000; }
}

Что проверить

• В предпросмотре печати нет меню.
• Текст чёрный на белом.
• Адрес важной ссылки можно прочитать на бумаге.