Дублированный контент. Какие причины и решения? Отдельные файлы стилей. ▍Разрыв страницы после элемента

22.05.2019

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

Вы можете посмотреть на версию для печати у этой статьи. Фактически, что нужно отображать там? Название статьи, раздел, категория, автор, сам текст и дата. Всё это и выведено на эту страницу. Нужны ли меню, форма поиска, различные блоки? Не думаю, поэтому их и нет.

Так же убедитесь, что ширина версии для печати не превосходит 650px , иначе браузер может порезать края.

Итак, Вы уже поняли, что версию для печати Вам надо создавать самостоятельно, выводя ровно то, что нужно пользователю. Теперь о том, как это сделать.

Есть 2 варианта : создать отдельную страницу и создать отдельный файл стилей. Первый вариант, думаю, понятен. Создаёте ещё одну страницу с версией для печати и на основной странице даёте ссылку на эту печатную версию. Пользователь по ней переходит и через "Файл"->"Печать" он её распечатает.

Второй вариант подразумевает создание отдельной таблицы стилей, где Вы скроете все лишние блоки (через display: none; ) и поставите соответствующие размеры у выводимого контента. Дальше такой файл стилей подключается следующим образом:

Теперь если пользователь захочет распечатать эту страницу, то распечатается не то, что он видит, а то, что прописано в print.css . Фактически, пользователь видит страницу в одном виде, а принтер в совсем другом.

Вот таким образом создаётся версия для печати любой страницы сайта.

От фронтенд-разработчика Мануэля Матузовича.

В закладки

Мануэль Матузович

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

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

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

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

Гейдон Пикеринг

Inclusive Design Patterns

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

1. Встраиваем стили для печати

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

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

2. Тестирование

Не нужно печатать страницу каждый раз, когда вы вносите небольшое изменение. В зависимости от браузера можно экспортировать страницу как файл 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

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

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

section { margin-bottom: 2cm;}

4. Отдельные правила для страницы

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

@media print { @page { margin: 1cm; }}

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

Основными проблемами при распечатке документа становится плохая типографика, наличие лишней информации (например, элементы интерфейса) и неправильные цвета. Для стилизации можно использовать правило @media :

@media print { }

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

H1, div#header, div#sidebar, div#footer { display: none; }

Правила страницы для печати

1. Современные браузеры умеют удалять фоновое изображение. Однако желательно добавлять background-image: 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. Желательно переназначить стили сайтов с темным или ярким дизайном в стандартную цветовую схему - черный текст на белом фоне. Это удобно и для читабельности, и для экономии расходнвх материалов в принтере пользователя.

Корректное отображение

Как уже сказано выше, современные браузеры умеют удалять ненужные элементы при печати, однако это не всегда требуется. В Firefox пользователь может сам контролировать внешний вид результата, в Chrome и Safari можно использовать код, приведенный ниже для отображения исходного стиля:

* { -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 решение от

Перевод

3. Абсолютные единицы измерения

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

Section { margin-bottom: 2cm; }

4. Свойства страниц

Для управления свойствами страниц, вроде их размеров, ориентации и полей, можно использовать правило @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; }

▍Разрыв страницы внутри элемента

Свойство page-break-inside окажется очень кстати, если нужно избежать разделения некоего элемента между двумя страницами.

Ul { page-break-inside: avoid; }

▍Верхние и нижние висячие строки

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

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

P { widows: 4; }
Если возникла другая ситуация и лишь одна строка абзаца помещается на текущей странице, весь абзац будет напечатан на следующей странице. Свойство, ответственное за нижние висячие строки (orphans), по умолчанию так же установлено в 2.

P { orphans: 3; }
Смысл вышеприведённого кода заключается в том, что для того, чтобы абзац не переносился целиком на следующую страницу, как минимум три строки должны поместиться на текущей странице.

Для того, чтобы лучше в этом разобраться, взгляните на пример, подготовленный с помощью CodePen . А вот – отладочная версия того же примера, её удобнее тестировать.

