Мне часто хочется напечатать страницу сайта. Рецепты, схемы, мастер-классы… но на печать получаем меню, рекламу, прогноз погоды и только если повезет целевой контент. Что можно сделать на своей странице?
Первое, что приходит в голову: в стили добавить медиа запрос:
@media print{} Вариант хорош если нам нужно печатать страницу практически как есть. Здесь можно отключить ненужные блоки, изменить расположение и т.д. Но если нам не подходит почти всё, что сделано на странице такой вариант не удобен. Нам придется переопределить почти все стили.
Второй вариант мне понравился больше, но возможно требует доработки. Стили можно подключать сразу для нужных носителей.
<link rel="stylesheet" type="text/css" href="./style/style.css" media="not print">
<link rel="stylesheet" type="text/css" href="./style/print.css" media="print">Тут уже можно «творить» с нуля. При выводе на печать мы просто не используем обычные стили, а в основных стилях печать можно даже не упоминать.
Плюс этого метода — упрощение отладки таких «капризных» свойств как page-break-after, page-break-before, page-break-inside и т.п.
MDN указывает, что свойства заменены на break-after, break-before, break-inside, но Chrome сработал только старый вариант, а в Firefox оба. Возможно временно придется указывать их оба или использовать старый.
Судя по количеству вопросов на stackoverflow с проблемами сталкиваются многие. Эти свойства игнорируются при использовании float в соседних блоках, position: absolute во всем документе и некоторых других свойств. Условностей хватает и шанс что-то упустить в стилях большого документа огромен, а специальный стиль для печати можно сразу же создать с учетом ограничений.
@page
Через CSS можно управлять даже той частью печати, которая немного выходит за пределы документа.
Например можно указать формат бумаги и поля. Очень полезная возможность, если мы, например, знаем, что распечатки нужно будет подшить в папки, а пользователь может забыть проверить поля.
@page {
size: A4;
margin: 15mm 15mm 15mm 15mm;
}Правило @page может управлять и другими параметрами печати. Это только самое очевидное.
PS
Для статей этого блога я отключила печать списка похожих статей, комментариев и меню блога.
Сделано через Настройки>Дополнительные стили и добавлено одно правило для печати:
@media print{
.single-post .header-content, .single-post .post-related, .single-post .comment-respond, .main-footer{
display:none;
}
}Все эти настройки немного урезают свободу пользователя напечатать ВСЁ, но только ради его же пользы)))
Источник идеи и гораздо более полный список возможностей: https://vc.ru/flood/23660-print-style-sheets
