CSS の cursor プロパティにオリジナルカーソルを指定するときの注意

CSS には cursor プロパティがあり、マウスカーソル (ポインター) の形状を指定することが出来ます。

んでもって、元々定義されているカーソルの形状だけでなく、独自のカーソル画像を指定することもできます。が、今日、cursor プロパティで独自のカーソルを指定すると何故かエラーになってしまいました。 Firefox 3.5 のエラーコンソールには

'cursor' の値をパース中にエラーが発生しました。このスタイル宣言は無視されました。

と表示されていたのですが、原因がわからず色々悩んでいました。ちなみに CSS は

.test {

    cursor: url("xxx.png");

}

のように指定していました。

W3C の勧告を見たらわかるように、cursor プロパティの値としての <URL> はオプションで指定可能 (あってもなくても良い) なのですが、<URL> 以外の auto や pointer なども必ず 1 つ指定しなければいけません。 (2 つ以上ではダメ。必ず 1 つ。)

つまり、<URL> のみを cursor プロパティの値に指定することはできないんですね！今回の例では

.test {

    cursor: url("xxx.png"), pointer;

}

という風に、<URL> での指定の後にカンマ区切りで pointer などの定義済みのカーソル形状を指定してやる必要があります。

インターネット上の情報をいくつか見てみましたけど、このことについて触れていない (というか <URL> だけ指定するするという間違った指定をしている) ページもありましたので注意してください。例えばスタイルシートリファレンスとか。