De touch-actioneigenschap in CSS geeft u controle over het effect van touchscreen-interacties met een element, vergelijkbaar met de meer algemeen gebruikte pointer-eventseigenschap die wordt gebruikt om muisinteracties te besturen.
#element ( touch-action: pan-right pinch-zoom; )De touch-actioneigenschap is vooral handig voor interactieve UI-elementen die iets ander gedrag vereisen, afhankelijk van het type apparaat dat wordt gebruikt. Wanneer uw gebruikers kunnen verwachten dat een element zich op een bepaalde manier gedraagt met een muis, en iets ander gedrag op een aanraakscherm, touch-actionkomt dit van pas.
Het meest voor de hand liggende voorbeeld hiervan is een interactief kaartelement. Als je ooit een kaart hebt bekeken die niet is ontworpen om met aanraakapparaten te werken, heb je waarschijnlijk geprobeerd alleen te knijpen en te zoomen om de browser te vinden die het element vergroot, maar niet echt inzoomen op de daadwerkelijke kaart.
Standaard wordt een browser handvat aanraking interacties automatisch: Pinch in te zoomen, veeg om te scrollen, etc. Instelling touch-actionvoor nonealle browser het hanteren van deze gebeurtenissen uit te schakelen, waardoor ze aan jou om uit te voeren (via JavaScript). Als u slechts één interactie wilt overnemen, vertel de browser dan om de rest af te handelen. Bijvoorbeeld, als je een aantal JavaScript schreef dat enkel de handvatten zoomen, kunt u de browser van handvat alles wat met deze eigenschap te vertellen: touch-action: pan-x pan-y;.
Zie de Pen-voorbeelden van aanraakactie door CSS-Tricks (@ css-tricks) op CodePen.
Syntaxis
touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulationWaarden
De touch-actioneigenschap accepteert de volgende waarden:
auto: Hiermee kan de browser alle pan- en zoominteracties afhandelen.none: Schakelt browsers alle pan- en zoom-interacties uit. Dit opent de mogelijkheid om die interacties op maat in JavaScript te definiëren.pan-x: Maakt horizontaal pannen mogelijk met één vingerinteractie. Het is de afkorting voorpan-leftenpan-rightwaarden, maar kan worden gebruikt in combinatie metpan-y,pan-up,pan-downenpinch-zoom.pan-yMaakt verticaal pannen mogelijk met één vingerinteractie. Het is de afkorting voorpan-upenpan-downwaarden, maar kan worden gebruikt in combinatie metpan-x,pan-left,pan-rightenpinch-zoom.manipulation: Maakt knijp- en zoominteracties mogelijk, maar schakelt andere uit die u op sommige apparaten aantreft, zoals dubbeltikken om te zoomen. Het is een afkorting voor de combinatie vanpan-x pan-y pinch-zoom.pan-left(Experimenteel): maakt interactie met één vinger mogelijk wanneer de vinger van een gebruiker naar rechts beweegt en naar links draait.pan-right(Experimenteel): maakt interactie met één vinger mogelijk wanneer de vinger van een gebruiker naar links beweegt en naar rechts draait.pan-down(Experimenteel): Maakt interactie met één vinger mogelijk wanneer de vinger van een gebruiker omhoog beweegt en omlaag beweegt.pan-up(Experimenteel): Maakt interactie met één vinger mogelijk wanneer de vinger van een gebruiker naar beneden beweegt en omhoog beweegt.pinch-zoom: Maakt interacties met meerdere vingers mogelijk en kan met elke anderepan-waarde worden gecombineerd .
Verwant
pointer-events
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 36 | 52 | 10 * | 12 | Nee |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 13.0-13.1 |
Safari is de flagrante omissie van ondersteuning voor aanraakacties. iOs Safari heeft beperkte ondersteuning, alleen voor de autoen manipulationwaarden.
Extra informatie
- Pointer Events Level 2 Specification - De specificatie bevindt zich momenteel in de aanbeveling van de kandidaat, maar is bedoeld om begin 2019, op het moment van schrijven, over te gaan naar de voorgestelde aanbeveling. De bedoeling is dat het document een officiële W3C-aanbeveling wordt.
- MDN-documentatie
- Touch-action pinch-zoom CSS-eigenschap Voorbeeld - Google Chrome's demo van de implementatie ervan.
- WebKit Bugzilla Ticket # 133112 - Open een ticket om Safari-ondersteuning voor te stellen. Voeg uw stem toe om het te verhogen.