Geek Rants Чому так багато веб-сайтів не можуть використовувати Print Stylesheets?

Вона ніколи не перестає дивувати мене, що люди повинні шукати посилання або кнопку, яка говорить "Друк" на веб-сторінці, особливо враховуючи, що є чудо-технологія, яка робить цей крок непотрібним. Смутно майже ніхто не використовує його, хоча це… 10 років.

Це не тільки нерозумно вимагає додаткового кроку для друку, але використання стилів друку може заощадити трохи чорнила для тих, хто не використовує посилання для друку. І, звичайно, є багато людей, які використовують друк до PDF для збереження статей надалі, не витрачаючи паперу.

Що таке друк таблиць стилів?

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

Для тих, хто незнайомий, CSS означає Cascading Style Sheets, і це те, як ваш браузер знає, як форматувати вихідний код HTML для веб-сторінки в те, що ви дійсно бачите на екрані. Все, починаючи від шрифтів, кольорів, меж і навіть фонових зображень, можна вказати в таблиці стилів.

Додавання таблиці стилів друку настільки ж просте, як підключення цієї однієї рядки до сторінки HTML-медіа = друк частини коду, яка повідомляє веб-переглядачу використовувати лише цю таблицю стилів під час друку.

Цей файл, як правило, виглядає приблизно так:

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

Так, це дійсно так просто. Отже, як це працює? Нижче наведено приклад звичайної веб-сторінки зліва з усіма навігаційними даними, логотипом і оголошеннями, які чітко видно з ідентифікатором ідентифікатора, а праворуч - тією ж сторінкою, де застосована таблиця стилів друку, приховуючи всі ці елементи.

Очевидно, ви віддаєте перевагу друкувати одну з них над іншою?

Приклади невдалої таблиці стилів

На жаль, є просто величезна кількість величезних веб-сайтів, які взагалі не поспішали реалізувати це. Погляньте на те, що відбувається, коли ви намагаєтеся надрукувати з New York Times:

Деякі сайти, як-от мережа сайтів Gawker, ще гірше. Мало того, що вони не мають вигляду для друку, коли ви намагаєтеся друкувати, вона нагадує чорнильний суп. Наскільки ми можемо сказати, немає можливості друкувати з сайту Gawker, не використовуючи окрему послугу, наприклад, читання, або вручну висвітлюючи вміст сторінки, що практично неможливо на новому дизайні..

Дуже сумно. Навантаження на найбільші сайти просто не допомагають реалізувати цю функцію.

На щастя, деякі сайти використовують їх

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

Там дуже багато інших сайтів, які роблять те ж саме, як ArsTechnica і ... наш сайт, але було б нерозумно показати скріншоти всіх з них. У нашому дослідженні, сайти, які правильно реалізували їх, мало і далеко між ними.

Отже, щоб завершити… Будь ласка, візьміть 5 хвилин, необхідних для реалізації таблиці стилів для вашого сайту!