Выделение внешних ссылок при помощи CSS

Выделение внешних ссылок при помощи CSS

Простой способ обозначить на сайте внешние ссылки специальной картинкой. При этом картинка добавляется автоматически.

Во-первых, о чем речь? Внешние ссылки — ссылки на другие сайты, внутренние ссылки — соответственно, на внутренние страницы собственного сайта.

С внешними ссылками все понятно. Если мы ссылаемся на Гугл, например, то пишем полный адрес http://www.google.com/. Префикс http:// и означает, что ссылка внешняя.

Внутренние ссылки также могут начинаться с этого префикса. Тогда они будут называться абсолютными. Если же мы напишем ссылку в виде: /about.html, то это будет уже относительная ссылка, которая показывает, что путь к странице about.html лежит от корня сайта.

Зачем же их (внешние ссылки) как-то выделять? Да просто для информирования посетителя, что ссылка идет на другой ресурс. Это что-то вроде сетевого этикета.

Реализовать такое выделение можно, используя новые возможности, которые предоставляет CSS3. Смысл таков: когда мы в тексте вставляем ссылку на внешний ресурс, то она автоматически добавляет иконку-стрелку externallink. Чтобы это заработало, нужно в листе стилей CSS для тэга «а» прописать следующее правило:

a[href^="http://"]:not([href*="websovet.com"])::after {
content: url(external.png);
}

Поясним, что тут и зачем. Когда в тексте появляется внешняя ссылка (с префиксом http), то данный код сразу за ссылкой (::after) подставляет в строку картинку (content: url(external.png);). При этом исключается наш собственный домен — :not([href*=»websovet.com»]). Таким образом, если вы ссылаетесь на чужой сайт, то стрелка появляется, а если на страницы собственного, то нет.

Все замечательно, кроме одного: эту конструкцию поддерживают не все браузеры. Работает в Firefox, IE 7, Opera 9,5.

Пример 1

Другим решением, которое работает во всех в некоторых более ранних браузерах (например, Опера 9,1), будет следующая запись:

a[href^="http://"] {
background: url(external.png) no-repeat 100%;
padding: 0 10px 0 0;
color: #069;
}

Здесь мы просто показываем, что все ссылки с префиксом http будут иметь в качестве фона картинку со стрелкой. Значение в 100% помещает картинку в крайнем правом положении. Однако такой код не распознает где ссылка на внешний ресурс, а где на свой собственный. Поэтому придется все свои внутренние ссылки прописывать в виде относительных.

Пример 2

23.09.2008

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5,00 out of 5)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

Оставить комментарий: