Создайте страницу для печати с Gutenberg.css

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

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

Названная в честь изобретателя печатного станка Йоханнеса Гутенберга, эта библиотека CSS является автономным ресурсом для дизайна печатных страниц.
Вы просто добавляете файл gutenberg.css в заголовок документа, и все готово.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Всякий раз, когда посетитель отправляется на печать вашей страницы, он автоматически переустанавливается в зависимости от настроек печати. Это можно установить с помощью HTML-атрибута media = “print”.

Читайте также: Использование CSS3 Page Break для организации печати страниц

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

Приятной особенностью Гутенберга является то, что он поставляется с дополнительными классами и стилями.

Копаться в папка тем и вы найдете три альтернативные темы печати: книга, современный и старый стиль. Вы можете сделать любой из них по умолчанию, добавив их поверх файла gutenberg.css по умолчанию.
Кроме того, вы можете по-разному оформить страницу для печати, добавив определенные классы CSS. Например, класс .no-print полностью скрывает элемент в стиле печати.

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

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

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

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

Читайте также: Дизайн пользовательского интерфейса: применение CSS на основе ориентации экрана