Tocco-azione - Trucchi CSS

Anonim

La touch-actionproprietà in CSS ti dà il controllo sull'effetto delle interazioni del touchscreen con un elemento, simile alla proprietà più ampiamente pointer-eventsusata per controllare le interazioni del mouse.

#element ( touch-action: pan-right pinch-zoom; )

La touch-actionproprietà è utile principalmente per gli elementi dell'interfaccia utente interattiva che richiedono un comportamento leggermente diverso a seconda del tipo di dispositivo utilizzato. Quando i tuoi utenti potrebbero aspettarsi che un elemento si comporti in un modo particolare con un mouse e un comportamento leggermente diverso su un touch screen, touch-actiontornerà utile.

L'esempio più ovvio di questo è un elemento della mappa interattiva. Se hai mai visualizzato una mappa non progettata per funzionare con dispositivi touch, probabilmente hai provato a pizzicare e ingrandire solo per trovare il browser che ingrandisce l'elemento, ma non effettivamente ingrandendo la mappa effettiva.

Per impostazione predefinita, un browser gestirà automaticamente le interazioni tattili: pizzica per ingrandire, scorri per scorrere, ecc. L'impostazione touch-actionsu nonedisabiliterà la gestione di questi eventi da parte del browser, lasciandoli implementare (tramite JavaScript). Se desideri eseguire solo un'interazione, chiedi al browser di gestire il resto. Ad esempio, se hai scritto un po 'di JavaScript che solo gestisce lo zoom, si può dire al browser di gestire tutto il resto con questa proprietà: touch-action: pan-x pan-y;.

Vedi gli esempi con la penna dell'azione tattile di CSS-Tricks (@ css-tricks) su CodePen.

Sintassi

touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulation

Valori

La touch-actionproprietà accetta i seguenti valori:

  • auto: Consente al browser di gestire tutte le interazioni di panoramica e zoom.
  • none: Disabilita i browser dalla gestione di tutte le interazioni di panoramica e zoom. Questo apre la possibilità di definire in modo personalizzato quelle interazioni in JavaScript.
  • pan-x: Consente la panoramica orizzontale con una singola interazione del dito. Si un'abbreviazione per l' pan-lefte pan-rightvalori, ma può essere utilizzato in combinazione con pan-y, pan-up, pan-downe pinch-zoom.
  • pan-yConsente la panoramica verticale con una singola interazione del dito. Si un'abbreviazione per l' pan-upe pan-downvalori, ma può essere utilizzato in combinazione con pan-x, pan-left, pan-righte pinch-zoom.
  • manipulation: Abilita le interazioni con le dita e lo zoom, ma disabilita le altre che potresti trovare su alcuni dispositivi, come il doppio tocco per ingrandire. È una scorciatoia per la combinazione di pan-x pan-y pinch-zoom.
  • pan-left (Sperimentale): consente una singola interazione con il dito quando il dito di un utente si sposta a destra, con una panoramica verso sinistra.
  • pan-right (Sperimentale): consente una singola interazione con il dito quando il dito di un utente si sposta a sinistra, che esegue una panoramica verso destra.
  • pan-down (Sperimentale): consente una singola interazione con il dito quando il dito di un utente si sposta verso l'alto, che esegue una panoramica verso il basso.
  • pan-up (Sperimentale): consente un'interazione con un solo dito quando il dito di un utente si sposta verso il basso, che si sposta verso l'alto.
  • pinch-zoom: Consente interazioni con più dita e può essere combinato con qualsiasi altro pan-valore.

Relazionato

  • pointer-events

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo Firefox IE Bordo Safari
36 52 10 * 12 No

Mobile / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 13.0-13.1

Safari è la palese omissione del supporto per le azioni tattili. Safari iOs ha un supporto limitato, solo per i valori autoe manipulation.

Informazioni aggiuntive

  • Specifiche del livello 2 degli eventi del puntatore: la specifica è attualmente nella raccomandazione del candidato ma è destinata a passare alla raccomandazione proposta all'inizio del 2019, al momento della stesura di questo documento. L'intento è che il documento diventi una raccomandazione ufficiale del W3C.
  • Documentazione MDN
  • Esempio di proprietà CSS pizzico-zoom con azione tattile: demo di Google Chrome della sua implementazione.
  • WebKit Bugzilla Ticket # 133112 - Apri ticket per proporre il supporto per Safari. Aggiungi il tuo voto per aumentarlo.