Использование URL значений для свойства cursor

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) поддерживает URL-значения для CSS свойства cursor в Windows и Linux. Поддержка Mac была добавлена в Gecko 2 (Firefox 4). Это позволяет устанавливать произвольные изображения в качестве курсора мыши — может быть использовать любой формат изображений, поддерживаемый Gecko.

Синтаксис

Базовый (CSS 2.1) синтаксис для этого свойства:

cursor:  [<url>,]* ключевое_слово

Это означает, что устанавливать можно любое количество URL'ов (отделенных запятой), которые должны сопровождаться одним из ключевых слов, определеннымы спецификацией CSS, таких как auto или pointer.

Например, такая последовательность значений допустима:

cursor:  url(foo.cur), url(http://www.example.com/bar.gif), auto;

В первую очередь браузер пытается загрузить foo.cur. Если такой файл отсутствует или его форма не допустим по каким-то другим причинам, то дальше загружается bar.gif. И если он также не может быть использован, будет использовано значение auto.

Поддержка CSS 3 синтаксиса для указания курсора была добавлена в Gecko 1.8 (Firefox 1.5):

cursor:  [<uri> [<x> <y>]?,]* ключевое_слово

Это позволяет устанавливать координаты смещения курсора, которые буду зафиксированы на границах курсора. Если координаты не указаны, то они считываются непосредственно из файла (для CUR и XBM файлов) или же устанавливаются в левый верхний угол изображения.

Пример CSS 3 синтаксиса:

.foo  {
  cursor:  auto;
  cursor:  url(cursor1.png) 4 12, auto;
}

.bar  {
  cursor:  pointer;
  cursor:  url(cursor2.png) 2 2, pointer;
} 

/* откатываются на 'auto' и 'pointer' в IE, но должны быть установлены отдельны */

Первое число определяет координату по оси x, а вторая - по оси y. Данный пример сместит изображение на точку (4,12) относительно левого верхнего угла (0,0).

Ограничения

Могут быть использованы любые форматы, поддерживаемые Gecko. Это означает, что вы можете использовать PNG, GIF, JPG, BMP, CUR и т.д. ANI не поддерживается. Анимированные PNG и GIF не добавят анимацию курсору.

Примечание: Начиная с Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), Gecko также поддерживает формат SVG в качестве изображения курсора. Тем не менее, SVG изображение должно содержать значения (кроме процентных значений) высоты и ширины на корневом SVG узле. JavaScript, CSS анимация и декларативный SMIL внутри SVG изображения игнорируются; например, вы не можете использовать SVG, чтобы создать анимированный курсор.

В Gecko (Firefox) максимальный размер курсора - 128×128 пикселей. Изображения большего размера игнорируются. Однако, вам следую ограничиться рамером курсора в 32×32 пикселя для максимальной совместимости с операционными системами и платформами.

(В следствие бага Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 в Windows ограничивает размер в 32x32 пикселя. Это исправляется в более новых версиях.)

Прозрачные курсоры не поддерживаются в версиях Windows ниже XP. Это ограничение для операционной системы. Прозрачность работает на любых платформах.

URL в качестве курсора поддерживаются в Windows, OS/2, и Linux (с использованием GTK+ 2.4 или выше) версиях Mozilla. Поддержка Mac OS X была добавлена в Gecko 2 (Firefox 4).

Совместимость с другими браузерами

Microsoft Internet Explorer 6.0 также поддерживает URI значения для свойства cursor. Тем не менее:

  • IE поддерживает только CUR и ANI форматы.
  • IE не поддерживает CSS 3 синтаксис с x- и y-координатами. Изображение курсора и дальнейшее свойство игнорируются.
Браузер Ранняя версия Форматы x-y-координаты
Internet Explorer 6.0 .cur | .ani ---
Firefox (Gecko), Windows и Linux 1.5 (1.8) .cur | .png | .gif | .jpg 1.5 (1.8)
Firefox (Gecko) 4.0 (2.0) .cur | .png | .gif | .jpg | .svg (Gecko 2.0)
Opera --- --- ---
Safari (Webkit) 3.0 (522-523) .cur | .png | .gif | .jpg 3.0 (522-523)
Начиная с OS X 10.5, Safari (Mac) поддерживает  .cur файлы

Метки документа и участники

 Внесли вклад в эту страницу: Cheg
 Обновлялась последний раз: Cheg,