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

Оцените материал
(0 голосов)

Проблема

Назначение указателя мыши — не просто показывать, в какой точке экрана находится курсор, но также сообщать пользователю, какие действия ему доступны. Об этой распространенной практике проектирования пользовательских интерфейсов настольных приложений в веб-приложениях часто забывают. Но вина лежит не только на разработчиках. Во времена CSS 2.1 у нас попросту не было доступа ко многим встроенным курсорам. В основном мы использовали свойство  cursor для указания, что на чем-то можно щелкнуть, дополняя его курсором  pointer , или же иногда добавляли всплывающие подсказки с помощью курсора  help . Некоторые также применили курсоры  wait и  progress вместо или в дополнение к указателю загрузки. Но этим дело и ограничивалось. И хотя в CSS User Interface Level 3  мы получили целую пачку новых встроенных курсоров, большинство разработчиков продолжают в этом вопросе придерживаться старых привычек. Как это часто бывает при работе над взаимодействием с пользователем, вы в действительности не осознаете существования проблемы до тех пор, пока не сталкиваетесь с решением. Позвольте мне показать вам эти решения!

Решение


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

Новые встроенные курсоры, которые мы получили в рамках 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;

Десерт на сегодня - видео о полете на параплане между двумя зданиями

Прочитано 204 раз Последнее изменение Суббота, 29 апреля 2017 13:43
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

TemplateMonster

Поиск по сайту

Связной трэвел

tezeks

Google+