Как задать указатель мыши

Как задать указатель мыши

Проблема

Назначение указателя мыши — не просто показывать, в какой точке экрана находится курсор, но также сообщать пользователю, какие действия ему доступны. Об этой распространенной практике проектирования пользовательских интерфейсов настольных приложений в веб-приложениях часто забывают. Но вина лежит не только на разработчиках. Во времена CSS 2.1 у нас попросту не было доступа ко многим встроенным курсорам.

В основном мы использовали свойство  cursor для указания, что на чем-то можно щелкнуть, дополняя его курсором  pointer , или же иногда добавляли всплывающие подсказки с помощью курсора  help . Некоторые также применили курсоры  wait и  progress вместо или в дополнение к указателю загрузки.

Но этим дело и ограничивалось. И хотя в CSS User Interface Level 3  мы получили целую пачку новых встроенных курсоров, большинство разработчиков продолжают в этом вопросе придерживаться старых привычек. Как это часто бывает при работе над взаимодействием с пользователем, вы в действительности не осознаете существования проблемы до тех пор, пока не сталкиваетесь с решением. Позвольте мне показать вам эти решения!

как задать указатель мыши

 

Решение

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

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

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

Читайте также  Расширение области, реагирующей на щелчок мыши

новые указатели мыши CSS

 

Новые встроенные курсоры, которые мы получили в рамках CSS User Interface Level 3

 Обозначение нерабочего состояния

Возможно, наиболее полезным среди новинок является курсор  not-allowed. Он чрезвычайно полезен для указания того, что взаимодействие с определенным элементом управления невозможно по той или иной причине — чаще всего потому, что элемент управления отключен.

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

:disabled, [disabled], [aria-disabled=\»true\»] {
cursor: not-allowed;
}

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/disabled

Скрывание курсора

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

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

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

Вот почему среди новых ключевых слов для курсора появилось  none . Скрывать курсор можно было и в CSS 2.1, но для этого требовалось прозрачное изображение в формате GIF размером 1×1, вот так:

скрывание курсора мыши

 

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

Читайте также  Как создать уникальные флажки

video {
cursor: url(transparent.gif);
}

Сегодня нам подобные хитрости не требуются, так как мы можем использовать простое  cursor: none . Однако обеспечить обходной путь часто бывает полезно, так как не все браузеры еще поддерживают курсоры Level 3. Это легко сделать с помощью каскадных стилей:

cursor: url(\’transparent.gif\’);
cursor: none;

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: