Cursori e puntatori

Sui dispositivi non touchscreen, il cursore è un modo essenziale per gli utenti di sapere con cosa stanno interagendo. Puoi anche fornire suggerimenti utili su come interagire con un elemento o su come un movimento con un trackpad o un mouse influirà sul tuo sito.

Cursori

I browser gestiscono automaticamente alcuni casi d'uso comuni per i cursori.

Se stai leggendo questo articolo su un dispositivo con un cursore, esplora la pagina. È possibile che tu non abbia mai notato come cambiano i cursori, ma tieni presente i suggerimenti che forniscono. Quando il puntatore passa sopra il testo, il cursore si trasforma in una I maiuscola di selezione, a indicare che puoi selezionare il testo. Se passi il mouse sopra un link, il cursore si trasforma in una mano che indica con il dito indice, suggerendo che puoi eseguire un'azione. In tutti gli altri casi, il cursore predefinito è spesso una freccia.

Man mano che crei siti più interattivi, vorrai personalizzare il cursore in modo che gli utenti possano comprendere più facilmente le interazioni.

I browser supportano una serie di parole chiave per la proprietà cursor che forniscono suggerimenti per trascinamento, ridimensionamento, selezione e altro ancora.

Se nessuno dei cursori supportati comunica le interazioni di un elemento, puoi anche fornire un'immagine SVG o PNG da utilizzare come cursore.

Accenti circonflessi

Un cursore di inserimento viene utilizzato per mostrare la tua posizione nel testo modificabile. A differenza del cursore, non segue il movimento del mouse. Puoi modificare il colore con caret-color.

Rispondere agli input del puntatore di un utente

VESPA Se progetti solo per la precisione di un mouse, gli utenti con touchscreen o problemi di controllo motorio fine potrebbero non essere in grado di interagire con la tua pagina come necessario.

I problemi più comuni includono pulsanti troppo piccoli o elementi interattivi troppo vicini tra loro. In questo modo, gli utenti hanno difficoltà a interagire con l'elemento corretto.

Assicurarsi che i pulsanti e gli altri target interattivi siano abbastanza grandi è un passo importante per garantire l'accessibilità del sito. Puoi anche personalizzare gli stili in base alla precisione dei dispositivi di input dell'utente con le media query pointer e any-pointer.

La funzionalità multimediale pointer si riferisce al dispositivo di input principale dell'utente, mentre any-pointer si riferisce a tutti i dispositivi di input. Puoi abbinare dispositivi come mouse a fine e dispositivi come touchscreen a coarse. Il valore none indica che l'utente non sta utilizzando un dispositivo di input con un puntatore.

Eventi puntatore e tocco

Disattivare gesti specifici del touchscreen

Quando utilizzi un touchscreen, il browser gestisce alcuni gesti comuni. Ad esempio, toccando lo schermo con due dita e allontanandole in genere si aumenta lo zoom del sito. Anche se non devi implementare questi comportamenti sul tuo sito, in alcuni casi potresti voler disattivarli o ignorarli.

Per disattivare la gestione di alcune azioni da parte del browser, elenca le azioni che vuoi che l'elemento gestisca. pan-x e pan-y attivano i gesti di panning con un dito. Questi possono essere attivati insieme a pinch-zoom, che consente di ingrandire e spostare la visualizzazione con più dita.

La parola chiave manipulation è equivalente a pan-x pan-y pinch-zoom. manipulation esclude altri comportamenti di tocco che richiedono più tocchi in un breve periodo di tempo, come il doppio tocco per lo zoom.

Dopo aver disattivato la gestione di un'azione da parte del browser escludendola da touch-action, puoi configurare gli eventi puntatore per l'azione.

Disattivazione di tutti gli eventi e le azioni

In alcuni casi, potresti voler specificare che un elemento non è interattivo. Se imposti pointer-events: none su un pulsante, ad esempio, non potrai fare clic sul pulsante o attivare uno stato al passaggio del mouse.

Verifica la tua comprensione