Илья Бирман. Пользовательский интерфейс. Прицеливание
Полезно увеличивать область наведения и клика ссылок и других мелких интерактивных элементов, чтобы людям было проще тыкать в них мышкой.
Илья Бирман. Пользовательский интерфейс. Прицеливание
Трюк
Псевдоэлементы не работают с полями ввода, картинками, видео и подобными им незакрывающимися тегами, внутрь которых в принципе нельзя вложить содержимое
Мой любимый способ увеличить область клика — с помощью псевдоэлемента. Это такой «виртуальный» кусочек разметки, который описывается в ЦСС и добавляется к элементу страницы. При этом клик по псевдоэлементу считается кликом по элементу. А значит, за счёт размеров псевдоэлемента можно увеличить размеры области клика самого элемента!
Псевдоэлементы не работают с полями ввода, картинками, видео и подобными им незакрывающимися тегами, внутрь которых в принципе нельзя вложить содержимое
Добавим к ссылке пустой псевдоэлемент и дадим ему отрицательные вытяжки относительно размеров самой ссылки:
a {
/* position: relative задаёт контекст, относительно которого спозиционируется absolute-псевдоэлемент */
position: relative;
}
a:after {
/* В нашем случае содержимое псевдоэлемента — content — пустое, но без этого свойства, хоть бы и пустого, псевдоэлемент не заработает */
content: '';
position: absolute;
/* Вытягиваем абсолютный псевдоэлемент на 10 пк за границы родителя — самого элемента */
inset: -10px;
}Псевдоэлемент вылезет за границы элемента‑ссылки и увеличит область клика. Сравните область клика обычной ссылки и ссылки с псевдоэлементом. Для наглядности области клика подкрашены.
Опасность и нюансы
Осторожнее используете трюк для элементов у границ экрана. Выступающий псевдоэлемент может добавить странице лишние поля и паразитный скролл.
«Айфон увеличивает области нажатия ссылок в браузере. Если открыть неадаптированную к мобильному экрану страницу, нажатие микроскопической ссылки среди текста работает безотказно.
Даже если несколько мелких ссылок оказываются рядом, чаще всего удаётся попасть в нужную с первого раза. По всей видимости, области нажатия смещаются так, чтобы быть соразмерными пальцу и не пересекаться»
Илья Бирман. Пользовательский интерфейс. Прицеливание
Риск сломать так вёрстку серьёзно возрастает на узких мобильных экранах. При этом смартфоны обычно сами умеют оптимизировать область нажатия элементов и необходимость в ручном её увеличении отпадает. Так что может иметь смысл включать увеличивающие область клика стили только на устройствах, поддерживающих наведение:
«Айфон увеличивает области нажатия ссылок в браузере. Если открыть неадаптированную к мобильному экрану страницу, нажатие микроскопической ссылки среди текста работает безотказно.
Даже если несколько мелких ссылок оказываются рядом, чаще всего удаётся попасть в нужную с первого раза. По всей видимости, области нажатия смещаются так, чтобы быть соразмерными пальцу и не пересекаться»
Илья Бирман. Пользовательский интерфейс. Прицеливание
@media (hover: hover) {
a {
/* … */
}
a:after {
/* … */
}
}Обязательно убедитесь, что элемент вообще отзывается на наведение курсора, имеет заметную обратную связь. Если элемент в принципе не реагирует на наведение, людям придётся тщательно выцеливать его и гадать, кликается ли он вообще. Особого толку от увеличения области клика не будет.
Другие варианты увеличения области клика
Классика старой школы — увеличивать область клика с помощью падингов и отрицательных маржинов. Падинги увеличивают размер элемента, добавляют «поля», а маржины компенсируют размеры этих полей, чтобы элемент визуально оставался на своём месте.
Этот способ не так удобен, как трюк с псевдоэлементом: обычно у элементов есть свои падинги и маржины, которые придётся корчевать компенсаторами. А вот псевдоэлемент никак не влияет на стили самого элемента, кроме добавления безвредного position: relative.
Знаете ещё варианты увеличить область клика или интересные способы применения такого трюка? Делитесь в коментах :‑)
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.