CSS стили для печати — media print

Привет. Не так давно мне понадобилось распечатать несколько страниц своего сайта и когда я попытался вывести их на печать, то был, мягко говоря, удивлен от увиденного. Если вы сейчас нажмете CTRL + P, то поймете чем идет речь. Дело в том, что очень давно при оптимизации сайта я благополучно выпилил все лишнее, в том числе и CSS стили для печати. Распечатать контент конечно можно, но там очень много лишнего. У себя я вряд ли что-то буду менять в этом плане, а для тех, кому это действительно необходимо, будем разбирать как сделать отображение печатной версии страниц максимально корректным.

@Media print CSS на примерах

Я уже писал о том, что такое медиа-запросы и как они работают, даже записывал видео, но там речь идет об адаптивности под мобильные гаджеты. Но в действительности принцип остается таким же. Нужно прописать отдельные CSS стили для печати и сделать это можно двумя способами.

• Media print в основном файле стилей
• С подключением отдельного файла

Первый вариант

1
2
3
4
5

@media print{
  .sidebar{
  display: none;
  }
}

В этом случае мы говорим браузерам, что эти CSS стили нужны лишь для печати страницы, в остальных случаях их учитывать не нужно.

Второй вариант

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

Здесь мы подключаем отдельный CSS файл, в котором записываем стили для печати. Пишем как обычно, без дополнительных media? мы это делаем при подключении.

Предпросмотр перед печатью страницы

По идее се, что нужно сделать, это нажать CTRL + P и уже будет видно как будет выглядеть распечатанная страница. Но в современных браузерах есть дополнительные инструменты, которые позволяют сделать эмуляцию печати. Давайте посмотрим как это сделать в Хроме. Жмем F12 Затем на 3 точки справа — More Tools — Renderig.

Затем листаем открывшуюся панель вниз и в самом низу ищем кнопку-переключатель, который и будет переключать стили.

Это поможет сделать CSS стили для печати гораздо быстрее. А вообще, далеко не всем сайтам это нужно. Если конечно вы намеренно не предлагаете пользователям распечатать контент. Тогда да, это даже необходимо. Если вы имеете свой сайт — проверьте CSS стили для печати, возможно они тоже не в лучшем виде.