Touch-action - CSS-Tricks

Anonim

touch-actionProprietatea în CSS oferă control asupra efectului interacțiunilor cu ecran tactil cu un element, similar cu cel mai larg-utilizate de pointer-eventsproprietate utilizate pentru a interacțiunilor de control mouse - ului.

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

touch-actionProprietatea este utilă în primul rând pentru elemente de UI interactive care au nevoie de un comportament ușor diferit în funcție de tipul de dispozitiv utilizat. Când utilizatorii dvs. s-ar putea aștepta ca un element să se comporte într-un anumit mod cu un mouse și un comportament ușor diferit pe un ecran tactil, touch-actionva fi util.

Cel mai evident exemplu în acest sens este un element de hartă interactivă. Dacă ați vizualizat vreodată o hartă care nu a fost concepută pentru a funcționa cu dispozitive tactile, probabil că ați încercat să ciupiți și să măriți doar pentru a găsi browserul care mărește elementul, dar nu efectiv măriți harta reală.

În mod implicit, un browser va gestiona automat interacțiunile tactile: ciupiți pentru a mări, glisați pentru a derula, etc. Setarea touch-actionpentru noneva dezactiva toate browserele care gestionează aceste evenimente, lăsându-le la dispoziția dvs. să le implementați (prin JavaScript). Dacă doriți să preluați o singură interacțiune, spuneți browserului să se ocupe de restul. De exemplu, dacă ai scris unele JavaScript care numai mânere zoom, vă pot spune browser - ul să se ocupe de orice altceva cu această proprietate: touch-action: pan-x pan-y;.

Vedeți exemplele Pen de acțiune tactilă de CSS-Tricks (@ css-tricks) pe CodePen.

Sintaxă

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

Valori

touch-actionProprietatea acceptă următoarele valori:

  • auto: Permite browserului să gestioneze toate interacțiunile panoramice și zoom.
  • none: Dezactivează browserele de a gestiona toate interacțiunile panoramice și zoom. Aceasta deschide posibilitatea de a defini acele interacțiuni în JavaScript.
  • pan-x: Activează panoramarea orizontală cu o interacțiune cu un singur deget. Acesta este prescurtarea pentru pan-leftși pan-rightvalorile, dar pot fi folosite în combinație cu pan-y, pan-up, pan-downși pinch-zoom.
  • pan-yActivează panoramarea verticală cu o interacțiune cu un singur deget. Acesta este prescurtarea pentru pan-upși pan-downvalorile, dar pot fi folosite în combinație cu pan-x, pan-left, pan-rightși pinch-zoom.
  • manipulation: Activează interacțiunile de ciupire și mărire, dar dezactivează altele pe care le-ați putea găsi pe unele dispozitive, cum ar fi atingeți de două ori pentru a mări. Este o prescurtare pentru combinația de pan-x pan-y pinch-zoom.
  • pan-left (Experimental): activează o interacțiune cu un singur deget atunci când degetul unui utilizator se deplasează spre dreapta, care se deplasează spre stânga.
  • pan-right (Experimental): activează o interacțiune cu un singur deget atunci când degetul unui utilizator se deplasează spre stânga, care se deplasează spre dreapta.
  • pan-down (Experimental): activează o interacțiune cu un singur deget atunci când degetul unui utilizator se deplasează în sus, care se deplasează în jos.
  • pan-up (Experimental): activează o interacțiune cu un singur deget atunci când degetul unui utilizator se deplasează în jos, care se deplasează în sus.
  • pinch-zoom: Permite interacțiuni cu mai multe degete și poate fi combinat cu orice altă pan-valoare.

Legate de

  • pointer-events

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

Desktop

Crom Firefox IE Margine Safari
36 52 10 * 12 Nu

Mobil / Tabletă

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

Safari este o omisiune evidentă a suportului tactil. iOs Safari are suport limitat, doar pentru autoși manipulationvalori.

informatii suplimentare

  • Pointer Events Level 2 Specification - Specificația se află în prezent în Recomandarea candidatului, dar este menită să treacă la Recomandarea propusă la începutul anului 2019, începând cu această scriere. Intenția este ca documentul să devină o recomandare oficială a W3C.
  • Documentația MDN
  • Proprietate CSS cu pinch-zoom pinch-action Exemplu - demonstrația Google Chrome a implementării sale.
  • WebKit Bugzilla Ticket # 133112 - Open ticket pentru a propune suport Safari. Adăugați votul pentru a-l împiedica.