Глава 8.13. Ссылки, подчёркивания

Здесь мы будем говорить об активных элементах. Не обязательно они должны верстаться именно тегом <a>, они вполне могут быть «кнопками», если таково их предназначение с точки зрения семантики.

Основные атрибуты, которые характерны для ссылок:

· href="#" — собственно ссылка (на внешнюю страницу или якорь);

· target="_blank" — цель, в этом значении — открытие в новом окне;

· download — скачивание файла, на который ведёт ссылка;

· rel="nofollow" — ссылка ведёт на материал, с которым поисковые роботы не должны ассоциировать ваш сайт. Комментарий Google по этому поводу;

· lang="fr" — по ссылке контент на французском языке. Коды языков: IANA Language Subtag Registry;

· hreflang="de" — означает, что по ссылке — дубликат страницы на немецком. Комментарий Google по этому поводу;

· type="text/html" — указывает на MIME-тип материала по ссылке. Список MIME-типов.

Самое важное в работе со ссылками — не испортить дизайном юзабильность (удобство в использовании). А именно: с первого взгляда на сайт должно быть ясно, где именно у него активные элементы. И это должно подтверждаться при изменении состояния, то есть должны быть продуманы и внятно воплощены стили для псевдоклассов:hover,:active,:visited и:focus. У:focus, например, есть стили по умолчанию, они несколько отличаются от браузера к браузеру.

Значения состояний:

·:hover — наведение мыши;

·:active — клик (мышью или с клавиатуры);

·:visited — посещённая ссылка;

·:focus — ссылка выбрана при переключении с клавиатуры.

Традиционно ссылка имеет отличающийся цвет и/или подчёркивание. Иногда — и то и другое. Может быть фон, например, с обводкой, или даже градиентом.

В работе со ссылками используются селекторы атрибутов, которые позволяют выбрать типы селекторов. Это позволяет декорировать ссылки не по классам, а по их содержанию, отделить ссылки для скачивания от ссылок на страницы внутри сайта и на внешние ресурсы.

 

a[href*="css"]  /* Применится к ссылкам, в URL которых есть сочетание букв css */

a[href^="https://"] /* Применится к ссылкам, которые начинаются с https:// */

a[href$=".jpeg"] /* Применится к ссылкам, которые заканчиваются на.jpeg */

a[type="image/jpeg"] /* Применится к ссылкам, которые помечены атрибутом type как jpeg или jpg */

Работать с селекторами такого типа мы учим в главе «Селекторы, часть 3» интерактивных курсов.

Ссылка на номер телефона размечается с помощью специального префикса перед адресом ссылки — tel:.

<a href="tel:[phone]">8-912-345-67-89</a>

Стилизоваться такая ссылка может с помощью CSS-селектора a[href^="tel:"].

a[href^="tel:"] {

font-size: 16px;

line-height: 32px;

text-decoration: none;

color: #000000;

}

Ссылка на электронную почту обычно в HTML размечается похожим образом: в адресе ставится префикс mailto:.

<a href="mailto:[e-mail]">[e-mail]</a>

Для стилизации ссылки на электронную почту можно воспользоваться CSS-селектором a[href^="mailto:"].

a[href^="mailto:"] {

font-size: 16px;

line-height: 32px;

color: #000000;

}

Пример нескольких ссылок в одном параграфе:

<p>

«У многих <a href="https://cats.info" target="_blank">котов</a> прямо на морде написано, что они Настоящие. Если вам попадётся на глаза кот <a href="img/this-look.jpg">такой</a> наружности, будто ему зажали голову в тиски и несколько раз двинули по морде молотком, обёрнутым в тряпку, можете не сомневаться: перед вами Настоящий кот». (<cite>The Unadulterated Cat, <a href="autors/pratchett.html">Терри Пратчетт</a></cite>)

</p>

Разберём подчёркивания. Чтобы убрать стандартное подчёркивание — применим text-decoration: none;.

Обычно для ссылок применяется ограниченное количество стилистических приёмов, а задуманных для этого свойств и того меньше. В их числе новое свойство text-decoration-style. Давно знакомое нам свойство text-decoration стало составным, позволяя управлять оформлением текста более детализированно.

Пока не все свойства text-decoration работают хорошо. Например, text-decoration-skip, которое должно заставить пропускать пробелы или определённые элементы, пока работает только в Safari. Свойство text-decoration-thickness, позволяющее задавать толщину, тоже работает пока что не везде. Проверяйте в CanIUse.

 

.link {

text-decoration: underline;     /* Показывает, что текст подчёркнут */

text-decoration-color: #da5530; /* Цвет линии */

text-decoration-style: double;  /* Стиль линии — двойной */

text-decoration-skip-ink: auto; /* Пропускает элементы шрифта */

text-underline-position: auto;  /* Со значением under линии опустились бы ниже */

}

Значения text-decoration-style

· solid — сплошная линия;

· double — двойная сплошная линия;

· wavy — волнистая линия;

· dotted — точки;

· dashed — штрихи.

Свойства box-shadow или border-bottom позволяют сделать подчёркивание другого цвета и даже с изысками. Проблема только в том, что это «костыль», расположение линии, сделанной таким образом, зависит от интерлиньяжа, и если шрифт увеличить, а интерлиньяж задан в абсолютных единицах, то подчёркивание может превратиться в зачёркивание.

 

.link {

text-decoration: none;

border-bottom: 2px solid #da5530;

font-size: 16px;

line-height: 18px;

}

Так могла бы выглядеть часть технического задания, посвящённая ссылкам

 

a {

text-decoration: none;

font-family: "Montserrat", "Arial", sans-serif;

font-style: normal;

font-weight: normal;

font-size: 16px;

line-height: 20px;

color: #0083ff;

}

 

a:visited {

color: #8d00bf;

}

 

a:hover {

color: #0063bf;

border-bottom: 1px solid #0063bf;

cursor: pointer;

}

 

a:active {

padding: 10px;

border: 2px solid rgba(0, 131, 255, 0.4);

box-sizing: border-box;

border-radius: 2px;

}

Замечание

Для состояний ссылок очень важно соблюсти порядок, в котором будут записаны селекторы с псевдоклассами. Обязательно размещайте их в следующей последовательности:

a { color: red; }

a:visited { color: grey; }

a:hover { color: blue; }

a:active { background-color: yellow; }

Если поменять строки местами, то согласно правилам каскадности, некоторые стили перестанут работать. Дело в том, что ссылка может находиться одновременно в двух состояниях, к примеру, в:visited и в:hover, и если расположить стили для:hover выше, чем стили для:visited, то они перекроют последние.

Важно сделать декорирование ссылок таким, чтобы пользователю было очевидно, что перед ним именно активный элемент, на который нужно нажать.

Можно изменить вид курсора. Самое стандартное — сделать при наведении курсор в виде руки: cursor: pointer;, его хорошо и правильно делать при наведении на ссылку, это позволяет пользователю понять, что элемент кликабельный. Такая стилизация ссылок есть в браузерах по умолчанию.

Как мы уже знаем по семантической разметке, не всё, что выглядит как кнопка, должно верстаться тегом <button>. Обычно кнопки оформляются с помощью внутренних отступов, рамок и фонов.

Текст кнопки должен быть коротким, ёмким и призывным. Если ваш текст не помещается в кнопку — текст следует сократить, и точно не стоит переносить его на новую строку. Зачастую максимальные размеры кнопки специально ограничивают. Кнопка обычно выглядит довольно ярко и может отвлекать от собственно текста.

Методика~ 3 минуты