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 sola direzione.
Il video seguente mostra un esempio di elemento senza un'azione tocco definita (a sinistra), nonché pan-x e pan-y (al centro e a destra).
Il CSS per le registrazioni dello schermo della mano media e 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à hanno un comportamento leggermente diverso, ma importante.
Queste proprietà obbligano l'utente ad avviare i gesti in una direzione prima che l'elemento risponda. È simile al gesto "tira per aggiornare", che risponde solo quando l'utente fa un gesto verso il basso sullo schermo.
Il video seguente mostra pan-right e pan-down, che richiedono gesti che iniziano rispettivamente da destra verso sinistra e dal basso verso l'alto.
Una volta iniziato il gesto, puoi effettivamente eseguire la panoramica avanti e indietro. È interessata solo la direzione iniziale.
Anche se il video mostra questo comportamento, potresti trovare più semplice provarlo personalmente consultando l'esempio.
Il codice CSS per questa demo è:
.pan-right {
touch-action: pan-right;
}
.pan-down {
touch-action: pan-down;
}
L'ultima novità nel mondo delle azioni tocco è la proprietà
pinch-zoom. Si tratta di una nuova proprietà in Chrome 55, protetta da un flag,
che può essere utilizzata con qualsiasi opzione di panoramica
(ad es. pan-x, pan-y, pan-left, pan-right, pan-down, pan-up).
Se pizzichi un sito web, in genere viene aumentato lo zoom sui contenuti delle pagine.
La definizione di un touch-action impedisce questo comportamento, ma l'aggiunta del pinch-zoom lo riattiva.
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 che utilizzano pointer-events.