Увеличить область клика css

Илья Бирман. Пользовательский интерфейс. Прицеливание

Полезно увеличивать область наведения и клика ссылок и других мелких интерактивных элементов, чтобы людям было проще тыкать в них мышкой.

Илья Бирман. Пользовательский интерфейс. Прицеливание

Трюк

Псевдоэлементы не работают с полями ввода, картинками, видео и подобными им незакрывающимися тегами, внутрь которых в принципе нельзя вложить содержимое

Мой любимый способ увеличить область клика — с помощью псевдоэлемента. Это такой «виртуальный» кусочек разметки, который описывается в ЦСС и добавляется к элементу страницы. При этом клик по псевдоэлементу считается кликом по элементу. А значит, за счёт размеров псевдоэлемента можно увеличить размеры области клика самого элемента!

Добавим к ссылке пустой псевдоэлемент и дадим ему отрицательные вытяжки относительно размеров самой ссылки:

Псевдоэлемент вылезет за границы элемента‑ссылки и увеличит область клика. Сравните область клика обычной ссылки и ссылки с псевдоэлементом. Для наглядности области клика подкрашены.

Опасность и нюансы

Осторожнее используете трюк для элементов у границ экрана. Выступающий псевдоэлемент может добавить странице лишние поля и паразитный скролл.

«Айфон увеличивает области нажатия ссылок в браузере. Если открыть неадаптированную к мобильному экрану страницу, нажатие микроскопической ссылки среди текста работает безотказно.

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

Илья Бирман. Пользовательский интерфейс. Прицеливание

Риск сломать так вёрстку серьёзно возрастает на узких мобильных экранах. При этом смартфоны обычно сами умеют оптимизировать область нажатия элементов и необходимость в ручном её увеличении отпадает. Так что может иметь смысл включать увеличивающие область клика стили только на устройствах, поддерживающих наведение:

Илья Бирман. Пользовательский интерфейс. Прицеливание

@media (hover: hover) < a < /* … */ > a:after < /* … */ >>

Обязательно убедитесь, что элемент вообще отзывается на наведение курсора, имеет заметную обратную связь. Если элемент в принципе не реагирует на наведение, людям придётся тщательно выцеливать его и гадать, кликается ли он вообще. Особого толку от увеличения области клика не будет.

Другие варианты увеличения области клика

Классика старой школы — увеличивать область клика с помощью падингов и отрицательных маржинов. Падинги увеличивают размер элемента, добавляют «поля», а маржины компенсируют размеры этих полей, чтобы элемент визуально оставался на своём месте.

Этот способ не так удобен, как трюк с псевдоэлементом: обычно у элементов есть свои падинги и маржины, которые придётся корчевать компенсаторами. А вот псевдоэлемент никак не влияет на стили самого элемента, кроме добавления безвредного position: relative .

Знаете ещё варианты увеличить область клика или интересные способы применения такого трюка? Делитесь в коментах :‑)

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Источник

Увеличить зону кликабельности ссылки — HTML/CSS

Необходимо сделать ссылкой не только подзаголовок, но и саму картинку. Есть три способа три: назовем их хороший, плохой и злой.

Плохой

Просто обернуть и заголовок, и картинку в ссылку следующим образом:

Злой

Обернуть все в одну ссылку:

Хороший

Разместить ссылку в заголовке, а затем расширить область ссылки на всю карточку с помощь псевдоэлемента :before:

div  position: relative; > a:before  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; >

Можно использовать любой из этих трех способов, но лично я предпочитаю последний.

Источник

Хотел кликнуть, но не смог: как правильно настроить размер области клика

У вас бывало такое, что элемент на странице не реагировал на клик, пока вы не нажмёте на определённую его область?

Это происходило потому, что не весь элемент был кликабельным. Чтобы стало понятнее, посмотрите на картинку ниже — на ней видно, какой должна и не должна быть область клика:

В этой статье, мы рассмотрим несколько распространённых проблем с UX, а в конце покажем наглядный пример с нашего сайта.

UX-решения

Закон Фиттса

Это закон, который описывает поведение пользователей на основе физиологических реакций и используется при проектировании UX. Если не вдаваться в подробности, его смысл в том, что на большой элемент, расположенный рядом с другими элементами, пользователь нажмёт быстрее, чем на маленький и отдалённый.

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

Далее рассмотрим реальные примеры, в которых также учитываются рекомендации WCAG 2.5.5 и закон Фиттса.

Кнопки

При необходимости можно использовать элемент . Рассмотрим этот случай на существующей системе интернет-банкинга:

Вот так выглядит эта кнопка:

При наведении курсора на кнопку он всё ещё выглядит, как указатель, и это нормально. Но если выделить текст, то появляется текстовый курсор. Такого не случится, если использовать правильные элементы.

Senior/ Middle FrontEnd (React) Developer Центр HR TECH (Проект Атомкор) АО «Гринатом» , , можно удалённо , По итогам собеседования

Благодаря HTML-элементу , пользователь сможет:

выбирать кнопку с помощью клавиатуры;
нажимать на кнопку с помощью мыши, клавиатуры или касания.

Кроме того, его можно реализовать без JavaScript.

Кнопкам нужны внутренние отступы, и вот почему:

Ссылки

С таким кодом кликнуть можно будет только на текст:

Чтобы этого избежать, необходимо добавить padding к самой ссылке. Обратите внимание, что нижний и верхний отступ не будут работать по умолчанию, так как это встроенные элементы. Для этого можно использовать block , inline-element или flex .

