Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0)は、WindowsとLinuxにおいて、CSSのcursorプロパティにおいて、URLの値をサポートしています。MacはGecko 2 (Firefox 4)からサポートされました。この値を利用することで、任意の画像(Geckoで使えるどのような形式の画像でも可)をマウスカーソルとして使用できます。

Syntax

(CSS 2.1)での基本的な記述は次の通り:

cursor: [<url>,]* keyword

カンマ区切りで0個以上のURLを指定できますが、auto  pointerといったCSSで定義されているキーワードのうち一つは必ず指定する必要があります。

例えば次のような値が有効です:

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

まず初めにfoo.curを読み込みます。ファイルがないか、何らかの理由で有効でなければ、bar.gifを読み込みます。それも無効な場合、 auto が使用されます。

Gecko 1.8 (Firefox 1.5)では、cursorの値に対してCSS 3のシンタックスが加えられました:

cursor: [<uri> [<x> <y>]?,]* keyword

これにより、カーソル画像の境界を設定するためのカーソル有効範囲を指定できます。指定がない場合、有効範囲はファイル(CURかXMBファイルの場合)の持つ設定が読み込まれるか、画像の左上端が設定されます。CSS3シンタックスの例は以下の通り:

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

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

/* IEのフォールバックには、'auto'や'pointer'の記述は分けて書く必要があります。 */

初めの値はx軸範囲で、2つ目の値はy軸範囲です。この例では、左上の(0, 0)の座標から(4, 12)までのピクセル座標が有効範囲になります。

制限

Geckoで使用できる全ての画像形式がサポートされています。つまりPNG, GIF, JPG, BMP, CURなどの画像形式が使用できるということです。ANIはサポートされていません。アニメーション形式のPNGやGIFは動くカーソルとしては使用できません。

Note: Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)を使用する場合, Gecko ではSVG形式のカーソルもサポートされています。しかしながら、SVGノードのルートにパーセント以外で高さと横幅を設定している必要があります。JavaScript、CSSアニメーション、SVGを内部にもつ宣言的SMILは無視されるように、アニメーションカーソルを表現するためにSVGを使用することはできません。

Gecko (Firefox)ではカーソルサイズは128×128pxに制限されています。それより大きいカーソル画像は無視されます。しかしながら、OSやプラットフォームによっては32×32pxの大きさに制限されます。

(WindowsのGecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6でのバグで32x32pxの制限になります. それより後のバージョンでは修正されています。)

OSによる制限のため、Windos XPより前のWindowsでは半透明カーソルはサポートされていません。です。背景透過はすべてのプラットフォームで動作します。

Windows、OS/2、MozillaがリリースしているLinux (GTK+ 2.4かそれ以上のバージョン) でcursorのURL値はサポートされています。Mac OS XはGecko 2 (Firefox 4)でサポートされました。

その他のブラウザの互換性

Microsoft Internet Explorer 6.0も cursorプロパティをサポートしています。しかしながら

  • IEはCURとANI形式のみサポート。
  • IEはCSS3シンタックスのx軸有効範囲とy軸有効範囲をサポートしていません。カーソル画像及び他のプロパティごと無視されます。
Browser Lowest version formats (e.g.) X軸Y軸有効範囲
Internet Explorer 6.0 .cur | .ani ---
Firefox (Gecko), Windows and 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)
Since OS X 10.5 supports Safari (Mac) .cur files

ドキュメントのタグと貢献者

 このページの貢献者: hommaam
 最終更新者: hommaam,