Школа
Веб-разработка

Насколько уместно использование ЦСС‑стилей cursor: default и user‑select: none на текстовых элементах интерфейса, с которыми не предполагается никакого взаимодействия, например на неактивных ссылках?

Антон
15 окт 2020
👁 5380   🗩2
Веб-разработка

Насколько уместно использование ЦСС‑стилей cursor: default и user‑select: none на текстовых элементах интерфейса, с которыми не предполагается никакого взаимодействия, например на неактивных ссылках?

Антон
15 окт 2020
👁 5380   🗩2
Юрий Мазурский
Разработчик и дизайнер
Полезно
 2
2
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Антон!

Использовать эти стили не только уместно, но и нужно.

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

Например, можно отключить выделение у элементов интерфейса. Трудно представить себе сценарий, при котором пользователь хочет скопировать текст на кнопке или в пункте меню. Поэтому можно сделать так, чтобы по нажатию Ctrl + A (Cmd + A) выделялся не весь текст на странице, а только нужная по смыслу часть.

К упомянутым в вопросе правилам стоит добавить pointer-events. С его помощью можно включать или отключать реакцию ХТМЛ‑элементов на события, вызываемые указателем — мышью или пальцем.

Бывает, нужно сверстать что‑нибудь нестандартное — с наложением нескольких элементов друг на друга. Когда один элемент расположен над другим, кликнуть по нижнему не получится. Можно отключить кликабельность верхнего элемента через pointer-events: none, и клик будет проходить верхний элемент «насквозь» и действовать только на нижний. Ховер и другие события указателя тоже не будут вызываться.

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

Веб‑разработка
Полезно
 2
2
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

> Трудно представить себе сценарий, при котором пользователь хочет скопировать текст на кнопке или в пункте меню.

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

Алексей Самохин

> Трудно представить себе сценарий, при котором пользователь хочет скопировать текст на кнопке или в пункте меню.

Если пользователь хочет текстом сообщить о проблеме или написать инструкцию, скопировать текст удобнее, чем переписать его вручную. Например, если нет возможности приложить картинку.

Если задача сделать элемент временно недоступным для взаимодействия, у инпутов и кнопок есть свойство disabled. Если элемент постоянно недоступен неясно зачем он на странице :‑)

В вопросе также идёт речь о «неактивных ссылках», что не очень понятно. Ссылка — это то, что куда‑то ведёт пользователя при взаимодействии. Иначе — это текст.

Как верстальщик, я считаю что область применения user‑select: none довольно узкая. Например, если делается веб‑интерфейс для терминала, где пользователю действительно нет смысла выделять текст на кнопках. В случае веб‑интерфейса для работы в браузере, для отбирания у пользователя возможности выделить текст нужно очень серьёзное обоснование.

Cursor: default перебивает стандартное браузерное поведение, когда браузер курсором подсказывает пользователю возможности взаимодействия. Теоретически такое может быть сделано для унификации ссылок, стилизованных под кнопки, для которых браузер не показывает специальный курсор. Для просто ссылок такое решение в коде выглядит подозрительно.

Например, в форме, где я пишу комментарий, сделано наоборот: кнопке отправки принудительно проставлен cursor:pointer, как для ссылки :‑)

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

Рекомендуем другие советы