Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Использование истинных цветов при печати веб-страниц

29 сентября 2017 | Опубликовано в css | 1 Комментарий »

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

 

 

У браузера Firefox в диалоговом окне есть опция печати фоновых цветов, так что пользователь может сам выбрать подходящий вариант. У браузеров Chrome и Safari есть особое свойство CSS для использования истинных цветов элементов при печати:

 

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

Это свойство можно применить к совершенно любому селектору, но оно не подействует на фон тега <body>, чтобы сохранить чернила в картридже. Но оно сработает на элементах потомках.

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

 

@media print and (color) {
        * {
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
                }
                /* правила печати демонстрационной страницы на цветном принтере */
}

Другой запрос @media в основной таблице стилей, которой обычно является файл styles.css, должен покрыть все остальные варианты печати:

 

/* основные правила печати в файле стилей styles.css */
        @media print and (monochrome) {
        /* правила печати для черно-белых принтеров, для которых не важна точность цветопередачи */
        }

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

Можно внести еще два улучшения в этот подход:

• Было бы полезно предупредить тех, кто использует цветные принтеры, о том, что для страницы портфолио может понадобиться больше чернил.

• Для наивысшего качества печати лучше отправлять на печать изображения высокого разрешения для экранов Retina.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:


�


Комментарии

Похожие статьи

Случайные статьи



Друзья

    • Самые комментируемые