Юзабилити стилей для печати

2 декабря 2008, Написано в Разное

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

Однако кроме скрытия лишних элементов, можно добавить кое-что полезное. Например, Kilian Valkhof предложил интересное решение, касающееся ссылок. После печати ссылки теряют свою функциональность, однако возможно у пользователя возникнет необходимость, перейти по ссылке, опубликованной в тексте. Следующий CSS код обеспечивает вставку после каждой ссылки значения её атрибута href.

a:after {
  content:" (" attr(href) ") ";
  font-size:90%;
  font-weight:bold
}

Результат выглядит следующим образом:

Юзабилити стилей для печати

К сожалению это не сработает в Internet Explorer 6 и 7, т.к. эти браузеры не поддерживают псевдо-элемент :after. В 8-й версии поддержка присутствует.

22 комментария к статье «Юзабилити стилей для печати»:

  1. Yuriy Drozdov:
    2 Дек 2008 в 13:38

    A list apart предлагало применять эту технику с 2002 года, но из-за отсутствия поддержки в самом распространненом браузере ее до сих пор мало кто применяет.

    Ответить
  2. Alex:
    2 Дек 2008 в 13:48

    Думаю если это использовать, пользователям IE хуже от этого не станет. Подобного рода моменты можно рассматривать, как некие плюсы использования более современных браузеров.

    Ответить
  3. ИМЯ (обязательно):
    2 Дек 2008 в 19:01

    не работает для относительных путей ссылок

    Ответить
  4. reader:
    2 Дек 2008 в 19:53

    А как же русские буквы в ссылках, например, для вики, как выкрутиться?

    Пысы. Если переходить по табу после поля е-мейл перескакивает на сайт ;)

    Ответить
  5. Alex:
    2 Дек 2008 в 20:11

    А какая проблема с русскими буквами?

    Спасибо за напоминание про перескакивание, поправил.

    Ответить
  6. ИМЯ (обязательно):
    2 Дек 2008 в 21:20

    Бред. Например, зачем оставлять при печати цвет у ссылки и подчеркивание?

    Ответить
  7. Alex:
    2 Дек 2008 в 21:32

    Можете не оставлять. Цель заметки была не в том, чтобы показать, как нужно оформлять ссылки.

    Ответить
  8. Сергей:
    2 Дек 2008 в 21:35

    Вот такая штука будет работать в ie. проверял в ie7.

    Надеюсь тут возможно вставить код.

    window.onbeforeprint = function()
{
    var links = document.getElementsByTagName('a');
    for(var i=0;i<links.length;i++)
    {
        links[i].innerHTML += '(' + links[i].href + ')';
    }
}
window.onafterprint= function()
{
    var links = document.getElementsByTagName('a');
    for(var i=0;i<links.length;i++)
    {
        links[i].innerHTML = links[i].innerHTML.substring(0, links[i].innerHTML.length - links[i].href.length - 2);
    }
}
    Ответить
  9. Сергей:
    2 Дек 2008 в 21:54

    в предыдущем комментарии надеюсь понятно, что < надо заменить на знак «меньше»

    Ответить
  10. Сергей:
    2 Дек 2008 в 21:54

    сорри

    &lt; надо заменить на знак “меньше”

    Ответить
  11. Андрей:
    3 Дек 2008 в 02:14

    можно попробовать использовать вместе с этой штукой:
    http://dean.edwards.name/IE7/
    не проверял, не знаю будет ли работать.

    Ответить
  12. Артём Сапегин:
    3 Дек 2008 в 10:06

    У меня сейчас так же сделано. А если ли возможность подчёркивать только сам урл? Без скобок и текста ссылки.

    Ответить
  13. Alex:
    3 Дек 2008 в 11:13

    Для ссылки пропишите text-decoration:none, а для a:after text-decoration:underline. Но скобки тоже подчёркиваются.

    Ответить
  14. Артём Сапегин:
    3 Дек 2008 в 11:16

    Угу, в том и проблема.

    Ответить
  15. Николай Громов (nicothin):
    4 Дек 2008 в 11:34

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

    Ответить
  16. Alex:
    4 Дек 2008 в 12:06

    Можно не делать.

    Ответить
  17. Евгений:
    4 Дек 2008 в 22:35

    Можно, конечно, и так, но лучше перечислить ссылки после текста, а в тексте указывать только их индексы.
    http://designformasters.info/posts/improving-link-display-for-print/

    Ответить
  18. Георгий:
    15 Дек 2008 в 12:48

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

    Ответить
  19. Георгий:
    15 Дек 2008 в 13:02

    Евгений, это все прекрасно, но я считаю, что подобные вещи лучше делать на стороне сервера. Алгоритм вполне можно применить аналогичный описанному. Основное преимущество в том, что мы не зависим от браузера и поддержки JavaScript’а, но получаем стабильный и предсказуемый результат.

    Для уменьшения нагрузки на сервер вывод можно кэшировать (или обрабатывать контент при размещении на сайте).

    Ответить
  20. Создатель реактивных сайтов:
    4 Янв 2009 в 17:31

    Отличная статья!!:))

    Ответить
  21. archangel:
    12 Янв 2009 в 18:19

    Ещё плюс один недостаток EI, у меня уже целый список, кого сильно интересует могу поделится.

    Ответить
  22. Nikita:
    2 Фев 2009 в 13:30

    Есть ещё вариант, когда в CSS по урлу определяется тип файла и после/перед ссылкой вставляется соответствующая иконка.
    http://www.psyked.co.uk/css/auto-matic-link-icons.htm

    Ответить

Оставь комментарий: