Работа с внешними ссылками
Спорный вопрос в дизайне веб-страниц – открытие ссылок в новых окнах.
Комитет по стандартизации методов по всему Интернету, W3C оставляет это на усмотрение пользователя. Посетитель может открыть в том же окне, в новом окне или во вкладке.
Идентификация внешних ссылок.
Имеется в виду, что ссылка на другой сайт будет больше отличаться от внутренней, если она будет отмечена стрелкой. Это отличие заметно, если вы поместите мышь над ссылкой. Это реализуется с помощью псевдо-элемента “:after“. При этом фон внешней ссылки наплывает за полсекунды слева направо, для этого используется псевдо-элемент “:before“.
Пример ссылки на внешний веб-сайт
Код выглядит это следующим образом:
<a class="extern" href="#exlink" title="Внешняя ссылка:
Внешний вид страницы: пример ссылки на внешний веб-сайт" >
Пример ссылки на внешний веб-сайт
</a>И необходимые строки в CSS :
a.extern {
position: relative;
color: #0972b4;
display: inline-block;
vertical-align: bottom;
letter-spacing: .2em;
}
a.extern:before {
position: absolute;
content: '';
z-index: 1;
width: 0;
height: 100%;
border-radius: 5px;
background: rgba(52,73,94,.2);
transition: .5s;
}
a.extern:hover:before,
a.extern:focus:before {
width: 100%;
}
a:link.extern:after {
content: '➤';
}
a:visited.extern:after {
content: '➢';
}
a:hover.extern:after,
a:active.extern:after,
a:focus.extern:after {
content: '➔';
}Раньше нужно было стрелку прописывать как отдельную картинку, а теперь то же самое можно сделать с помощью CSS свойства “content”. И сэкономить ещё один запрос к веб-серверу, так называемый HTTP-Request.
Осторожно! Ограничения при использовании псевдо-класса “:visited”
Уже давно было заявлено о прекращении поддержки CSS псевдо-класса“:visited” по соображениям безопасности, и теперь некоторые браузеры уже перестроились.
Если вы уже посетили веб-сайт или ссылку на другую страницу внутри домена, псевдо-класс “:visited” позволяет в Internet Explorer 8 изменять цвет и размер символов. В Internet Explorer 11 можно изменить только цвет и Firefox игнорирует псевдо-класс “:visited” полностью!
В этом примере “:visited” ещё присутствует, но рано или поздно эта информация из CSS исчезнет.К сожалению, посещенные страницы больше не будут выделены!
Открытые внешней ссылки в новом окне
Если в ходе работы над проектом, вы в какой-то момент решили, что внешние страницы должны открываться в новом окне, то вам придется пересмотреть все страницы. Это, конечно, много работы, но есть более простой способ.
Со следующими фрагментом кода все внешние ссылки, автоматически будут снабжены target=”_blank”. В этом случае, селектор атрибута будет запрашивать “HTTP: //” и исключать собственный домен.
$(function () {
$("a[href*="http://"]:not
([href*="http://www.webdesign-klamonfra.de/"])")
.attr({target: "_blank"});
} )Теперь все ссылки на внешние ресурсы откроются в новом окне!