*, *: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; }
Кстати, CSS-стили для печати – одно из немногих исключений, где директива!important – это абсолютно нормально;)

7. Удаление ненужного контента

Для того, чтобы впустую не тратить чернила, следует убирать из печатного варианта страницы всё ненужное, вроде огромных красивых слайдов, рекламы, средств навигации по сайту и прочего подобного. Сделать это можно с помощью установки свойства display в значение none у ненужных элементов. Вполне возможно, что вы сочтёте правильным показать лишь основное содержимое страницы, а всё остальное – скрыть:

Body > *:not(main) { display: none; }

8. Вывод адресов ссылок

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

Для того, чтобы вывести адреса ссылок после их текстовых представлений, достаточно воспользоваться следующим стилем:

A:after { content: " (" attr(href) ")"; }
Конечно, при таком подходе «расшифровано» будет много лишнего. Например, относительные ссылки, абсолютные ссылки на том же сайте, где размещена печатаемая страница, ссылки с якорями и так далее. Для того, чтобы не засорять печатную страницу, лучше будет использовать примерно такую конструкцию:

A:not():after { content: " (" attr(href) ")"; }
Выглядит это, конечно, безумно. Поэтому объясню смысл данного правила обычным языком: «Отобразить значение атрибута href около каждой ссылки, у которой есть такой атрибут, который начинается с http , но не содержит mywebsite.com ».

9. Расшифровка сокращений

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

Abbr:after { content: " (" attr(title) ")"; }

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

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

Header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

11. Медиа-запросы

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

@media screen and (min-width: 48em) { /* только для экрана */ }
Почему это так? Всё дело в том, что CSS-правила применяются только в том случае, если значение min-width равно 48em , и если media-type – это screen . Если избавиться в этом медиа-запросе от ключевого слова screen , то он окажется ограниченным лишь значением min-width .

@media (min-width: 48em) { /* все типы средств отображения информации */ }

12. Распечатка карт

Текущие версии 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; }

13. QR-коды

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

14. О печати неоптимизированных страниц

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

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

Я был ошеломлен, когда увидел этот твит - я понял, что прошло уже много времени с тех пор, как я оптимизировал стили для печати и я даже не думал об их проверке.

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

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

Я забросил домашние принтеры очень давно, так как мне всегда казалось, что они ломаются после 10 минут работы. Но не все такие, как я. - Хейдон Пикеринг (Inclusive Design Patterns)

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

1. Подключение стилей для печати

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

Body { font-size: 18px; } @media print { /* print styles go here */ body { font-size: 28px; } }

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

2. Тестирование

Вам не надо печатать страницу каждый раз, когда вы внесли небольшое изменение в стили. В зависимости от браузера, вы можете экспортировать страницу в 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

3. Абсолютные единицы измерения

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

Section { margin-bottom: 2cm; }

4. Специфические правила для страниц

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

@media print { @page { margin: 1cm; } }

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

5. Управление разрывами страниц

Так как печатные страницы, в отличие от веб-страниц, не являются бесконечными, контент будет разбиваться между страницами. У нас есть 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 строки должны помещаться на текущей странице, чтобы параграф не переносился на следующую.

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

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

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

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

7. Удаление необязательного контента

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

Вы, в принципе, можете показать только основной контент и спрятать все остальное:

Body > *:not(main) { display: none; }

8. Печать адресов ссылок

A:after { content: " (" attr(href) ")"; }

Конечно, так будут показано все: относительные ссылки, абсолютные ссылки, якоря и прочее. Следующий вариант будет работать лучше:

A:not():after { content: " (" attr(href) ")"; }

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

9. Печать расшифровок аббревиатур

Аббревиатуры должны оборачиваться элементом с указанием расшифровки в атрибуте title . Имеет смысл вывести это на печать.

Abbr:after { content: " (" attr(title) ")"; }

10. Печать фона

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

Header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

11. Медиазапросы

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

@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 */ }

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

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