Utilisation d'URL pour la propriété cursor
Un article de MDC.
Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) supporte des valeurs d'URL pour la propriété CSS 2.1 (en) cursor (CSS 2 (fr)). Ceci permet de spécifier des images arbitraires comme curseurs de souris — n'importe quel format d'image géré par Gecko peut être utilisé.
[modifier] Syntaxe
La syntaxe pour cette propriété est :
cursor: [<url>,]* motclef;
Ceci signifie que zéro URL ou plus peuvent être spécifiées (séparés par des virgules), et doivent être suivies par un des mots-clefs définis dans les spécifications CSS, comme auto ou pointer.
Par exemple, la valeur suivante sera permise :
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
Elle va d'abord essayer de charger foo.cur. Si ce fichier n'existe pas ou pour une autre raison n'est pas valable, bar.gif est essayé. Si cette valeur ne peut pas être utilisée non plus, le curseur correspondant à la valeur auto sera utilisé.
Le support de la syntaxe CSS3 pour les valeurs du curseur a été ajouté dans Gecko 1.8beta3 ; elle fonctionnera donc à partir de Firefox 1.5. Cette syntaxe permet d'indiquer les coordonnées des points chauds du curseur qui seront maintenus aux frontières de l'image du curseur. Si aucun n'est indiqué, les coordonnées du point chaud sont lus à partir du fichier lui-même (pour les fichier CUR et XBM) ou sont réglés au coin supérieur gauche de l'image. Un exemple de la syntaxe CSS3 est:
cursor: url(foo.png) 4 12, auto;
Le premier nombre est la coordonnée x, le second numéro est la coordonnée y. L'exemple va régler le point chaud afin d'être le pixel (4,12) par rapport au (0,0) en haut à gauche.
[modifier] Limitations
Tous les formats d'images supportés par Gecko peuvent être utilisés. Cela signifie que vous pouvez utiliser des fichiers BMP, JPG, CUR, GIF, etc. Par contre, les curseurs animés ANI ne sont pas supportés. Et même si vous spécifiez un GIF animé, le curseur ne sera pas un curseur animé. Cette limitation sera peut-être supprimée dans le futur.
Gecko ne place pas de limitations sur la taille du curseur. Cependant, vous devriez vous limiter à une taille de 32×32 pour une compatibilité optimale avec les diverses plateformes et systèmes d'exploitation. En particulier, des curseurs plus grands que cette taille ne fonctionneront pas sous Windows 9x (95, 98, ME).
Les curseurs translucides ne sont pas supportés sur les versions de Windows pré-XP. C'est une limitation du système d'exploitation. La transparence fonctionne sur toutes les plateformes.
Seules les versions de Mozilla pour Windows, OS/2 et Linux (utilisant GTK+ 2.4 ou supérieur) gèrent les valeurs d'URL pour les curseurs. Leur support pour d'autres plateformes sera peut-être ajouté dans des sorties futures (Mac OS : bug 286304, QNX Neutrino : bug 286307, XLib : bug 286309, Qt : bug 286310, BeOS : bug 298184, GTK 2.0/2.2 : bug 308536)
[modifier] Compatibilité avec d'autres navigateurs
Microsoft Internet Explorer supporte les valeurs URI pour les propriétés cursor. Cependant, il n'accepte que les formats CUR et ANI.
Il est également moins strict dans sa syntaxe. Cela veut dire par exemple que des valeurs comme :
cursor: url(foo.cur);
ou :
cursor: url(foo.cur), pointer, url(bar.cur), auto;
fonctionnent dans MSIE, mais ne fonctionneront pas dans des navigateurs Gecko. Pour une compatibilité avec Gecko et être en conformité avec les spécifications CSS, mettez toujours une liste d'URI d'abord, et utilisez exactement une valeur de mot-clef à la fin.
- à faire: Documenter ce que MSIE fait avec les emplacements CSS 3 des points chauds.