La proprietà CSS touch-action consente a uno sviluppatore di limitare il modo in cui un utente può interagire con un elemento, il che è particolarmente utile per impedire l'invio di eventi quando non è necessario.
Prima della versione 55, Chrome supportava pan-x e pan-y, che limitano lo scorrimento degli elementi in una direzione.
Il video riportato di seguito mostra un esempio di un elemento senza un'azione tocco definita (sinistra), così come pan-x e panoramica-y (centro e destra).
Il CSS per gli screencast al centro e a destra è:
.pan-x {
touch-action: pan-x;
}
.pan-y {
touch-action: pan-y;
}
In Chrome 55 sono stati aggiunti pan-left, pan-right, pan-up e pan-down. Queste proprietà presentano una differenza sottile ma importante di comportamento.
Queste proprietà obbligano l'utente a iniziare gesti in una direzione prima che l'elemento risponda. È simile al gesto "Trascina per aggiornare", che risponde solo quando l'utente muove il dito verso il basso sullo schermo.
Il seguente video mostra pan-right e pan-down, che
richiedono, rispettivamente, gesti da destra a sinistra e dal basso verso l'alto.
Una volta avviato il gesto, puoi
eseguire la panoramica avanti e indietro. Questa operazione influisce solo sulla direzione iniziale.
Anche se il video dimostra questo comportamento, potresti trovare più facile fare delle prove, consultando l'esempio.
Il CSS per questa demo è:
.pan-right {
touch-action: pan-right;
}
.pan-down {
touch-action: pan-down;
}
L'ultima cosa che accade nel mondo dell'azione tattile è la proprietà pinch-zoom. Questa è una nuova proprietà in Chrome 55, dietro un flag,
che può essere utilizzata con qualsiasi opzione di panoramica
(ad esempio pan-x, pan-y, pan-left, pan-right, pan-down, pan-up).
Se pizzichi su un sito web, in genere viene aumentato lo zoom dei contenuti delle pagine.
La definizione di touch-action impedirà questo comportamento, ma l'aggiunta di un pizzico/zoom
riattiva questo comportamento.
Questo video mostra la differenza tra touch-action: pan-x e
touch-action: pan-x pinch-zoom;
Tutte queste proprietà dovrebbero semplificare parte della logica che altrimenti dovrebbe essere implementata dagli sviluppatori utilizzando pointer-events.