Заметки о вёрстке сайтов  ·  Александр Шуркаев об HTML, CSS и JavaScript (скрипты, справочники и примеры по сайтостроению)

Оформление гиперссылок, открывающих новое окно

2 июня 2003 г.

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

Новый сайт. Новая заметка. На этот раз речь пойдёт об оформлении ссылок, имеющих атрибут target="_blank".

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

Прежде чем продолжать, хочу отметить, что я никогда не злоупотребляю открытием ссылок в новом окне браузера и вам не советую (см. также «Об открывании новых окон»). Но иногда это действительно необходимо.

Итак, ближе к телу. Самым первым приходящим на ум решением, как же нам выделять ссылки с атрибутом target="_blank", является введение отдельного CSS стиля:

a{
text-decoration:underline
}

a.blank{
font-weight:bold
}

В этом случае мы просто ручками применяем стиль blank к нужным гиперссылкам, от чего те приобретают полужирное начертание.

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

a{
text-decoration:underline
}

a[target="_blank"]{
font-weight:bold
}

a[target="_blank"]:after{
content:" (откроется в новом окне)";
}

Сие означает, что все ссылки с атрибутом target="_blank" автоматически будут иметь полужирное начертание. Кроме того, после ссылки будет указан текст (откроется в новом окне). Плохо одно — это решение не работает в Internet Explorer любой версии. Работает на данный момент только в Opera 5+ и Netscape Navigator 6+/Mozilla.

Чтобы все ссылки с атрибутом target="_blank" автоматически имели полужирное начертание и в IE, нужно использовать конструкцию expression():

a{
text-decoration:underline;
font-weight:expression((this.getAttribute("target") && this.getAttribute("target")=="_blank") ? "bold" : "normal")
}

К сожалению, мы не ограничемся одной строкой JavaScript'а, если решим также эмулировать в IE CSS свойство content. Оставлю это в качестве домашнего задания тем, кому это нужно.

Кстати, как вы можете видеть, я реализовал поддержку ссылок с атрибутом target="_blank" в tooltip'ах.

P. S. Евгений Степанищев (aka BOLK) вполне успешно справился с домашним заданием:

font-weight:expression((this.getAttribute("target")=="_blank" && this.getAttribute("done") == null) ? ((this.innerHTML+=unescape(' %28в новом окне%29')),(this.setAttribute('done','yes')),"bold") : "normal")

Хитовые статьи про разработку сайтов

Рассылка новостей и новых статей

Сообщения будут приходить пару раз в неделю, не чаще

Объявления

LiveInternet