Blog. Just Blog

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

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Для одного аппарата с сенсорным экраном потребовалось сделать так, чтобы курсор на экране не отображался. Все клики основному приложению передавал тач-скрин, а курсор мыши только отвлекал и был лишним. Ставить дополнительные утилиты нельзя, вносить изменения в систему тоже. В моем случае задача облегчалась тем, что вся эта конструкция работала на движке Internet Explorer и кроссбраузерной универсальности не требовалось. Но в процессе решения задачи я решил поэкспериментировать с другими браузерами и вот что у меня получилось.

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

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

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

Появляющийся курсор в Firefox
Появляющийся курсор в Firefox

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

Прозрачный курсор в Chrome
Прозрачный курсор в Chrome

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

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

Пользовательский курсор в Opera не поддерживается
Пользовательский курсор в Opera не поддерживается

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

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 6871 | Комментариев: 8

Метки: CSS
Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
ManHunter (18.11.2015 в 08:14):
W3C открыть и прочитать, не? В основных браузерах проверить свою невалидную бредятину, не?
Олег (18.11.2015 в 08:08):
.selector {
  cursor: none;
}

Не?
ezfalc0n (16.09.2013 в 20:40):
"Разработчики браузера с красным нулем, как обычно, продемонстрировали свое собственное, альтернативно-потустороннее видение веб-стандартов" - эпично сказано! Будучи одним из тех извращенцев, кто использует не по назначению технологии, не разделяю многолетнего всеобщего хуления MSIE. Во времена Netscape Navigator 4.7 извращался с эффектами огня/плазмы и просто градиентов с ColorPicker-ом на JS, исходные алгоритмы, кстати, на ASMe были, потом их портировал в винду на С++ со стандартным Win GDI (тогда добился скорости отрисовки практически как под DirectX 2/3). Но суть не в этом, а в том, что именно Internet Explorer умел делать больше всего вкусносного, а кое что и сейчас умеет =) Спасибо за эксперимент с невидимым курсором.
ManHunter (04.09.2013 в 23:22):
vazzaap, да все делаешь так. Я писал про Safari, если ты вдруг не заметил.
vazzaap (04.09.2013 в 22:39):
SRWare Iron честно показывает однопиксельный курсор. ЧЯДНТ?
Gl?ck (03.09.2013 в 00:40):
selector { cursor: none; }
ManHunter (02.09.2013 в 10:56):
Во-первых, 100% точного определения браузера не существует, а во-вторых, в опере курсор все равно не спрятать. Да и ни к чему это. Решение делалось под конкретную задачу, остальное просто побочный продукт экспериментов.
миха (02.09.2013 в 10:12):
а если встроить автоматическое опредиление браузера и настроек к нему, что получется? или это сложно реализовать?

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

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2017
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.06 сек. / MySQL: 2 (0.0028 сек.) / Память: 4.5 Mb
Наверх