Главная/ HTML и CSS приемы | Обходим баги, находим интересные решения/ Css Tricks/ Оформление внешних ссылок

Задача

Задать особое оформление для внешних ссылок, имеющих атрибут target=»_blank».

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

внешние ссылки на Википедии

Решение

Первое, что приходит в голову: прописать дополнительный класс — и готово! Например так:

CSS:



.outLink{
background:url(images/outLink.gif) right 2px no-repeat;
padding-right:14px;
}

HTML:


<a href="#" title="внешняя ссылка" target="_blank" class="outLink">Ссылка</a&gt;

Но введение дополнительного класса будет тут очень неудбно! Ведь пользователю сайта придеться постоянно следить за этим, добавляя ссылки. Более того, этот класс абсолютно лишний! Оформление можно привязать прямо к атрибуту target.

CSS:



a[target="_blank"]{
background:url(../images/outLink.gif) right 2px no-repeat;
padding-right:14px;
}

HTML


<a href="#" title="внешняя ссылка" target="_blank" >Ссылка</a&gt;

Остался еще один нюанс — наш горячо любимый ie6! Для него прописываем в CSS:



* html a{
z-index: expression( /* оптимизированный expression, который сработает только при загрузке страницы */
runtimeStyle.zIndex = 1,
target == "_blank" ? (className += "outLine") : 0 /* добавляем нужный класс */
)
}
* html a.outLine{
background:url(../images/outLink.gif) right 2px no-repeat;
padding-right:14px;
}

Результат.

Проверено в:

Плюсы метода:

  • достаточно прост
  • оптимизированный expression отработает только один раз при загрузке страницы
  • дает возможность оставить более чистый (без лишних классов) код программистам и поисковым роботам

Недостатки:

  • не проходит валидацию
Теги: CSS приемы