Графический внешний вид помогает нам передавать классические настольные приложения в веб-приложениях. Таким образом, мы должны иметь глубокие знания о том, как преобразовать интерфейс браузера в интерфейс приложения.
Хотя в прошлом Flash обычно была платформой для этой цели, мы все сейчас внедряем открытые стандарты, такие как HTML 5 и CSS 3. С этим пилотом серии битов CSS мы перепроектируем один из вездесущих элементов в GUI Настольное приложение: курсор мыши.
Свойство курсора
При применении к элементу body свойство CSS курсора задает новый курсор для текущей страницы:
body {
cursor: move;
}
Разумеется, он может применяться к элементам (как блочным, так и встроенным) и вести себя как наследуемое свойство, которое также применяется к любому элементу, содержащемуся в указанных элементах.
div#map
{
cursor: move;
}
Значения, которые может принимать это свойство, относятся к разным видам:
- generic : auto (указатель выбирается в зависимости от типа элемента или наличия текста), default (классический указатель), наследовать (см. родительский элемент).
- конкретные символы : движение (обычно реализуемое в виде руки), текст (селектор I), ожидание (песочные часы или, возможно, пляжный мяч), помощь (знак вопроса) и многое другое.
- Значения URL, такие как url (‘file.cur’) . Что касается всех URL, пути относительно того, где находится файл CSS или встроенный код CSS. Используемые типы файлов — это изображения (png и gifs), а также файлы .cur, которые добавляют метаданные, такие как положение указателя на изображении.
Чтобы обеспечить откат в случае, если изображение не может быть отображено или не поддерживается браузером, курсор принимает список значений, разделенных запятыми (например, font-family).
эволюция
Спецификация CSS 2.1 устанавливает стандарт для свойства курсора и перечисляет все поддерживаемые значения. CSS2 был закончен в 1998 году — так что вы можете поверить, что браузеры успели все реализовать в нем.
В этой демонстрации вы увидите, как значения свойств CSS2 реализованы в вашем браузере.
CSS3 определяет новые готовые курсоры (например, not- allow, которые должны отображаться как запрещающий дорожный знак).
Кроме того, версия CSS 3 позволяет указывать горячую точку на изображениях:
cursor: url('file.png') 4 5;
определяя, где на изображении (как обычно, с левыми / верхними координатами) положение «кончик стрелки». По умолчанию это считается верхним левым углом изображения (значения 0 0), но при переопределении его можно поместить в центр изображения, например, в случае руки или прицела.
Служба поддержки
Quirksmode сообщает нам, где мы можем рассчитывать на полную поддержку и для каких решений мы должны указывать больше откатов из-за различий в браузерах.
По сути, поддержка значений CSS2 повсюду : вам больше не нужно беспокоиться о IE 5.5 (и я надеюсь также и о IE 6 в ближайшее время).
Единственной проблемой является отсутствие поддержки общего изображения (например, PNG) во всех версиях Internet Explorer , в каждой версии до 10.x. В то же время любой тип файлового курсора (файл .cur или изображение) не будет работать в Opera, хотя его доля на рынке должна вас беспокоить.
Так как только в некоторых случаях (необычные интерфейсы, такие как Google Maps) необходим курсор, чтобы приложение гарантировало пользователю удобство работы, я предлагаю избегать сложных решений, таких как вставка изображения курсора с помощью JavaScript : стандартные значения курсора должны быть достаточно в большинстве случаев.
Если вы хотите пройти следующую милю, есть много программ для Windows, создающих файлы .cur, или пакет icoutils в дистрибутивах Linux на основе Debian, который может конвертировать изображения. Пока IE не начнет поддерживать общие изображения, использование файла .cur будет лучшим выбором для нестандартного значения.