Стили для печати веб страницы

Стили для печати веб страницы
Стили для печати веб страницы
В наше сегодняшнее время принтер плотно вошел в нашу жизнь, сегодня не представляет такой трудности напечатать любой понравившийся материал как это было раньше. Если раньше надо было сохранить нужный файл или документ на флеш-карте, а потом пойти в компьютерный клуб и печатать там, то сегодня у каждого второго дома имеется принтер если не цветной то хотя бы черно-белый.
Поэтому при создании сайтов отдельное внимание обращается печати веб-страницы, так как любое удобство для посетителя это хорошо сказываеться на Ваш сайт.
Есть несколько правил которыми должны придерживаться при создании печатной версии сайта, ненужно слишком умудрят делать красивые картинки и так далее.
Вот основные правила печатной версии сайта:
  1. Никаких картинок
  2. Никаких кнопок
  3. Главное текст, а не графика

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

И так приступим:

Стили для печати задается непосредственно в самом css файле

@media print {
 здесь ваши стили 
}

Стили которые вы можете использоват:

При помощи следующего кода можно отображать полный URL вместо гиперссылки, ведь на листе бумаги не получится кликнуть:

a:after {content:"<"attr(href)">";

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

a[href^=http]:after {content:"<"attr(href)">";

Также будет удобно чтоб каждый заголовок печатался на новой странице

h3 {page-break-before: always;}

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

* {-webkit-print-color-adjust: exact;}

Как это выглядит в действии:

Стили для печати веб страницы

Стили для печати веб страницы

Итог:

В конце наш css файл будет выглядеть следующим образом

@media print {
a:after {content:"<"attr(href)">"};
a[href^=http]:after {content:"<"attr(href)">"};
h3 {page-break-before: always;};
* {-webkit-print-color-adjust: exact;}
}

Надеюсь статья помогла вам, поделитесь с друзьями

Читайте также:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.