Cambiare il cursore del mouse con il CSS

Il cursore del mouse ci consente di rendere più semplice ed intuitiva l’interfaccia delle nostre pagine web aiutando l’utente a muoversi al loro interno. Fin dall’inizio della nostra esperienza web abbiamo imparato che un cursore a forma di mano indica un link, un cursore rappresentato da una barra verticale consente di selezionare del testo e così via.

Ci sono alcuni casi, però, in cui si ha la necessità di modificare il cursore di default adattandolo ad una particolare interfaccia. I CSS ci consentono di personalizzare il cursore del mouse in maniera molto semplice, è sufficiente una sola riga di codice:

button { cursor: pointer; }

CSS cursor

La proprietà cursor consente di scegliere il tipo di cursore da utilizzare per il selettore. In questo caso è stato scelto il classico cursore a forma di mano per i campi di tipo button.

Ovviamente non si ha disposizione la sola “manina” ma sono diversi quelli a disposizione. Nella specifica 2.1 del CSS i cursori a disposizione sono i seguenti:

Figura 1 – Cursori CSS 2.1

Bisogna fare alcune piccole precisazioni sul cursore url. Le dimensioni del file devono essere al massimo di 32×32 pixel. Internet Explorer accetta file di tipo .cur:

button { cursor: url('pointer.cur'); }

Firefox si aspetta un secondo parametro diverso da url:

button { cursor: url('pointer.cur'), auto; }

Nel CSS3 sono stati introdotti i seguenti cursori:

Figura 2 – Cursori CSS 3

Possiamo vedere un esempio di tutti i cursori appena visti nel seguente esempio.

Bisogna fare molta attenzione all’utilizzo di cursori personalizzati perché, se utilizzati in circostanze errate, possono causare il disorientamento dell’utente. Soprattutto è sconsigliatissimo modificare i valori di default a cui sono abituati gli utenti, come ad esempio modificare il cursore dei link.

Supporto dei browser

I cursori integrati nella versione 2.1 del CSS risultano compatibili con la maggior parte dei browser, Internet Explorer 6 incluso. Problemi si hanno, invece, con i cursori integrati nella versione 3. Opera non fornisce alcun tipo di supporto mentre IE8 e Safari non supportano i primi tre della precedente lista.