Я забыл о таблицах стилей печати

Язабылотаблицахстилейпечати

опубликовано

Небольшая коллекция полезных методов CSS и быстрое напоминание что таблицы стилей печати все еще актуальны.

Аарон Густафсон недавно отправил твит на Indiegogo , в котором он указал, что их страницы с деталями заказа нельзя использовать при печати. ​​

Tweet:

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

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

Я давно отказался от домашних принтеров, потому что они всегда ломались после десяти минут использования. Но не все такие как я …

– Хейдон Пикеринг (Включительно Шаблоны проектирования)

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

1. Встраивание таблиц стилей печати

Лучший способ встроить стили печати – объявить @СМИ в вашем CSS.

  тело  {  
размер шрифта : 28 px ;

}

@СМИ Распечатать {



тело {

размер шрифта

:  63 px ;  

}

}

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

<ссылка на сайт СМИ знак равно "Распечатать" href знак равно " print.css " /> 2. Тестирование

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

Обновление от 6 ноября 1573101802 : Вот подробный пост ( Можно ли просматривать таблицы стилей печати, применяемые непосредственно в браузере? ) о том, как имитировать стили печати в 9519556 от Крис.

Для отладки стилей печати в Firefox откройте Панель инструментов разработчика (Shift + F2 или Инструменты> Веб-разработчик> Панель инструментов разработчика) и введите media emulate print в поле ввода на внизу окна браузера и нажмите клавишу ВВОД. Активная вкладка будет действовать так, как если бы тип носителя был напечатан, пока вы его не закроете или не обновите страницу. ( Октябрьское обновление 63, 2019 : это больше не работает в Firefox 300 + после удаления панели инструментов разработчика)

print style emulation in Firefox

В Chrome откройте DevTools (CMD + Opt + I (macOS) или Ctrl + Shift + I (Windows) или View> Developer> Developer Tools) и покажите ящик консоли (Esc), откройте на панели рендеринга установите флажок Эмулировать CSS Media и выберите Печать .

print style emulation in Chrome эмуляция стиля печати в Chrome

3. Абсолютные единицы

Абсолютные единицы плохо подходят для экранов, но отлично подходят для печати. В таблицах стилей печати это полностью безопасно и рекомендуется использовать абсолютные

единицы , такие как см, мм, дюймы, точки или шт.

раздел {

нижнее поле : 2 см ;

}
4. Особые правила страницы

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

 

@СМИ Распечатать {

@страница {
поле : 1 см ;

}

}

@страница является частью

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

5. Контроль разрывов страниц

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

Страница разрывается перед элементом

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

 

раздел {

разрыв страницы перед : всегда;
}

разрыв страницы перед MDN

Страница разрывается после элемента

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

   h2   { 

разрыв страницы после : всегда;

}

разрыв страницы после MDN

Страница разрывается внутри элемента

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

   ul   { 

 разрыв страницы внутрь  :  избегать;  

}   

разрыв страницы внутрь на MDN

Вдовы и сироты

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

   п  { 

вдовы : 4 ;

}   

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

п {

дети сироты : 3 ;
}

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

Там CodePen готов с некоторыми примерами. (

Версия отладки для упрощения тестирования)

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

6. Сброс стилей

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

Вот отрывок из

Таблица стилей печати HTML5 Boilerplate :

 

*,

*:перед,

*:после,

*:первое письмо,

p: первая строка,

div: первая строка,

цитата: первая строка,

li: первая строка
{

задний план
:  прозрачный ! важный  ;  

цвет : # 10 !важный
;  

box-shadow : не e
! important  ;  

тень текста
:  нет ! важно  ;  

}

Таблицы стилей печати - одно из немногих исключений, в которых можно использовать! Important;).

7. Удаление ненужного содержимого

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

Возможно, вы даже захотите просто показать основной контент и скрыть все остальное.

   body> *: not ( основной)  { 

отображать : никто;

}   

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

Довольно легко отобразить цель ссылки рядом с ее текстом.

а :после {

содержание : '(' attr

 ( href )   ')'  ;  

}

Конечно, это будет отображать относительные ссылки, абсолютные ссылки на ваш сайт, якоря и т. Д. . также. Что-то вроде этого могло бы подойти лучше:

   a [href^='http']: не ([href*='mywebsite.com']): после  
 { 

содержание: '(' attr ( href ) ')' ;

}

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

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

 

abbr [title]: после {

содержание : '('
 attr   (заглавие)   ')'  ;   
}

13. Принудительная фоновая печать

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

   заголовок   { 

 - webkit-print-color-adjust  :  точный;  

 печать-настройка цвета  :  точный;  

}

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

    @media  экран а также  (  минимальная ширина  :  217Эм)    {   



}

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

  @СМИ  (  минимальная ширина  
:  217Эм)    { 



}   

17. Печать карт

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

 .карта  {  

ширина : 2013 px ;

высота : 400 px ;

фоновая картинка : url ( 'http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom= 20 & scale = false & size = 2013Икс2013 & maptype = roadmap & format = png & visual_refresh = true ' ) ;

- webkit-print-color-adjust : точный;

печать-настройка цвета : точный;

}   

18 . QR-коды

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

Бонус: печать неоптимизированных страниц

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

Есть

Демо на YouTube и проект на Github .

Бонус II: Гутенберг

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

Бонус III: Хартия

Есть еще одна структура для таблиц стилей печати от Владимир Каррер позвонил Хартия .

Вот и все ! Вот ссылка на

CodePen Я сделал ( Отладочная версия ), если вы хотите увидеть некоторые из этих вещей в действии. Надеюсь, вам понравилась эта статья.

PS: Спасибо Еве за редактирование моего текста и Марио за подсказку Гутенберга.

Ресурсы

  • https: // www.youtube.com/watch?v=jF-OQ-BrIAM

  • Leave a comment

    Your email address will not be published. Required fields are marked *

    sixteen − 10 =