В котором он указал, что их страницы детального заказа непригодны к использованию в напечатанном виде.
Я был ошеломлен, когда увидел этот твит - я понял, что прошло уже много времени с тех пор, как я оптимизировал стили для печати и я даже не думал об их проверке.
Возможно, это произошло потому, что я трачу много времени на изменение размера окна браузера, чтобы гарантировать, что мои сайты работают прекрасно во всех размерах и формах, а может потому, что я редко печатаю страницы для себя. Независимо от причин, я совершенно забыл о стилях для печати и это плохо.
Оптимизация веб-страниц для печати важна потому, что печатая страницы мы делаем сайт максимально доступным, независимо от среды. Мы не должны делать предположений о наших пользователях и их поведении. Люди продолжают печатать веб-страницы. Подумайте о статьях, записях в блогах, рецептах, контактной информации, сайтах с картами или объектами недвижимости. Кто-нибудь когда-нибудь обязательно попытается распечатать одну из ваших страниц.
Я забросил домашние принтеры очень давно, так как мне всегда казалось, что они ломаются после 10 минут работы. Но не все такие, как я. - Хейдон Пикеринг (Inclusive Design Patterns)
Если вы заметили, что находитесь в похожем положении, этот пост поможет вам в быстром освежении знаний. Если вы не оптимизировали свои страницы для печати, следующие советы помогут вам начать.
Лучшим способом подключения стилей для печати является объявление директивы @media в вашем CSS.
Body { font-size: 18px; } @media print { /* print styles go here */ body { font-size: 28px; } }
Альтернативно вы можете подключить стили в HTML, но это потребует дополнительного запроса HTTP.
Вам не надо печатать страницу каждый раз, когда вы внесли небольшое изменение в стили. В зависимости от браузера, вы можете экспортировать страницу в PDF, использовать предварительный просмотр печати или проводить отладку непосредственно в браузере.
Для отладки стилей для печати в Firefox откройте панель разработки (Shift + F2 или меню Tools > Web Developer > Developer Toolbar), введите в поле ввода media emulate print и нажмите enter . Активная вкладка до перезагрузки будет работать так, как будто типом медиа является print .
Эмуляция стилей для печати в Firefox
В Chrome откройте инструменты разработчика (CMD + Opt + I (macOS) или Ctrl + Shift + I (Windows) или меню View > Developer > Developer Tools) и вывести консоль, открыть панель рендеринга и в меню Emulate CSS Media выбрать Print.
Эмуляция стилей для печати в Chrome
Абсолютные единицы измерения это плохо на экране, но отлично для печати. В стилях для печати их использование совершенно безопасно и даже рекомендовано использовать такие единицы как cm , mm , in , pt или pc .
Section { margin-bottom: 2cm; }
Можно задать свойства, специфичные для печатной страницы, такие как ее размеры, ориентация и отступы с помощью директивы @page . Это очень удобно, если вы хотите, чтобы у всех страниц были определенные отступы.
@media print { @page { margin: 1cm; } }
Директива @page это часть спецификации Paged Media Module , в которой есть такие замечательные вещи, как возможность выбрать первую печатаемую страницу или пустые страницы, позиционировать элементы в углу страницы и многое другое . Это можно использовать даже для печати книг .
Так как печатные страницы, в отличие от веб-страниц, не являются бесконечными, контент будет разбиваться между страницами. У нас есть 5 свойств для управления тем, как это происходит.
Если мы хотим, чтобы элемент всегда был в начале страницы, мы можем задать принудительный разрыв страницы с помощью правила page-break-before .
Section { page-break-before: always; }
Правило page-break-after позволяет нам форсировать или запрещать разрывы страниц после элемента.
H2 { page-break-after: always; }
Это свойство удобно, если вам надо избежать разрыва страницы внутри элемента.
Ul { page-break-inside: avoid; }
Иногда вам не нужен контроль над разрывом страницы, но важен контроль над тем, сколько строчек будет выведено на текущей, а сколько на следующей странице. Например, если последняя строка параграфа не помещается на текущей странице, на следующую страницу она будет перенесена вместе с предпоследней. Это потому, что соответствующее свойство widows по умолчанию равно 2. Мы можем изменить его.
P { widows: 4; }
Если мы столкнемся с другой стороной этой проблемы и на текущей странице у нас помещается только первая строка параграфа, то тогда весь параграф начнется со следующей страницы. За это отвечает свойство orphans и его дефолтное значение 2.
P { orphans: 3; }
Этот код означает, что как минимум 3 строки должны помещаться на текущей странице, чтобы параграф не переносился на следующую.
Не все из этих свойств и значений работают в каждом браузере, вы должны проверять стили для печати в разных браузерах.
Имеет смысл сбросить для печати некоторые стили типа background-color , box-shadow и color .
*, *: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 вполне нормально.
Чтобы избежать излишней траты чернил, вы должны удалить ненужное - оформительские элементы, рекламу, навигацию и т.п. с помощью свойства display: none .
Вы, в принципе, можете показать только основной контент и спрятать все остальное:
Body > *:not(main) { display: none; }
A:after { content: " (" attr(href) ")"; }
Конечно, так будут показано все: относительные ссылки, абсолютные ссылки, якоря и прочее. Следующий вариант будет работать лучше:
A:not():after { content: " (" attr(href) ")"; }
Смотрится безумно, я знаю. Эти строчки работают так: выводится значение атрибута href рядом с любой ссылкой, у которой он есть, если он начинается с http , но не ведет на наш mywebsite.com .
Аббревиатуры должны оборачиваться элементом с указанием расшифровки в атрибуте title . Имеет смысл вывести это на печать.
Abbr:after { content: " (" attr(title) ")"; }
Обычно браузеры не печатают фоновый цвет и фоновые изображения, если вы прямо не укажете им. Есть нестандартизированное свойство print-color-adjust , позволяющее переписать настройки по умолчанию в некоторых браузерах.
Header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
Если вы пишете медиазапросы как в следующем примере, имейте в виду, что стили в этом медиазапросе не будут применяться при печати.
@media screen and (min-width: 48em) { /* screen only */ }
Вы спросите, почему? Потому что правила CSS применяются только при выполнении обоих условий: min-width равен 48em , media-type - screen . Если избавиться от ключевого слова screen , то медиазапрос будет учитывать только значение min-width .
@media (min-width: 48em) { /* all media types */ }
Текущие версии Firefox и Chrome способны печатать карты, а вот Safari нет. Некоторые сервисы предоставляют статические карты , которые можно печатать вместо оригинала.
Map { width: 400px; height: 300px; background-image: url("http://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; }
Если вы ищете фреймворк, то вам может понравиться Gutenberg , делающий оптимизацию страниц немного проще.
Это еще один фреймворк для создания стилей для печати от
Периодически в интернете можно встретить настолько ценные статьи, что хочется распечатать их и зачитать до дыр. При этом не на всех сервисах предусмотрена версия статьи для печати или наши желания распечатать не совпадают с предоставляемыми возможностями (хочется оставить картинку или изменить тип основного шрифта). Как же распечатать страницу без лишних элементов? В таком случае поможет веб-сервис .
На главной странице PrintWhatYouLike в середине экрана имеется формочка для ввода адреса страницы подлежащей печати. Адрес ввели, страница загружена и мы видим, что при выборе любого из элементов интерфейса он обводится красной рамкой. Еще одно нажатие левой кнопки мыши и открывается список возможных операций. Элементы интерфейса можно удалять по одному или группой, расширить отдельно выбранный в границах или выбрать один блок текста, удалив все прочие. То есть предоставлена возможность по одиночке убрать ненужные для печати части страницы или быстро изолировать нужное от второстепенного и распечатать.
В левой части экрана присутствует боковая панель с рядом функций для редактируемой страницы:
Для удобства пользователя PrintWhatYouLike предлагает поместить на панель закладок кнопку для редактирования перед печатью любой, посещенной нами страницы. Также предусмотрена опция PageZipper. Она будет удобна при чтении тех ресурсов, где любят разделить одну статью на пять, десять или более страниц. Вы жмете “Следующая страница”, еще раз “Следующая страница”, а затем понимаете, что и читать было нечего. PageZipper разложит всю статью целиком на одной странице для дальнейшего редактирования и печати. Если букмарклет ставить не хочется, то доступен плагин для Firefox PageZipper 0.6.1 .
Для зарегистрированных пользователей PrintWhatYouLike предлагает панель управления, где содержится информация о количестве установленных Printer Friendly кнопок, сохраненных и распечатанных листов бумаги, сэкономленных деньгах, не срубленных деревьев и не выброшенного в атмосферу злополучного оксида углерода.
Блогерам может также принести пользу. Установка плагина приведет к появлению на каждой странице блога удобной кнопки для отправки статей на печать, возможность сохранения страниц в формат PDF, что позволит экономить читателям бумагу и краску принтера.
На многих сайтах есть возможность отобразить версию страницы для печати, но всегда ли удобно ими пользоваться?
Основными проблемами при распечатке документа становится плохая типографика, наличие лишней информации (например, элементы интерфейса) и неправильные цвета. Для стилизации можно использовать правило @media :
@media print { }
Если пользователь хочет распечатать страницу с дизайном, отображающемся на экране, то делает скриншот и печатает его. Версия для печати предназначена для простого и комфортного чтения текста с листа бумаги. Поэтому прежде всего необходимо убрать все лишние со страницы: меню, массивную шапку или подвал, фоновые изображения и т.д., оставив только необходимое: заголовки, контент с изображениями, лого сайта, URL страницы. К примеру такой код скрывает заголовки H1, а также сайдбар, шапку и подвал сайта:
H1, div#header, div#sidebar, div#footer { display: none; }
2. Могут возникать несоответствия распечатанной страницы с ее отображением на экране при назначении размеров в пикселях. Поэтому стоит использовать дюймы, сантиметры или проценты.
3. При помощи следующего кода можно отображать полный URL вместо гиперссылки, ведь на листе бумаги не получится кликнуть:
A:after {content:" <" attr(href) ">";
Немного модифицировав код, можно добавить отображение URL только внешним ссылкам:
A:after {content:" <" attr(href) ">";
4. Для больших текстов иногда будет уместно разделение на части. Следующий код разбивает контент на каждом заголовке H3, печатая на новой странице:
H3 { page-break-before: always; }
А этот код поможет печатать каждую статью с новой страницы, может быть полезно при распечатке списка записей блога:
Article + article { page-break-before: always; }
5. Желательно переназначить стили сайтов с темным или ярким дизайном в стандартную цветовую схему - черный текст на белом фоне. Это удобно и для читабельности, и для экономии расходнвх материалов в принтере пользователя.
* { -webkit-print-color-adjust: exact; }
Как это выглядит в действии:
Со следующим CSS:
Header { background: #000; color: #fff; padding: 1rem; font-family: Avenir, Arial, sans-serif; }
Браузер попытается привести версию для печати в нормальный вид:
Если на странице есть изображение, например логотип, то браузер его никак не корректирует, и получается ужасно:
Еще хуже все выглядит, если в качестве лого используется векторное изображение с прозрачностью:
Избежать этого ужаса можно при использовании CSS3 Filter:
@media print { header { background: none; color: #000; } header img { -webkit-filter: invert(100%); filter: invert(100%); } }
Получается:
Для Firefox можно использовать SVG:
@media print { header { background: none; color: #000; } header img { filter: url(inverse.svg#negative); -webkit-filter: invert(100%); filter: invert(100%); } }
Для IE9 решение от
Это устранение ошибок под названием «дубли контента». Дублирующийся контент означает, что подобный контент отображается в нескольких местах (URL-адресах) в интернете. В результате поисковые системы не знают, какой URL показывать в результатах поиска. Это может навредить ранжированию веб-страницы сайта. Проблема становится серьезней, когда люди начинают ссылаться на разные версии контента. В этой статье мы расскажем о причинах дублирования контента и найдем решения для каждой из них.
Представьте себе, что вы находитесь на перекрестке, а дорожные знаки указывают по двум разным направлениям на один и тот же конечный пункт назначения: какую дорогу вы должны выбрать? И если пойти по «худшему» направлению, конец пути также может слегка измениться. Как читателю, вам всё равно: вы получили контент, к которому стремились. Но поисковая система должна выбрать, какой из них показывать в результатах поиска, так как она не должна показывать один и тот же контент дважды.
Допустим, ваша статья о «ключевом слове x» появляется на http://www.example.com/keyword-x/ и точно такой же контент появляется на http://www.example.com/article-category/keyword-x/. Это происходит во многих современных системах управления контентом (СМS). Ваша статья была поднята несколькими блоггерами, одни из которых сослались на первый URL, другие сослались на второй URL. Этот дублирующийся контент - проблема для вашего интернет-ресурса, так как ссылки одновременно рекламируют разные URL-адреса. Если бы все они ссылались на один и тот же URL-адрес, ваш рейтинг в топ-10 для «ключевого слова x» был бы намного выше.
Есть уйма причин, которые вызывают дублирование контента. Большинство из них являются техническими: не так уж часто человек решает разместить один и тот же контент в двух разных местах, не выделяя исходный источник. Тем не менее, технические причины многочисленны. Это происходит в основном потому, что разработчики не думают как браузер или пользователь, не говоря уже о паутине поисковых систем, они думают как разработчик. А как же вышеупомянутая статья, которая появляется на http://www.example.com/keyword-x/ и http://www.example.com/article-category/keyword-x/? Если вы спросите разработчика, он скажет, что она одна.
Давайте посмотрим, как выявить наличие дублирующегося контента на вашем веб-сайте, а также объясним его причину и сделаем всё возможное для его устранения.
1.1.Непонимание смысла URL-адресов
Разработчик просто разговаривает на другом языке. Вы видите, что весь сайт, вероятно, снабжен системой баз данных. В этой базе данных есть только одна статья, программное обеспечение веб-сайта просто позволяет найти одну и ту же статью в базе данных через несколько URL-адресов. Это объясняется тем, что в глазах разработчика уникальный идентификатор для этой статьи - это идентификатор статьи, который есть в базе данных, а не URL. Однако для поисковой системы URL-адрес является уникальным идентификатором части контента. Если вы объясните это разработчику, он увидит проблему. И после прочтения этой статьи вы сможете сразу же предоставить ему её решение.
1.2. Идентификаторы сеансов посетителей
Когда вы отслеживаете посетителей и предоставляете возможность сохранять товары, которые они хотят купить, в корзине покупок, вы даете им сессию. Сессия - это, в основном, краткая история того, что посетитель сделал на вашем сайте, и может содержать такие вещи, как элементы в корзине покупок. Чтобы сохранить сессию посетителя, переходящего с одной страницы на другую, нужно где-то хранить уникальный идентификатор этой сессии, так называемый идентификатор сеанса. Наиболее распространенное решение - сделать это с помощью cookie. Однако поисковые системы обычно не хранят файлы cookie.
Некоторые системы возвращаются к использованию идентификаторов сеанса в URL-адресе. Это означает, что каждая внутренняя ссылка на веб-сайте получает этот идентификатор сеанса, добавленный к URL-адресу, и поскольку этот идентификатор сеанса уникален для этого сеанса, он создает новый URL-адрес и, таким образом, дублирует контент.
1.3. Параметры URL, используемые для отслеживания и сортировки
Другой причиной дублирования контента является использование параметров URL-адресов, которые не изменяют контент страницы, например, в ссылках отслеживания. Вы видите, http://www.example.com/keyword-x/ и http://www.example.com/keyword-x/?source=rss - это на самом деле не один и тот же URL для поисковой системы. Последний может позволить вам отслеживать, из каких источников зашли посетители, но это может также затруднить вам ранжирование. Очень нежелательный побочный эффект!
Разумеется, это не просто отслеживание параметров, это касается каждого параметра, который вы можете добавить к URL-адресу, который не меняет жизненно важную часть контента. Этот параметр предназначен для «изменения сортировки по набору продуктов» или «показа другой боковой панели»: все они вызывают дублирование содержимого.
1.4. Парсинг и синдикация контента
Большинство причин дублирования контента принадлежат вам самим или, по крайней мере, по вине вашего веб-сайта, когда другие сайты используют ваш контент с вашего согласия или без него. Они не всегда ссылаются на вашу оригинальную статью, и поэтому поисковая система не «получает» ее и приходится иметь дело с еще одной версией той же статьи. Чем популярнее становится ваш сайт, тем больше и чаще вы будете его парсить, расширяя эту проблему все больше и больше.
1.5. Порядок параметров
Другая распространенная причина заключается в том, что CMS не использует красивые и чистые URL-адреса, а скорее URL-адреса, такие как / id = 1 & cat = 2, где ID ссылается на статью, а cat относится к категории. URL /? Cat = 2 & id = 1 будет давать те же результаты в большинстве систем сайта, но они фактически совершенно разные для поисковой системы.
1.6. Пагинация комментариев
В моем любимом WordPress, а также и в некоторых других системах, есть возможность осуществлять пагинацию комментариев. Это приводит к дублированию содержимого по URL-адресу статьи и URL-адресу статьи + / comment-page-1 /, / comment-page-2 / и т. д.
1.7. Версия для печати
Если ваша система управления контентом создает страницы, удобные для печати, и вы связываете их со страницами своих статей, в большинстве случаев Google их найдет, если вы специально их не заблокируете. Какую версию покажет Google? Ту, которая загружена рекламой и периферийным контентом, или ту, которая содержит только вашу статью?
1.8. с WWW и без WWW
Одна из старых ситуаций: домен с WWW и без WWW, дублирующие контент, в случае, когда доступны обе версии вашего сайта. Ещё одна менее распространенная ситуация, которая существует: http и https дублируют контент, когда один и тот же контент передается на оба адреса.
Как было определено выше, когда несколько URL-адресов ведут к одному и тому же контенту - это является проблемой, но её можно решить. Человек, работающий в одном издании, как правило, сможет легко сказать вам, какой «правильный» URL-адрес для определенной статьи должен быть. Но самое смешное, что иногда, когда вы спрашиваете трёх человек в одной компании, они дают три разных ответа...
Это проблема, которая требует обязательного решения в таких случаях, потому что конечный адрес может быть только один (URL). Этот «правильный» URL-адрес должен быть определен поисковым сервером как канонический URL-адрес.
Ироническое примечание
Канонический - термин, вытекающий из римско-католических традиций, где список священных книг был создан и принят как подлинный. Их окрестили каноническими Евангелиями Нового Завета. А ирония заключается в следующем: Римской Католической церкви потребовалось около 300 лет и многочисленные бои, чтобы придумать этот канонический список, и в конечном итоге они выбрали 4 версии одной и той же истории...
Возможно, вы не знаете, есть ли у вас дублирующийся контент на вашем сайте. Вот несколько способов, как это выяснить:
3.1. Инструменты Google для веб-мастеров
Инструмент Google для веб-мастеров - отличный инструмент для идентификации дублированного контента. Если вы заходите в Инструменты для веб-мастеров Google для своего сайта, см. Раздел «Вид в поиске» «Оптимизация HTML», и вы увидите следующее:
Проблема в том, что если у вас есть статья, похожая на статью о «ключевом слове X», и она отображается в двух категориях, названия могут быть разными. Они могут быть, например, «Ключевое слово X - Категория X - Пример сайта» и «Ключевое слово X - Категория Y - Пример сайта». Google не будет выбирать эти названия в качестве дубликатов, но вы можете найти их с помощью поиска.
3.2. Поиск заголовков или фрагментов
Существует несколько операторов поиска , которые очень полезны для подобных случаев. Если вы хотите найти все URL-адреса на вашем сайте, которые содержат вашу статью с ключевым словом X, введите в Google следующую поисковую фразу:
Site:example.com intitle:"Ключевое слово X"
Затем Google покажет вам все страницы example.com, содержащие это ключевое слово. Чем конкретнее вы отразите эту часть intitle, тем легче будет отсеять дублированный контент. Вы можете использовать один и тот же метод для идентификации дублированного контента в интернете. Допустим, что полное название вашей статьи было «Ключевое слово X - почему оно классное», вы искали: Intitle: «Ключевое слово X - почему это классно»
Google предоставит вам все сайты, соответствующие этому названию. Иногда стоит поискать одно или два полных предложения из вашей статьи, так как некоторые парсеры могут изменить заголовок.
Когда вы решите, какой URL-адрес является каноническим URL-адресом для вашего контента, вам нужно начать процесс канонизации. Это в основном означает, что мы должны сообщить поисковой системе о канонической версии страницы и позволить ей найти ее как можно скорее.
Существует четыре метода решения, в порядке предпочтения:
4.1. Как избежать дублирования контента?
Некоторые из приведенных выше ошибок при дублировании контента имеют очень простые исправления:
Если вашу проблему не так легко устранить, возможно, стоит приложить все усилия, чтоб не допускать появления дублирующегося контента. Это, безусловно, лучшее решение проблемы.
4.2. 301 редирект дублированного контента
В некоторых случаях невозможно полностью запретить системе, которую вы используете, создавать неправильные URL-адреса для контента, но иногда их можно перенаправить. Помните об этом во время разговора с разработчиками. Кроме того, если вы вообще избавляетесь от некоторых повторяющихся проблем с контентом, убедитесь, что вы перенаправляете все старые дублированные URL-адреса контента на соответствующие канонические URL-адреса.
4.3. Использование rel = "канонических" линков
Иногда нет возможности избавиться от дублируемой версии статьи, но вы знаете, что это неправильный URL-адрес. Для этой конкретной проблемы поисковые системы ввели элемент канонической ссылки. Он размещен в разделе
вашего сайта и выглядит следующим образом:href="http://example.com/wordpress/seo-
В разделе
Этот процесс немного медленнее, чем 301 редирект, упомянутый Джоном Мюллером от Google, который вы можете сделать, что было бы намного предпочтительнее.
4.4. Возврат к исходному контенту
Если вы не можете выполнить любое из вышеперечисленных действий, возможно, потому, что вы не контролируете раздел
сайта, на котором отображается ваш контент, добавление ссылки на исходную статью сверху или снизу статьи всегда является хорошей идеей. Это может быть то, что вы хотите сделать в своем RSS-канале: добавьте ссылку на статью в ней. Если Google встретит несколько ссылок, указывающих на вашу статью, он вскоре выяснит, что это фактическая каноническая версия статьи.Дублирующийся контент встречается повсюду. Это процесс, который вам необходимо постоянно отслеживать. Если вовремя всё исправлять, тогда и вознаграждение будет многочисленное. Ваш качественный контент может взлететь в рейтинге, просто избавляясь от дублирующегося контента на вашем сайте. Конечно, если вам нужна помощь в выявлении этих проблем, помощь вашим разработчикам в поиске решений для устранения проблем с дублирующимся контентом или даже решить эти проблемы для вас, вы всегда можете заказать
От фронтенд-разработчика Мануэля Матузовича.
В закладки
Мануэль Матузович
Бывший менеджер Microsoft Аарон Густафсон в октябре 2016 года написал в Twitter обращение к Indiegogo , где обратил внимание компании на то, что страницы с деталями заказа невозможно распечатать.
Когда я увидел этот твит, меня словно током прошибло, потому что я уже очень давно не только не оптимизировал страницу для печати, я даже ни секунды не думал об этом. Может быть дело в том, что я постоянно решаю вопросы, связанные с изменением размеров браузеров, и проверяю, чтобы страницы наших сайтов идеально работали в любом размере и любой форме, а может быть потому, что сам почти никогда не печатаю страницы. Как бы то ни было, я совсем забыл о стилях для печати, и это плохо.
Оптимизация интернет-страниц для печати очень важна, потому что в наших же интересах, чтобы сайты были максимально доступны пользователям, вне зависимости от того, в каком виде. Не нужно предполагать , какими являются пользователи и каким будет их поведение: люди все еще печатают страницы сайтов. Только подумайте о всех этих статьях или блогах, рецептах, контактной информации, страницах «как добраться» или сайтах с недвижимостью. Однажды кто-то где-то обязательно попробует распечатать одну из созданных вами страниц.
Я давно перестал пользоваться принтером дома, потому что он ломался каждые 10 минут. Но не все такие как я.
Гейдон Пикеринг
Inclusive Design Patterns
Если вы обнаружите ту же самую проблему, что и у меня, то надеюсь, что эта статья быстро освежит ваши знания. Если вы еще не оптимизировали свои страницы с помощью CSS, следующие советы помогут вам начать это делать.
Лучший способ встроить стили для печати - описать директиву @media в своем CSS.
Также вы можете встроить стили для печати в HTML, но для этого потребуется дополнительный запрос.
Не нужно печатать страницу каждый раз, когда вы вносите небольшое изменение. В зависимости от браузера можно экспортировать страницу как файл PDF, сделать предпросмотр страницы или даже вносить корректировки в самом браузере.
Чтобы откорректировать стили для печати в Firefox, откройте Панель разработчика (Shift + F2 или Разработка → Веб-разработка → Панель разработчика), введите media emulate print в строчке ввода внизу окна браузера и нажмите Enter. Активная вкладка будет вести себя, как если бы тип медиа был print до тех пор, пока вы не закроете или не обновите страницу.
Эмуляция стиля печати в Firefox
В браузере Chrome откройте Инструменты разработчика (CMD + Opt + I (для macOS) или Ctrl + Shift + I (для Windows) или View → Developer → Developer Tools), отразите Console drawer (Esc), откройте панель Rendering, поставьте галочку в пункте Emulate CSS Media и выберите Print.
Эмуляция стиля печати в Chrome
Абсолютные единицы не годятся для экранов, но хорошо работают для печати. В стилях для печати совершенно безопасно и даже рекомендуется использование таких абсолютных единиц как cm, mm, in, pt или pc.
section { margin-bottom: 2cm;}
Можно также определить параметры, действующие на этой странице: размеры, ориентация и поля, - с помощью директивы @page. Это очень удобно, если вы хотите, чтобы у всех страниц были определенные поля.
@media print { @page { margin: 1cm; }}
