Как спрятать курсор на сайте

Для одного аппарата с сенсорным экраном потребовалось сделать так, чтобы курсор на экране не отображался. Все клики основному приложению передавал тач-скрин, а курсор мыши только отвлекал и был лишним. Ставить дополнительные утилиты нельзя, вносить изменения в систему тоже. В моем случае задача облегчалась тем, что вся эта конструкция работала на движке Internet Explorer и кроссбраузерной универсальности не требовалось. Но в процессе решения задачи я решил поэкспериментировать с другими браузерами и вот что у меня получилось.

Штатными средствами CSS просто скрыть курсор нельзя, но зато есть документированная возможность задавать свой курсор при помощи конструкции cursor: url('ваш_курсор.cur'). То есть теоретически можно создать полностью прозрачный курсор, а затем применить его на сайте в качестве пользовательского. Для этого в CSS добавляется следующее описание стилей:В теории вроде бы все просто, однако на практике оказалось не все так гладко, как хотелось бы. Были протестированы браузеры Firefox версий 10-23, Internet Explorer версий 7-10, Google Chrome и Iron последних версий, Safari 5.1.7 и Opera 12.16.

Из всех протестированных браузеров в точном соответствии с описаниями стандарта повел себя, как ни странно, только Internet Explorer, то есть добросовестно спрятал курсор и не показывал его ни при каких действиях на странице.

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


Еще более странно повели себя браузеры на движке WebKit, а именно Google Chrome и Iron. Полностью прозрачный курсор неожиданно превратился в черный квадрат. Но стоит закрасить в курсоре хоть одну точку, он сразу же отображается как надо, то есть прозрачная заливка остается прозрачной. Частично проблема решается созданием прозрачного курсора размером 1х1 пиксел. В этом случае курсор хоть и становится видимым, но одинокая черная точка все-таки привлекает к себе меньше внимания. Как вариант, точку однопиксельного курсора можно сделать в цвет фона сайта, в этом случае она будет видна только при перемещении поверх текста, элементов страницы с оформлением другого цвета или контрастирующих картинок.


Но аномалии WebKit на этом еще не закончились. Браузер Safari добросовестно спрятал полноразмерный прозрачный курсор 32х32, но при этом категорически отказался обрабатывать однопиксельнй курсор, заменив его на стандартный. Также во всех трех WebKit-браузерах при выделении текста появлялся текстовый курсор.

Разработчики браузера с красным нулем, как обычно, продемонстрировали свое собственное, альтернативно-потустороннее видение веб-стандартов. В этом браузере атрибут CSS cursor вообще не поддерживает пользовательские курсоры ни в каком виде. Соответственно, скрыть или замаскировать курсор не получится.


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

Комментарии

Добавить комментарий

Для вставки цитаты выделите текст и нажмите сюда

Имя*:

Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.

Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.