x
 
Антон
15 октября 2020
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

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


Антон!

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

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

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

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

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

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


Поделиться
Отправить

Комментарии

Юрий Хан
15 октября 2020

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

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

Алексей Самохин
15 октября 2020

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

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

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

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

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

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

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Как бороться с багами? Часть третья: source maps Как искать баланс между пользой для команды и пользой для себя? 1 Как бороться с багами? Часть одиннадцатая: не утонуть в багах и глюках Как организовать процесс сдачи задачи и код-ревью в рамках спринта?




Недавно всплыло

Трудно найти вдохновение на текст 2 3 Какой фотоаппарат выбрать для путешествий? 2 Насколько оправдан звук в веб интерфейсах? Например: клик по ссылке, добавление товара в корзину, удаление из корзины и т. д. 2