Инструкция: CSS-оптимизация веб-страницы для печати

Подборка полезных CSS-техник от фронтенд-разработчика Мануэля Матузовича.

Бывший менеджер Microsoft Аарон Густафсон в октябре 2016 года написал в Twitter обращение к Indiegogo, где обратил внимание компании на то, что страницы с деталями заказа невозможно распечатать.

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

Оптимизация интернет-страниц для печати очень важна, потому что в наших же интересах, чтобы сайты были максимально доступны пользователям, вне зависимости от того, в каком виде. Не нужно предполагать, какими являются пользователи и каким будет их поведение: люди все еще печатают страницы сайтов. Только подумайте о всех этих статьях или блогах, рецептах, контактной информации, страницах «как добраться» или сайтах с недвижимостью. Однажды кто-то где-то обязательно попробует распечатать одну из созданных вами страниц.

Если вы обнаружите ту же самую проблему, что и у меня, то надеюсь, что эта статья быстро освежит ваши знания. Если вы еще не оптимизировали свои страницы с помощью CSS, следующие советы помогут вам начать это делать.

Лучший способ встроить стили для печати — описать директиву @media в своем CSS.

Также вы можете встроить стили для печати в HTML, но для этого потребуется дополнительный запрос.

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

Чтобы откорректировать стили для печати в Firefox, откройте Панель разработчика (Shift + F2 или Разработка → Веб-разработка → Панель разработчика), введите media emulate print в строчке ввода внизу окна браузера и нажмите Enter. Активная вкладка будет вести себя, как если бы тип медиа был print до тех пор, пока вы не закроете или не обновите страницу.

В браузере Chrome откройте Инструменты разработчика (CMD + Opt + I (для macOS) или Ctrl + Shift + I (для Windows) или View → Developer → Developer Tools), отразите Console drawer (Esc), откройте панель Rendering, поставьте галочку в пункте Emulate CSS Media и выберите Print.

Абсолютные единицы не годятся для экранов, но хорошо работают для печати. В стилях для печати совершенно безопасно и даже рекомендуется использование таких абсолютных единиц как cm, mm, in, pt или pc.

Можно также определить параметры, действующие на этой странице: размеры, ориентация и поля, — с помощью директивы @page. Это очень удобно, если вы хотите, чтобы у всех страниц были определенные поля.

Директива @page — это часть модуля Paged Media, в которой есть много всего нужного, например, можно выбрать первую страницу печати или пустые страницы, позиционировать элементы в углах страницы и другое. Вы можете даже пользоваться ей для создания книг.

Так как печатные страницы, в отличие от интернет-страниц, не могут быть бесконечными, в конце концов, контент прервется на одной странице и продолжится на следующей. В таком случае, есть пять свойств, которые нужно проконтролировать.

Чтобы элемент всегда был в начале страницы, можно принудительно разрывать страницу с помощью правила page-break-before.

Правило page-break-before на портале Mozilla Developer Network.

С помощью правила page-break-after можно принудительно разорвать или, наоборот, избежать разрыва страницы после элемента.

Правило page-break-after на портале Mozilla Developer Network.

Это правило поможет избежать разделения элемента на две страницы.

Правило page-break-inside на портале Mozilla Developer Network.

Иногда не нужно принудительно разрывать страницу, но нужно проконтролировать, сколько строчек отражается на текущей или следующей странице. Например, если последняя строчка целого параграфа не помещается на текущей странице, то на следующей странице напечатаются две последние строчки из параграфа, даже несмотря на то, что не вошла только одна строчка. Так происходит потому, что свойство, ответственное за подобные ситуации, — widows — по умолчанию настроено на два. Это можно поменять.

Если ситуация противоположна, и из всего параграфа только первая строка помещается на странице, остальная часть параграфа будет напечатана на следующей странице. Свойство, ответственное за это поведение, — orphans, и его значение по умолчанию также равняется двум.

Код выше показывает, что по крайней мере три строчки должны поместиться на текущей странице, иначе весь параграф будет перенесен на следующую страницу. На CodePen есть несколько примеров. А здесь — отладочная версия, чтобы было легче протестировать. Не все свойства и значения работают во всех браузерах одинаково, стили для печати надо проверять в каждом браузере.

Стоит сбросить некоторые стили для печати, например background-color, box-shadow или color.

Вот фрагмент стандартной заготовки стилей для печати для HTML5:

Стили для печати являются исключением из правил, в них можно использовать ключевое слово !important.

Чтобы чернила не тратились зря, лучше удалить ненужный материал, например, presentational content, рекламу, навигацию и прочие с помощью свойства display: none.

Возможно, будет лучше вообще показать только основной контент, а все остальное спрятать.

Печать ссылок совершенно бесполезна, если не известно, куда они ведут.

Можно легко сделать так, чтобы цель ссылки отражалась рядом с ее текстом.

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

Выглядит безумно, я знаю. Эти строчки означают следующее: отразить значение атрибута hrefattribute рядом с каждой ссылкой, у которой есть атрибут href, который начинается с http, но в значении которого не стоит mywebsite.com.

Аббревиатура должна заключаться в элементы <abbr>, а её расшифровка включается в атрибут title. Вполне логично выводить их на печать.

По умолчанию браузеры не печатают цвет фона и фоновые изображения, но иногда их можно пустить на печать принудительно. Нестандартизированное свойство print-color-adjust позволит переписать настройки по умолчанию в некоторых браузерах.

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

Почему? Потому что правила CSS применяются только в случае, если параметр min-width равняется 48em, а тип медиа — screen. Если избавиться от ключевого слова screen, то мультимедийный запрос будет ограничиваться только параметром min-width.

Текущие версии Firefox и Chrome могут печатать карты, но, например, Safari — не может. В таком случае можно воспользоваться статическими картами, которые предоставляются некоторыми сервисами.

Некоторые советы вы найдете в статье журнала Smashing Magazine. Один из них заключается в том, что в страницах для печати лучше размещать QR-коды, чтобы пользователю не пришлось печатать URL полностью для перехода на актуальную страницу сайта.

Проводя исследование, я обнаружил инструмент, который поможет печатать неоптимизированные страницы. С помощью инструмента Printliminator можно удалять элементы просто кликнув на них. Можно посмотреть демо на Youtube и прочитать о проекте на Github.

Если вы ищете фреймворк, присмотритесь к инструменту Gutenberg. С ним оптимизация страниц для печати становится немного легче.

Есть еще один фреймворк, который называется Hartija. Его автор Владимир Каррер.

#Интерфейсы