Ссылки при печати

02 12/08

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

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

1
2
3
4
5

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

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

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

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

Теги:

Обсуждение:

  1. Yuriy Drozdov

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

    Ответить
  2. Alex

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

    Ответить
  3. ИМЯ (обязательно)

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

    Ответить
  4. reader

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

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

    Ответить
  5. Alex

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

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

    Ответить
  6. ИМЯ (обязательно)

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

    Ответить
  7. Alex

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

    Ответить
  8. Сергей

    Вот такая штука будет работать в 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. Сергей

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

    Ответить
  11. Андрей

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

    Ответить
  12. Артём Сапегин

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

    Ответить
  13. Alex

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

    Ответить
  18. Георгий

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

    Ответить
  19. Георгий

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

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

    Ответить
  21. archangel

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

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*