Все мы понимаем, что иногда ссылки удобней открывать в текущем окне, а иногда - в новом. Я лично в большинстве проектов придерживаюсь незамысловатого правила - если ссылка внутренняя (в пределах сайта), то по умолчанию она открывается в текущем окне, а внешние ссылки, ведущие куда-то на другие сайты, по умолчанию открывают новые окна (вкладки).

С точки зрения HTML открыть ссылку в текущем или новом окне элементарно. Если в теге ссылки

<a href="URL-адрес" target="окно">...</a>

атрибут target не указан или задан в виде target="_self", то документ открывается в текущем окне браузера, а если ссылке назначен атрибут вида target="_blank", документ открывается в новом окне.

Но тогда возникает вопрос - как пользователь отличит эти 2 вида ссылок, не щелкая по ним или не заглядывая в HTML-код страницы?

Логичней всего, если CSS-оформление двух видов ссылок будет разным, вот вариант, при котором ссылки с target="_blank" выделяются жирным шрифтом:

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

Здесь, как это часто бывает, приходится отдельно учитывать Internet Explorer и остальные браузеры, первое стилевое указание - как раз для IE, а второе - для остальных браузеров.

Аналогично можно поэкспериментировать с каким-либо другим свойством CSS, например, с подчёркиванием text-decoration:

a {
 text-decoration:expression((this.getAttribute("target") && this.getAttribute("target")=="_blank") ? 
  "underline" : "none");
}
a[target="_blank"] {
 text-decoration:underline;
}

В зависимости от иерархии свойств CSS, в конкретном браузере может чего-нибудь и не сработать. Плюс задействовать подчёркивание, когда по умолчанию все ссылки и так подчёркнуты (или не подчёркнуты), я бы не стал.

Альтернативный и кросс-браузерный путь - попробовать отделить внешние ссылки от остальных по их адресам. Предположим, что внешние ссылки всегда указываются как абсолютные (начиная с префикса http://), а внутренние пишутся как относительные. Чаще всего на нормальных сайтах так и делают. Это работает и в IE, по крайней мере, с 8-й версии.

A[href^="http://"] { 
 font-weight: bold /* Жирное начертание для абсолютных ссылок */
}

Но здесь мы отклонились от исходной задачи и просто требуем, чтобы URL начинался с http://, то есть, выделяем жирным начертанием абсолютные URL, которые не обязательно внешние, а не все ссылки, открывающиеся в новом окне.

Если не принимать во внимание IE 6 и 7 версий, можно всё сделать проще, через псевдоэлементы before и after, позволяющие указать, что нужно выводить до или после элементов, к которым они добавляются.

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

Однако мне кажется, что логичней просто изменить оформление фона ссылки, открываемой в новом окне - ведь добавление какого-либо текста или картинки до или после ссылки может нарушить макет сайта. Чтобы не мучиться, мы поставим желтоватый фоновый цвет всем ссылкам, открываемым в новом окне.

a[target="_blank"] { 
 background-color: #FFFF99;
}
a {
 background-color: expression((this.getAttribute("target") && this.getAttribute("target")=="_blank") ? 
  "#FFFF99" : "transparent");
}

По-прежнему сделаны отдельные стилевые указания для Internet Explorer и остальных браузеров.

А можно попробовать прилепить и фоновый рисуночек через свойство background.

Что касается ссылок-рисунков, то наш приём сработает только если таковые имеют прозрачный фон.

Но в большинстве случаев рисункам-ссылкам какое-то особое выделение и не нужно, оно ясно из контекста (например, если маленькие рисунки-preview являются ссылками на большие рисунки, загружаемые в новые окна).

Результат Вы можете видеть, например, в этом блоге, я только что добавил показанные здесь директивы в его стиль. Кстати, если посоветуете более подходящий цвет - буду только рад :)

гостевая; E-mail