Делаем версию для печати через CSS

Опубликовано: 11 Июл 2015

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

Некоторые дизайнеры решают этот вопрос так: для каждой страницы создаётся отдельная версия для печати. Чаще всего это документ, в который не вставляются баннеры, меню и остальные лишние для печати элементы страницы.

Зачем делать отдельную версию

Если страница большая, то возможен вариант, когда она не вмещается на А4 и распечатается только до половины, а остальная часть будет на втором листе. Убирая лишние блоки перед печатью, мы сэкономим место на бумаге, краску в принтере и нервные клетки.

Кроме того, разное разрешение экранов пользователей не позволит нам знать, как именно распечатается тот или иной элемент. Поэтому я бы советовала убирать всё лишнее и быть уверенными, что все распечатки будут одинаковыми.

Как указать, что печатать?

Обычно благодаря классам и идентификаторам объектов мы можем спрятать практически любой элемент страницы. Чтобы не спрятать лишнего, я бы рекомендовала скрывать шапку с навигацией, логотип сайта, боковую панель (если она есть) и футер.

Таким образом в печать уйдёт то, что находится в области контента. Всем элементам, которые вы хотите спрятать при печати, присваивайте свой класс, например «no-print».

<img src="/ban/sobchak.jpg" class="no-print">

Также мы можем указать, что на печать не должны отправляться изображения, находящиеся в папке с баннерами. Делается это с помощью маски. Для этого надо указать в CSS:

img[src*="/ban/"] { display: none !important; }

Этим кодом мы скроем все баннеры, которые будут встречаться в любом месте на странице. Таким же образом нужно сделать невидимыми остальные элементы.

.no-print { display: none !important; }

Применение на практике

Для того, чтобы файл print.css обрабатывался только во время отправки на печать, нужно указать его в <head> таким образом:

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

На странице мы можем вставить ссылку на печать:

<a href="javaScript:window.print();">Распечатать эту страницу</a>

Комментарии (0)


Оставить комментарий




Разрешённые теги: <b><i><br>Добавить новый комментарий: