Сегодня вас ждёт заметка из серии советов по дизайну. И дизайну не графическому, а дизайну интерфейса. Думаю, многие из вас хоть раз распечатывали страницу сайта прямо из браузера. Последовательность обычно такая: нажать 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>
Несколько лет назад я был приятно удивлён, узнав о существовании такой функции. Это удобно и достаточно просто, поэтому рекомендую вам её к использованию.
Комментариев: 8 ↓
Вовсе не обязательно указывать для каждой картинки класс. В грамотной верстке почти к любому элементу можно получить доступ из CSS без дополнительных изголений. С другой стороны, если печать страницы планируется, то верстка будет несколько другой.
img[src*="/ban/"]Красиво, но сам знаешь где это не будет работать :)
Максим, именно, при ГРАМОТНОЙ верстке. Из 10 последних проектов в 5 вёрстку приходилось доделывать, при том, что я плачу за неё обычно выше средней рыночной стоимости, надеясь на качество.
А где работать не будет, что-то я не понял?
img[src*="/ban/"]
А действительно смысл от этого, если в IE все равно не будет работать, если не ошибаюсь (сам не верстальщик). Ведь очень многие его используют (особенно за пределами России и СНГ).
madFobos, давно вас не слышал. Если обращаться к объекту по его классу, он будет скрываться и в Internet Explorer. А вариант с маской в IE я не опробывал, т.к. он чаще используется тогда, когда нет доступа к html и нужно решать вопросы исключительно через CSS.
Да отдыхал я от фриланса и вообще от всего :) Я-то как раз про маску говорил, что от нее смысла немного, т.к. в IE баннеры таким способом на печати не уберутся.
Понятно, и как дорожка?
Убирать лучше классами, они везде работают.
Дорожка отлично :) Бегаю каждое утро по 15 минут… Выносливость и дыхалка точно развиваются. 1.5 км вообще уже без проблем можно пробежать :)
Супер, а я всё присматриваю…
Пожалуй, я отвечу