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

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

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

<header>
        <h1>Tower Corporation</h1>
        <h2>Making the future</h2>
</header>

И добавить ему такой код CSS:

header {
        background: #000;
        color: #fff;
        padding: 1rem;
        font-family: Avenir, Arial, sans-serif;
}

Получим следующий результат в браузере:

И почти полностью инвертированный результат на печати:

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

Браузеры не вносят никаких изменений цветов при печати изображений. Если изображение непрозрачное, как показано ниже на примере логотипа, созданного Trevor Sutherland:

<header>
        <h1><img src="tower-corporation-logo.png" alt="Tower Corporation Logo" style="float: right">Tower Corporation</h1>
        <h2>Making the future</h2>
</header>

То принтер напечатает следующее:

Результат печати выглядит еще хуже, если логотип — это файл в формате png с картой прозрачности или SVG:

Использование фильтров CSS3 для улучшения результата печати веб-страниц

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

@media print {
        header {
                background: none;
                color: #000;
        }
        header img {
                -webkit-filter: invert(100%);
                filter: invert(100%);
        }
}

Теперь результат печати выглядит так:

Для старых версий браузера Firefox нужно использовать SVG эквивалент фильтра. Рекомендуем сохранить этот код как отдельный файл invert.svg, хотя его также можно включить в код HTML страницы:

<svg xmlns="http://www.w3.org/2000/svg">
        <filter id="negative">
                <feColorMatrix values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" />
        </filter>
</svg>

Добавим новый фильтр в наш код CSS:

@media print {
        header {
                background: none;
                color: #000;
        }
        header img {
                filter: url(inverse.svg#negative);
                -webkit-filter: invert(100%);
                filter: invert(100%);
        }
}

Lea Verou разработала решение для старых версий браузеров, включая Internet Explorer версии 9, хотя оно довольно сложное и использует инвертированное значение цвета в коде CSS. Этот код вызовет конфликты с кодом CSS выше, так что рекомендуем поместить его в условный комментарий:

<!--[if IE 9]> 
        <style>
                @media print {
                        header:after {
                                content:"";
                                display: block;
                                height: 1px; width: 1px;
                                position: absolute;
                                top: 100px;
                                right: 100px;
                                outline: 100px solid invert;
                        }
                }
        </style>
<![endif]-->

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

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

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

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

• Использование истинных цветов при печати веб-страниц
• Создание более плотных абзацев с использованием переноса слов CSS3
• Фоновые изображения для экранов Retina с использованием свойства задания изображения