26 апреля 2009 :Сайт в печать: как подготовить файл стилей для принтеров.

Если на вашем сайте находится в основном текстовое содержание (блог, новости, статьи), то стоит задуматься о поддержке печатного варианта сайта, т.е. для того чтобы люди могли распечатать интересную статью на бумажку и читать по утрам (или перед сном, или в метро, или не скажу где). Сделать это очень просто, достаточно подключить отдельный .css стиль после основного с указанием media="print". Например вот так подключаются стили у меня:

<link rel="Stylesheet" href=/templates/style.css type="text/css">
<link rel="Stylesheet" href=/templates/print.css type="text/css" media="print">

Для просмотра эффекта выберите "Предварительный просмотр:".

Теперь начинаем кромсать в стилях всё ненужное и добавлять нужное:

• убираем все фоны и блоки с рисунками, они никому не нужны в печати, логотип можно оставить если он не сильно "цветастый". Если логотип всё таки решите оставить, убедитесь насколько он будет читабельно смотреться при печати в ч/б режиме.
• правим позиционирование элементов, неплохо убрать свойство float где найдёте, т.к. если допустите ошибку ваш контент может вылететь за рамки печати =).
• у меня даты записей показываются в 2х вариантах: картинкой и просто текстом как раз для версии для печати.
• спрячьте (display:none) все ненужные элементы, такие как меню и футер. У меня в меню все ссылки показываются разными классами, поэтому я оставляю отображение только активного элемента, он покажет пользователю из какого раздела страница была напечатана.
• можете также добавить текст "версия для печати", чтобы показать пользователю что вы позаботились о нём.
• и наконец позаботьтесь о ссылках, так как на бумаге их кликать никто не сможет. Выделите ссылки жирным начертанием и/или контрастным цветом чтобы ссылка не была блеклой в чёрно-белом варианте.

Из проблем со ссылками может остаться проблема непонятности назначения ссылок, на случай если вы ссылаетесь на документы словами "так" или "тут". Т.е. пользователь не будет знать на какое содержание вы ссылаетесь, поэтому постарайтесь описывать в тексте что пользователь найдёт на странице, ему и в браузере кликать лень. Если всё таки такие ссылки получились можно воспользоваться селекторами CSS3 - они работают в ie8, Мозилле, опере и сафари.

Селектор a:link:after может вставить контент после ссылки, например так

#content a:link:after, #content a:visited:after {
content: " «ссылочка на: " attr(href) "» ";
font-size: 100%;
color: #520;
text-decoration:none;
font-weight:normal;
}

а выражение a[href^="/"]:after может выбрать только относительные ссылки, т.е. те которые начинаются со слеша "/"

#content a[href^="/"]:after {
content: " «ссылочка на: http://usabili.ru" attr(href) "» ";
}