Site icon Vavik96

Работа с внешними ссылками

Спорный вопрос в дизайне веб-страниц – открытие ссылок в новых окнах.
Комитет по стандартизации методов по всему Интернету, 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"});
} )

Теперь все ссылки на внешние ресурсы откроются в новом окне!

 

Оригинал / Перевод

Exit mobile version