Сегодня вас ждёт заметка из серии советов по дизайну. И дизайну не графическому, а дизайну интерфейса. Думаю, многие из вас хоть раз распечатывали страницу сайта прямо из браузера. Последовательность обычно такая: нажать Ctrl+P, ждать минуту, потом догадаться вставить бумагу в принтер, снова нажать 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>

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

Коменти

Илона

Спасибо большое! Ваша статья очень помогла :)

Дедушка

Супер, а я всё присматриваю…

madFobos

Дорожка отлично :) Бегаю каждое утро по 15 минут… Выносливость и дыхалка точно развиваются. 1.5 км вообще уже без проблем можно пробежать :)

Дедушка

Понятно, и как дорожка?
Убирать лучше классами, они везде работают.

madFobos

Да отдыхал я от фриланса и вообще от всего :) Я-то как раз про маску говорил, что от нее смысла немного, т.к. в IE баннеры таким способом на печати не уберутся.

Дедушка

madFobos, давно вас не слышал. Если обращаться к объекту по его классу, он будет скрываться и в Internet Explorer. А вариант с маской в IE я не опробывал, т.к. он чаще используется тогда, когда нет доступа к html и нужно решать вопросы исключительно через CSS.

madFobos

img[src*=”/ban/”]

А действительно смысл от этого, если в IE все равно не будет работать, если не ошибаюсь (сам не верстальщик). Ведь очень многие его используют (особенно за пределами России и СНГ).

Дедушка

Максим, именно, при ГРАМОТНОЙ верстке. Из 10 последних проектов в 5 вёрстку приходилось доделывать, при том, что я плачу за неё обычно выше средней рыночной стоимости, надеясь на качество.

А где работать не будет, что-то я не понял?

Максим Покровский

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

img[src*="/ban/"]
Красиво, но сам знаешь где это не будет работать :)