Теперь вся область ссылки станет доступна для клика:

Гамбургер-меню

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

Предположим, что так выглядит область нажатия:

Попасть пальцем в такой маленький объект сложно. Но если увеличить эту область, то всё станет гораздо проще:

Можете попробовать самостоятельно в этом демо.

Чекбоксы и радио-кнопки

При наличии чекбокса или радио-кнопки пользователь ожидает, что он сможет нажать на него или связанный с ним текст.

На скриншоте ниже область клика привязана только к переключателю поэтому нажатие на текст ни к чему не приведёт:

Эту ситуацию можно решить, если в HTML связать label и input, используя атрибут for :

Или поместить input внутрь label:

После нужно добавить padding для , чтобы область клика стала больше:

Сайдбар

Часто на страницах с категориями кликабельная область ссылок не распространяется на всю ширину элемента списка. Это происходит потому, что область клика находится только на текстовом элементе:

Чтобы исправить эту ситуацию, нужно:

После того, как будут выполнены эти действия, получим:

Примеры

В недавнем обновлении Твиттера появилась проблема с навигационным дизайном, связанная с размером кликабельной области. Сначала она была ограничена только текстом, как на скриншоте ниже, но после получения обратной связи её исправили:

Заголовок раздела

В некоторых случаях есть необходимость добавить кнопку «Показать ещё» или стрелку на краю заголовка раздела. В примере ниже стрелку поместили в искусственный круг, чтобы правильно центрировать её.

Как правило, интервал вокруг стрелки может быть сделан в CSS, с помощью свойства padding или width и height.

Использование псевдоэлементов для увеличения области клика

Не всегда возможно сделать кликабельную зону больше просто за счёт изменения ширины и высоты элемента или отступа. В этом случае на помощь приходят псевдоэлементы.

Как это работает?

Идея в том, что псевдоэлементы принадлежат своему родителю, поэтому, когда мы создаём такой элемент с определённой шириной и высотой, он будет вести себя как область клика/касания/наведения своего родителя.

Ниже псевдоэлемент :after добавлен к кнопке меню:

Квадрат 55px специально расположен справа от элемента для наглядности.

Смотрите гифку ниже или попробуйте демо на Codepen.

Пример с нашего сайта

Недавно мы обнаружили на нашем сайте проблему: при попытке нажать на лайк с телефона на главной странице происходит переход на статью. Разобравшись в вопросе, оказалось, что рекомендуемый размер элемента для клика на touchscreen 48×48 dp. Иначе по нему сложно попасть на мобильных.

Чтобы решить эту проблему, нужно увеличить площадь клика за счёт паддингов, но при этом сохранить визуальное расположение элементов. Т.е. добавить положительный паддинг и отрицательный маргин, например. Или уменьшить внешние отступы.

Как видно, кнопка осталась на своём месте, но область клика/тапа стала больше. При этом важно следить, чтобы области не пересекались.

Один из вариантов для лайков (не самый красивый, но рабочий)

.post-votes < margin: 0 5px; >.svelte-15n67pa < padding: 9px; margin: -9px; >/* кнопки вверх/вниз */

Код для правой кнопки (для левой зеркально):

padding: 14px 14px 14px 7px; margin: -14px -14px -14px -7px;

Что думаете?

Ребят, тут собрались ноунеймы которые не работают ни на одном языке, но пишут свое очень важное мнение в комментариях. Лучше проходите мимо и не читайте их. Ах да, учите go и устройтесь в яндекс)

Как вы собираетесь искать хороших сотрудников, если (в большинстве компаний) честных кандидатов отметают даже не пригласив на техническое собеседование?Если умение лгать является обязательным, чтобы устроиться к вам на работу, то не удивляйтесь что «сложно найти хорошего сотрудника».Я знаю о чем говорю. В нашей компании для продвижения программистов на аутсорс есть целая отдельная команда, которая полностью специализируется на «продаже сотрудников». Это люди, которые пристально изучают хотелки чсв hr-ов, пишут «идеальные» резюме и отвечают на все вопросы так, «как надо». А программист приходит только на техническое собеседование в конце.Хорошие сотрудники (как правило) не станут накручивать себе 20 лет стажа, рассказывать про мотивацию «не ради денег», отвечать на глупые вопросы про квадратные люки и прочую ерунду.Вам нужно не учить людей в интернете «как правильно отвечать на наши вопросы, чтобы вы у нас прошли собес», а мыслить шире и заниматься реальным поиском толковых специалистов, которые не обязаны иметь топовые софт-скилы.В противном случае — получайте «идеальные» резюме, написанные по единому шаблону и котов в мешке. И не забудьте пожаловаться что «сложно найти хорошего сотрудника».

Читаю я комментарии и полностью убеждаюсь в том, почему так сложно найти хорошего сотрудника. Да, работодателю неприятно, когда соискатель отключает камеру, а на заднем фоне домашние едят. Неприятно, если человек сразу говорит, что на прошлой работе одни дураки. Настораживают люди, которые каждый год меняют работу и говорят «мало платят». Называть не по имени это вообще признак из серии » Ты, ходор, на фиг не сдался». И прочее. Но большинство комментариев как раз от людей с чсв. Из серии «любите меня любого, я вам одолжение делаю тем, что общаюсь».

Источник

Читайте также: Pip upgrade python linux

Увеличить область клика css