От автора: небольшая коллекция полезных CSS техник и напоминание о том, что печатные стили все еще нужны. Недавно Аарон Густафсон послал твит Indiegogo, в котором сказал, что их страница с деталями о заказе ломается при печати. Когда я увидел твит, меня осенило. Я понял, что уже очень давно не оптимизировал страницы под печать, даже не стал проверять.
Может, я забыл о печатных стилях из-за постоянных ресайзов браузера, чтобы убедиться, что сайт отлично смотрится на всех экранах. Или потому что я редко печатаю страницы. Что бы это ни было, я совсем забыл о печатных стилях, и это плохо.
Оптимизировать сайты под печать очень важно, так как наши сайты должны быть максимально доступными независимо от среды. Не нужно гадать, как ведут себя пользователи. Люди до сих пор печатают веб-страницы. Подумайте о статьях, постах в блогах, рецептах, контактной информации, маршрутах или сайтах недвижимости. В итоге, кто-то где-то все-таки попробует распечатать одну из ваших страниц.
«Я отказался от домашних принтеров давным-давно. Они ведь всегда ломаются через 10 минут после использования. Но не все как я…» — Хэйден Пикеринг (Инклюзивные шаблоны проектирования)
Если вы попали в такую же ситуацию, что и я, надеюсь, эта статья освежит вам память. Если вы ни разу не оптимизировали страницы под печатные стили, следующие советы для вас будут новыми.
1. Подключение печатных стилей
Лучший способ подключить печатные стили – задать правило @media в CSS.
|
1 2 3 4 5 6 7 8 9 |
body { font-size: 18px; } @media print { /* print styles go here */ body { font-size: 28px; } } |
Также печатные стили можно вставить в HTML, но тогда потребуется дополнительный запрос.
|
1 |
<link media="print" href="print.css" /> |
2. Тестирование
Необязательно распечатывать страницу после мелких изменений. В зависимости от браузера можно экспортировать страницу в PDF, посмотреть превью печати или напрямую провести отладку в браузере.
Для отладки печатных стилей в Firefox откройте панель разработчика (Shift + F2 или инструменты > для разработчика > панель разработчика) и вбейте в поле media emulate print внизу и нажмите enter. Активная вкладка будет имитировать медиа тип print, пока вы не закроете или обновите страницу.
В Chrome откройте панель разработчика (CMD + Opt + I (macOS) или Ctrl + Shift + I (Windows) или вид > для разработчиков > инструменты разработчика), зайдите во вкладку консоль (Esc), откройте панель рендеринга, поставьте галочку Emulate CSS Media и выберите Print.
3. Абсолютные единицы
Абсолютные единицы позиционирования плохо подходят для экранов, но в то же время отлично работают с печатью. Использовать абсолютные единицы типа cm, mm, in, pt или pc в печатных стилях полностью безопасно, и это считается нормальным.
|
1 2 3 |
section { margin-bottom: 2cm; } |
4. Правила под определенные страницы
Для определенных страниц можно задавать отдельные свойства, такие как разрешение, ориентация и внешние отступы при помощи правила @page. Очень удобно, если всем страницам нужно задать margin.
|
1 2 3 4 5 |
@media print { @page { margin: 1cm; } } |
Правило @page входит в Paged Media Module, в котором есть много крутых вещей. Например, выбор первой страницы или страниц для печати, позиционирование элементов по углам страниц и т.д. Модуль даже можно использовать, чтобы делать книги.
5. Управление разрывами страниц
Печатные страницы не бесконечны, в отличие от веб-страниц. Контент обрывается на одной странице и переходит на следующую. Управлять разрывами можно при помощи пяти свойств.
Разрывы перед элементом
Если необходимо, чтобы элемент всегда был в начале страницы, можно поставить принудительный разрыв при помощи свойства page-break-before.
|
1 2 3 |
section { page-break-before: always; } |
Разрывы после элемента
Свойство page-break-after позволяет поставить или запретить разрыв страницы после элемента.
|
1 2 3 |
h2 { page-break-after: always; } |
Разрывы внутри элемента
Свойство отлично подходит, когда нужно запретить, чтобы разрыв разбивал один тег на две страницы.
|
1 2 3 |
ul { page-break-inside: avoid; } |
Висячие строки
Иногда, нужен не столь разрыв, сколько возможность контролировать количество строк, отображаемых на текущей или следующей странице.
К примеру, если последняя строка параграфа не вместилась на страницу, то последние две строки этого параграфа перепрыгнут на следующую страницу при печати, несмотря на то, что не вместилась только последняя строка. Это происходит, потому что свойство widows по умолчанию установлено в 2. Это можно изменить.
|
1 2 3 |
p { widows: 4; } |
Если же наоборот только одна строка помещается на странице, то весь параграф будет распечатан на следующей странице. За это ответственно свойство orphans и его значение по умолчанию 2.
|
1 2 3 |
p { orphans: 3; } |
Код выше значит, что как минимум три строки должны уместиться на текущей странице, чтобы параграф не перепрыгнул на следующую страницу целиком.
На CodePen есть пара примеров. (Debug версия для простого тестирования)
Не все свойства и значения работают во всех браузерах, печатные стили необходимо проверять в разных браузерах.
6. Сброс стилей
Хорошо бы сбросить некоторые стили для печати, например, background-color, box-shadow или color. Ниже приведен отрывок из печатных стилей HTML5 Boilerplate:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
*, *:before, *:after, *:first-letter, p:first-line, div:first-line, blockquote:first-line, li:first-line { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } |
Печатные стили – одно из немногих исключений, где можно использовать !important ;).
7. Удаление ненужного контента
Чтобы лишний раз не переводить чернила, нужно удалить нерелевантный контент: презентационный контент, рекламу, меню и т.д. Сделать это можно с помощью display: none.
Возможно, вы вообще захотите показывать только главный контент, а все остальное прятать.
|
1 2 3 |
body > *:not(main) { display: none; } |
8. Раскрытие URL’ов в ссылках
Напечатанные ссылки полностью бесполезны, если вы не знаете, куда они ведут. Можно легко показывать URL рядом с текстовой ссылкой.
|
1 2 3 |
a[href]:after { content: " (" attr(href) ")"; } |
Код выше покажет относительные и абсолютные ссылки на ваш сайт, якоря и т.д. Код ниже будет работать еще лучше:
|
1 2 3 |
a[href^="http"]:not([href*="mywebsite.com"]):after { content: " (" attr(href) ")"; } |
Выглядит жутко, я знаю. Эта строка означает: отображать значение атрибута href рядом со всеми ссылками, у которых есть атрибут href, начинающийся с http и не имеющий строки mywebsite.com в значении.
9. Расшифровка аббревиатур
Аббревиатуры необходимо обернуть в тег , а расшифровку добавить в атрибут title. Было бы неплохо показывать расшифровку аббревиатуры на распечатанной странице.
|
1 2 3 |
abbr[title]:after { content: " (" attr(title) ")"; } |
10. Принудительная печать фона
Обычно браузеры не печатают фоны и фоновые изображения, если вы им об этом не скажете. Иногда необходимо принудительно распечатать их. Нестандартизированное свойство print-color-adjust позволяет переписывать значения по умолчанию в некоторых браузерах.
|
1 2 3 4 |
header { -webkit-print-color-adjust: exact; print-color-adjust: exact; } |
11. Медиа запросы
Если вы пишите медиа запросы так же, как в примере ниже, вам нужно знать, что стили в этом запросе не применятся к печатной версии страницы.
|
1 2 3 |
@media screen and (min-width: 48em) { /* screen only */ } |
Почему, спросите вы? Потому что стили применяются только, если min-width равно 48em, а media-type: screen. Если избавиться от ключевого слова screen, то медиа запрос ограничен только min-width.
|
1 2 3 |
@media (min-width: 48em) { /* all media types */ } |
12. Печать карт
Последние версии Firefox и Chrome умеют печатать карты, а, к примеру, Safari – нет. Некоторые сервисы предлагают взамен статические карты.
|
1 2 3 4 5 6 7 |
.map { width: 400px; height: 300px; background-image: url('//maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true'); -webkit-print-color-adjust: exact; print-color-adjust: exact; } |
13. QR коды
В этой статье с сайта Smashing Magazine есть пара хороших советов. Один из них – это распечатывать QR коды, чтобы пользователю не пришлось вбивать вручную весь адрес, чтобы зайти на живую версию.
Бонус: печать неоптимизированных страниц
Во время своих исследований я нашел замечательный инструмент, с помощью которого можно печатать неоптимизированные страницы. С Printliminator можно удалять элементы, просто кликая по ним.
Есть демо на YouTube и проект на Github.
Бонус 2: Gutenberg
Если вы знаете, что такое фреймворки, вам понравится Gutenberg. С ним оптимизация под печать становится чуть-чуть легче.
Бонус 3: Hartija
Есть еще один фреймворк для печатных стилей от Владимира Каррера под названием Hartija.
Вот и все! Если хотите посмотреть все это в действии, можете оценить мое демо на CodePen (отладочная версия). Надеюсь, вам понравилась статья.
Автор: Manuel Matuzovic
Источник: //uxdesign.cc/
Редакция: Команда webformyself.
