Привет! Это первая статья из серии разборов элементов веб-вёрстки для дизайнеров интерфейсов (и немного аналитиков). Разберём атрибуты разных тегов, свойства, которые можно к ним применить, поведение в разных обстоятельствах. А главное – как они влияют на то, что видит пользователь на экране (и слышит), и какие неочевидные моменты можно продумать в дизайне заранее.
Начнём со ссылок, которые обозначаются в HTML тегом <a></a>.
Материал будет лучше усваиваться, если вы уже понимаете, как устроены в целом HTML и CSS и заглядывали мельком в DevTools (консоль разработчика). Я использую обобщения и опускаю технические моменты, которые могут не влиять на видимое пользователями, но остаются критичными для разработки и экранного «закулисья». Приглашаю вас вооружиться знаниями, но всегда советоваться с разработчиками и заранее проверять с ними дизайн-решения.
Ссылка в вёрстке не обязательно текстовая. Внутри тега <a></a> может быть картинка, иконка, список, контейнер, таблица и многое другое. Единственное ограничение – в ссылку не вкладывают интерактивные элементы, в том числе другие ссылки, кнопки, контролы.
Атрибут href
Это, собственно, сама ссылка. Если просто задать значение атрибуту, например:<a href="https://www.ozon.ru/"></a>, то пользователь пока ничего не увидит, ведь между открывающим и закрывающим тегом ничего нет. А вот так:<a href="https://www.ozon.ru/">Перейти на Озон</a> – на странице появится кликабельная ссылка «Перейти на Озон».
При наведении на ссылку многие популярные браузеры отображают в левом нижнем углу адрес из атрибута href. Например, это все браузеры на базе движка Blink: Yandex, Chrome, Opera, Edge и др.
А скажем, Safari не показывает ссылку при наведении. В сообществах иногда просят помощь с тем, чтобы «отключить» это отображение. Но так делать не стоит: безопаснее, когда пользователь может без специальных знаний увидеть, по какому адресу переходит. С мобильных устройств его, кстати, можно увидеть в контекстном меню по долгому нажатию.
Якорную ссылку можно узнать по решётке перед id элемента, например:href="/#services". Кстати, чтобы отправить пользователя по клику вверх страницы, id не нужен. Для этого пишут href="#top" или href="#". Так и работают на сайтах кнопки «Вверх».
По умолчанию переброс пользователя по якорной ссылке выглядит резко. Чтобы сделать скролл плавным, ссылке назначают CSS-свойство scroll-behavior: smooth. А чтобы точнее настроить итоговое положение скролла, назначают CSS-свойство scroll-margin и указывают, на сколько пикселей сместить скролл вверх или вниз относительно блока.
В качестве значения может быть не только URL, путь или id элемента, но и телефон или почта:
href="tel:+79996009060"href="mailto:example@gmail.com"
По клику на номер телефона устройство пользователя предложит совершить звонок или другое возможное действие с номером телефона в установленных приложениях (набор действий зависит также и от ОС).
По клику на почту устройство предложит открыть почтовую программу по умолчанию в данной ОС или ту, которую пользователь сам настроил, как предпочтительную для подобных ссылок.
Кроме того, с помощью дополнительных параметров можно предустановить:
тему письма
текст письма
и даже почтовые адреса получателей копии (и явной, и скрытой)
Атрибуты title и aria-label
Title хранит в себе текст, который нужно отобразить при наведении на ссылку в нативной всплывающей подсказке. Её внешний вид зависит от операционной системы, а сам текст не обязательно делать таким же, как название ссылки.
Aria-label тоже хранит в себе описательный текст для ссылки. Но он не отображается визуально, а служит для инструментов доступности. Это текст, который будет озвучен скринридером при фокусировании на элементе.
Aria-label лучше не использовать для текстовых ссылок, чтобы скринридер как бы не озвучивал ссылку дважды: по её названию и по aria-label. Чаще всего достаточно названия. Также не рекомендуется назначать aria-label иконкам и картинкам-ссылкам, у которых прописан атрибут alt. Тоже для того, чтобы суть изображения не озвучивалась скринридером дважды.
Во остальных случаях, когда у ссылки нет иных атрибутов и параметров, которые озвучиваются скринридерами, обязательно нужен aria-label.
Атрибут target
Определяет, где откроется указанная ссылка:target="_self" – на той же вкладке взамен текущей страницыtarget="_blank" – в новой вкладке или в новом окне браузера (зависит от его настроек, но чаще всего в новой вкладке)
По умолчанию все ссылки открываются в той же вкладке, даже если не указать атрибут target.
Есть ещё два значения: "_parent" и "_top". Они встречаются там, где используются фреймы (как бы «страницы внутри страницы»). По сути, они позволяют сделать так, чтобы кликнутая во фрейме ссылка открылась целиком во всей вкладке, а не внутри своего фрейма. И для пользователя всё выглядело так, будто он просто перешёл на другую страницу. Обычно дизайнеру достаточно уточнить для разработчика, открыть ссылку в той же вкладке или в новой.
Атрибут download
Если добавить ссылке атрибут download:<a href="documents/example.pdf" download></a>, то браузер предложит пользователю скачать файл, указанный по ссылке. Файл может быть любого формата.
По умолчанию скачается файл с тем названием, которое у него уже есть. Но можно задать другое название при скачивании, и это не изменит изначальное название файла. Например, благодаря:download="Мой пример договора", указанное значение отобразится как предустановленное в окне сохранения файла. Лучше не использовать специальные знаки, т.к. вероятнее всего, они будут автоматически конвертированы в нижние подчёркивания. К тому же, у файловых систем есть ограничения на использование специальных знаков в названиях файлов.
Можно также настроить настроить разные названия для разных условий. Скажем, при скачивании документа в личном кабинете мы хотим добавить к названию договора фамилию пользователя, месяц или год. Тогда одними средствами HTML не обойтись: разработчик подключит Javascript, который обработает условия и подставит в HTML нужное значение.
Состояния активной ссылки
Активная ссылка, в свою очередь, бывает в разных состояниях. Их можно дифференцировать визуально. Давайте посмотрим в консоли разработчика, какие состояния могут быть у ссылки:
В CSS-файле эти состояния прописываются при помощи одноимённых псевдоклассов. Грубо говоря, это выглядит, например так:a:hover {и значит: "текст ссылки при наведении становится розовым".
color: #ff35eb;
}
Состояния в дизайне удобно называть так же, как в коде. Разработчикам понятнее, дизайнеры не путаются. Рассмотрим состояния ссылок (у других интерактивных элементов их бывает больше).
Active – элемент в момент тапа пальцем, клика мышью или нажатия клавиши выбора с клавиатуры (при работе с инструментами доступности).
Hover – элемент при наведении на неё курсора. На мобильных устройствах свойство проявляется, если на ссылку тапнуть и не отпускать.
Visited – «посещённая» ссылка (при этом пользователь не взаимодействует с ней прямо сейчас).
Focus и focus-visible. Давайте поэкспериментируем. Предположим, мы хотим заказать плитку, но у нас есть возможность работать только на десктопном устройстве и только с клавиатуры. Посмотрим несколько первых ответов в гугле на «купить плитку». Переходите по ссылкам и нажимайте клавишу Tab:
https://www.keramogranit.ru/
https://petrovich.ru/catalog/10042/
https://santehnika-online.ru/plitka/keramika/
Хм. Ничего не происходит. Хотя... меняется ссылка в левом нижнем углу браузера (если это Chrome, Yandex и что-то ещё на базе Blink).
Посмотрим ещё, переходите и нажимайте Tab:
https://shop.kerama-marazzi.ru/
https://www.maxidom.ru/catalog/plitka/
https://stroytorg812.ru/catalog/keramicheskaya_plitka/
О, выделяются по порядку все интерактивные элементы. Причём, обводка одинаковая на всех сайтах. Это срабатывает браузерный дефолтный фокус на интерактивных элементах при переходе по клавише Tab.
В первой подборке, где ничего не происходит, вероятно, дефолтный фокус отключили визуально. Это можно сделать, прописав в CSS нулевую обводку для псевдокласса :focus. Таким образом, фокус на интерактивных элементах происходит (это заметно по меняющимся ссылкам слева внизу), но не видимо. С точки зрения доступности это плохо.
Во второй подборке дефолтный фокус сохранён. Но вы могли заметить, что в полях ввода он другой и вписывается в остальной дизайн. Это значит, что в них дефолтный фокус отключили визуально, но прописали новые стили для фокуса с помощью псевдокласса :focus-visible. Его используют для того, чтобы сделать задуманный дизайнерами фокус в таких элементах, как поля ввода, где «сфокусироваться» можно не только с клавиатуры, но и мышью или тачпадом. Таким образом можно сохранить единство стилей сайта для большинства пользователей.
Обычно дизайнерам достаточно показать в библиотеке состояние фокуса для полей ввода и проверить, чтобы в реализации не отключили дефолтный браузерный фокус для остальных интерактивных элементов. Но есть сайты, где изменён и дефолтный фокус под дизайн сайта:
https://spb.leroymerlin.ru/catalogue/plitka/ – жёлтый фокус
https://www.apple.com/macbook-air/ – голубой фокус
Focus-within – состояние элемента, когда в фокус берётся связанный с ним другой элемент. Например, так можно выделить лейбл поля, в котором фокусируется пользователь, или вообще весь блок с формой. Посмотреть примеры
Target – элемент, у которого есть id, в момент, когда к нему перешли по якорной ссылке. Например, вот так:
:target приобрела жёлтый фон в момент перехода к нейСостояние элемента «в изначальном спокойствии», когда с ним не взаимодействуют, дизайнеры обычно называют default или enabled. Но будьте внимательны: существует псевдокласс :default, который обозначает изначально выбранный из списка элемент. Например:
:defaultГлавное – договориться в команде и заонбордить разработчиков в дизайн-библиотеку.
Другие примеры стилизации текстовых ссылок
Какие визуальные свойства можно задать ссылке, помимо базовых цвета, подчёркивания, отступов?
Можно добавит элемент, обозначающий переход по «внешней» ссылке (ведущей на другой веб-ресурс). Скорее всего, вам чаще встречались элементы в конце ссылки, но можно добавить и в начало.
Это делается с помощью псевдоэлементов ::after и ::before соответственно. Они прописываются в CSS, узнать их можно по такой конструкции:
a::after {
content: ...;
}
В параметр content можно прописать изображение (лучше отдавать в разработку svg). Таким образом, визуал и размер элемента может быть каким угодно. А ещё можно использовать не изображение, а символ из иконочного шрифта – так не будет посылаться дополнительный запрос на сервер (который был бы нужен для получения изображения).
Ссылке можно задать любое подчёркивание и анимировать его при наведении. Посмотреть примеры.
Можно стилизовать ссылку под кнопку, когда нужно добавить действию визуальный вес на странице. Например:
В дизайне, в принципе, можно просто использовать элемент кнопки. Но в разработке важно сделать этот элемент именно ссылкой <a>, не кнопкой <button>. Это связано с семантикой элементов вёрстки: важно правильно употребить определённые элементы под определённые задачи. Ссылка <a></a> – это элемент навигации. Он ведёт на другую страницу или к другому блоку на странице. У кнопки <button></button> другое назначение. Она получает, обрабатывает и отправляет данные. В примере выше «Купить билет» – это именно ссылка, которая ведёт на другую страницу покупки билета. Она не обрабатывает и не отправляет никакие данные. А если бы это была такая же кнопка на странице покупки билета после заполнения данных покупателя – она была бы именно кнопкой <button></button>. Вот так.
Нужно ли делать в дизайн-библиотеке отдельную ссылку-кнопку (как один из типов ссылки)? Зависит от того, как часто это встречается в проекте. Чаще всего достаточно во время передачи макетов в разработку сделать пометку, что это именно ссылка, элемент навигации, например, на другую страницу. Ведь внешний вид элемента – это про стили CSS, а не HTML-тег. В коде ссылке можно просто добавить класс, который содержит визуальные параметры кнопки.
<a href="https://www.ozon.ru/">Купить на Озоне</a> – визуально будет ссылка.<a href="https://www.ozon.ru/" class="button">Купить на Озоне</a> – визуально будет кнопка, т.к. применятся стили класса button.
А ещё ссылке при наведении можно задать нестандартный курсор. Их внешний вид в разных операционных системах отличается, но значение одинаковое. Посмотреть примеры
Заключение
В заключение ещё раз подчеркну: всегда советуйтесь с разработчиками. Атрибуты и свойства часто меняются, появляются новые, а другие устаревают. Изучайте больше про HTML и CSS – это облегчит общение с техническими командами и расширит понимание возможностей вёрстки. Например, доступно и легко об этом пишут в Доке.
На этом всё. Желаю дизайнерских успехов и гармонии с разработчиками! ?
