Geek Rants Почему так много веб-сайтов не используют таблицы стилей печати?

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

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

Что такое таблицы стилей печати?

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

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

Добавить таблицу стилей для печати так же просто, как вставить эту единственную строку на страницу HTML - часть кода media = print говорит браузеру, что использовать эту таблицу стилей нужно только при печати.

Этот файл обычно выглядит примерно так:

#sidebar, #footer, #navigation, #sharinglinks, #topad, #comments display: none

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

Очевидно, вы бы предпочли напечатать один из них над другим, верно?

Примеры сбоя таблицы стилей печати

К сожалению, есть просто огромное количество огромных веб-сайтов, которые вообще не удосужились реализовать это. Посмотрите, что происходит, когда вы пытаетесь печатать из New York Times:

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

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

К счастью, некоторые сайты используют их

Вот пример правильно отформатированного печатаемого представления - без необходимости искать какую-либо ссылку для печати. Сайт BBC News аккуратно форматирует статьи для печати в комплекте с пользовательским заголовком. Они включают комментарии в виде печати, но это все еще хорошо сделанная работа.

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

Итак, подведем итоги ... пожалуйста, уделите 5 минут, необходимых для реализации таблицы стилей печати для вашего сайта!