Cursor - Proprietà css per lo stile dei cursor

Monday 15 September 08 by Onsitus in CSS Proprietà

Questo articolo e una traduzione della versione originale in inglese intitolata ‘Cursor styles’ e pubblicata su questo sito con l’autorizzazione dell’autore.

Cambiando il valore della proprietà css cursor, possiamo impostare differenti stili di cursor a vari elementi HTML. Anche se in teoria è molto utile, si può confondere facilmente l’utente impostando uno stile di cursor inappropriato. Siete attenti; in generale il browser di default funziona bene ed è spesso quello che l’utente si aspetta.

Le celle a sinistra della tabella di compatibilità hanno il valore cursor indicato. Passi sopra con il mouse per vedere l’effetto.
Guarda anche le specifiche del W3C e le referenze della Microsoft (in inglese - traduzione italiana non disponibile).

Selettore	IE 5.5	IE 6	IE 7	IE8b1	FF 2	FF 3b4	Saf 3.0 Win	Saf 3.1 Win	Opera 9.5b	Konqueror 3.5.7
all-scroll Microsoft	No	Si			Si		Si		No	No
all-scroll Microsoft
col-resize Microsoft	No	Si			Si		Si		No	No
col-resize Microsoft
crosshair W3C	Si				Si		Si		Si	Si
crosshair W3C
default W3C	Si				Si		Si		Si	Si
default W3C
hand Microsoft	Si				No		No		Si	No
hand Microsoft	Vedi la nota sotto.
help W3C	Si				Si		Si		Si	Si
help W3C
move W3C	Si				Si		Si		Si	Si
move W3C
Selector	IE 5.5	IE 6	IE 7	IE8b1	FF 2	FF 3b4	Saf 3.0 Win	Saf 3.1 Win	Opera 9.5b	Konqueror 3.5.7
no-drop Microsoft	No	Si			Si		Si		No	No
no-drop Microsoft
not-allowed Microsoft	No	Si			Si		Si		No	No
not-allowed Microsoft
pointer W3C	No	Si			Si		Si		Si	Si
pointer W3C	Vedi la nota sotto.
progress W3C	No	Si			Si		Si		Si	Si
progress W3C
row-resize Microsoft	No	Si			Si		Si		No	No
row-resize Microsoft
text W3C	Si				Si		Si		Si	Si
text W3C
Selector	IE 5.5	IE 6	IE 7	IE8b1	FF 2	FF 3b4	Saf 3.0 Win	Saf 3.1 Win	Opera 9.5b	Konqueror 3.5.7
url Microsoft	No				Si		Si		No	No
url Microsoft	Usa un immagine come cursor. Questo valore ha qualche problema: IE si aspetta un file di tipo .cur. Firefox richiede un secondo valore che è di tipo non-URL; per esempio cursor: url(pix/cursor_ppk.gif), auto. La misura massimale dell’immagine deve essere di 32×32 pixeli o più piccolo. Questo è una restrizione del sistema operativo Windows); non è dovuto a una restrizione del browser stesso. Questa prova usa la seguente immagine .gif:
vertical-text Microsoft	No	Si			Si		No	Si	No	No
vertical-text Microsoft
wait W3C	Si				Si		Si		Si	Si
wait W3C
*-resize W3C	Si				Si		Si		Si	Si
*-resize W3C	L’esempio è ‘N-resize’. Invece del ‘N’ si puo anche usare ‘NW’, ‘W’, ‘SW’, ‘S’, ‘SE’, ‘E’, ‘NE’
Selector	IE 5.5	IE 6	IE 7	IE8b1	FF 2	FF 3b4	Saf 3.0 Win	Saf 3.1 Win	Opera 9.5b	Konqueror 3.5.7

Nota riguardo pointer e hand

In passato il valore hand era per la Microsoft il modo di dire pointer; ed Explorer 5.0 e 5.5 sopportano solo hand. Visto che è il valore di cursor il più spesso usato,
la maggiorità degli altri browsers hanno implementato il valore hand.

Da quando Explorer 6 e 7 sopportano il valore pointer, non ci sono più ragione per usare il valore hand, se no quando volete sviluppare anche per un udienza con versione d’Explorer più vecchie.
In questo caso, l’unica sintassi che sia cross-browser è:

element {
	cursor: pointer;
	cursor: hand;
}

Nota che le due dichiarazione devono essere in ordine.

Questo è la fine del’articolo originale.

Vorrei aggiungere un esempio riguardo l’uso della proprietà css cursor ed un piccolo
diffetto del browser Internet Explorer: in certi casi, la zona intera d’un pulsante non viene riconosciuta come tale.

Ecco l’esempio d’un pulsante che usa 3 immagine come sfondo senza impostare un valore alla proprietà cursor.

Pulsante

Il problema si pone con Internet Explorer.
Il pulsante non viene rivelato come un link e sopra la scritta stessa, il cursor prende di default il valore ‘text’, mentre sarebbe più logico che diventa un cursor tipico per un link come il valore hand(e come lo fa giustamente Firefox).

Aggiungendo semplicemente, il cursor: hand; all’elemento a, il tutto viene riconosciuto come un link, testo incluso.

cursor:hand;

NB: questo problema è relativo agli utenti di Internet Explorer.

Se usate Firefox come browser, questo esempio è del tutto inutile.
La creazione di questo tipo di pulsanti è spiegato nel tutorial su
come creare un pulsante estendibile in larghezza.

Condividi questo articolo su