Разные стили для внутренних и внешних ссылок

Разные стили для внутренних и внешних ссылок Как сделать разные CSS-стили отдельно для внешних ссылок и для внутренних ссылок.

На многих сайтах внешние ссылки оформляется иначе, чем внутренние (например, в конце ссылки добавляется пиктограммка). Это повышает удобство сайта, т.к. пользователь еще не наводя мышкой на ссылку (чтобы увидеть подсказку) и не кликая по ней, информирован, что по этой ссылке перейдет на другой сайт. Пример — оформление внешних ссылок на Википедии:

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

 

Для реализации этого первое, что приходит в голову — прописать дополнительный класс. Например так:

CSS:

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

HTML:

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

Но введение дополнительного класса в данном случае не лучший вариант. Представь себе пользователя, который работает только с админ панелью CMS и знать не знает ни про какие HTML теги. И вот ему придется ради оформления внешних ссылок, лезть в код, и ставить класс вручную — как минимум не удобно.

 

Задача

Сделать оформление внешних ссылок не напрягая пользователя.

 

 

Решение 1 — программное решение

 

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

 

 

Решение 2 — привязываем оформление к атрибуту target="_blank"

 

CSS:

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

HTML

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

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

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

Проверено в:

  • IE 6-8
  • Firefox 2-3
  • Opera 9.5
  • Safari 3.1

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

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

Недостатки:

  • не проходит валидацию (использование атрибута target запрещено по стандартам (Strict 1.0 / XHTML 1.1))

 

 

Решение 3 — ищем сигнатуру в атрибуте href

 

Суть решения в том, что внешние ссылки можно отличить от внутренних по характерному началу адреса. Это может быть, например http или https, которые могут не использоваться для внутренних ссылок. Или наоборот, внутренняя ссылка начинается с определенной строки. В этом варианте можно отказаться от невалидного target.

CSS:

a[href^="http"]{
background:url(path-to/outLink.gif) right 2px no-repeat;
padding-right:14px;
}

Как всегда для ie6 особое решение &mdash через expression:

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

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

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

Недостатки:

  • возможны затруднения с подбором сигнатуры
Источник: www.xiper.net

dlrm
Разработчик на джумле, автор многих идей проектов.

Вы можете почитать все статьи от dlrm'а.



Другие статьи по этой теме:

Комментарии (4)     Подпишитесь на RSS комментариев к этой статье.

4 комментариев

#419
almix говорит:
April 7, 2012 at 02:44 am
А как сделать, если на сайте уже часть ссылок абсолютные, а часть нет? То есть надо анализировать так - a([href^="http"]) && a:not([href^="http://loco.ru"]) -  если ссылка начинается на http, но при этом это не loco.ru, то показать, что это внешняя ссылка. Как это сделать? Как? Как? Как?
#420
dlrm говорит:
April 7, 2012 at 11:00 am

Я сделал так:

a[href^="http"]{стиль внешних ссылок}

a[href^="http://loco.ru"]{стиль внутренних ссылок}

a{стиль внутренних ссылок}


В Мозилле и последнем Эксплорере работает отлично.



#421
almix говорит:
April 7, 2012 at 11:50 am

Чудесно. Спасибо! Правда немного пришлось усложнить. Вот как выглядит css стилизация для сайта loco.ru:

a:link, a:visited, a:active, #footer a[href^="http"] {
    padding: 0;
    background: none;

a[href^="http"] { 
background:url('external-link-orange.png') right 2px no-repeat;
padding-right:14px;
}
a[href^="http://loco.ru"] { 
background: none;
color: #801000;
    margin: 0 0 0;
    padding: 0;
    text-decoration: underline;
}
a:link, a:visited, a:active {
    color: #801000;
    margin: 0 0 0;
    text-decoration: underline;
}


#857
Сергей говорит:
April 27, 2013 at 08:02 pm
Спасибо большое, за полезный материал ! Написал класс для внешних ссылок, а лень заставила еще и найти ваш сайт, чтобы узнать как применить его автоматом ко все ВНЕШНИМ ссылкам.