Berøringshandling - CSS-triks

Anonim

Den touch-actioneiendom i CSS gir deg kontroll over effekten av touchscreen interaksjoner med et element, lik den mer allment brukt pointer-eventsegenskapen brukes til å styre musen interaksjoner.

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

Den touch-actionegenskapen er først og fremst nyttig for interaktive brukergrensesnittelementer som trenger litt forskjellig oppførsel avhengig av hvilken type av anordning som anvendes. Når brukerne dine kanskje forventer at et element skal oppføre seg på en bestemt måte med en mus, og litt annen oppførsel på en berøringsskjerm, touch-actionvil være nyttig.

Det mest åpenbare eksemplet på dette er et interaktivt kartelement. Hvis du noen gang har sett på et kart som ikke er designet for å fungere med berøringsenheter, har du sannsynligvis bare prøvd å klemme og zoome for å finne nettleseren som forstørrer elementet, men faktisk ikke zoomer det faktiske kartet.

Som standard vil en nettleser håndtere berøringsinteraksjoner automatisk: Klyp for å zoome, sveip for å bla osv. Innstilling touch-actiontil nonevil deaktivere all nettleserhåndtering av disse hendelsene og la dem være opp til deg å implementere (via JavaScript). Hvis du bare vil overta en interaksjon, ber du nettleseren om å håndtere resten. For eksempel, hvis du skrev noen Javascript som bare håndtak zooming, kan du fortelle leseren til å håndtere alt annet med denne egenskapen: touch-action: pan-x pan-y;.

Se penneksemplene til berøringshandling fra CSS-Tricks (@ css-tricks) på CodePen.

Syntaks

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

Verdier

Den touch-actioneiendommen aksepterer følgende verdier:

  • auto: Tillater nettleseren å håndtere alle interaksjoner med panorering og zooming.
  • none: Deaktiverer nettlesere fra å håndtere alle interaksjoner med panorering og zooming. Dette åpner muligheten til å skreddersy disse interaksjonene i JavaScript.
  • pan-x: Aktiverer horisontal panorering med en enkelt finger-interaksjon. Det er kortform for pan-leftog pan-rightverdier, men kan anvendes i kombinasjon med pan-y, pan-up, pan-downog pinch-zoom.
  • pan-yAktiverer vertikal panorering med en enkelt finger-interaksjon. Det er kortform for pan-upog pan-downverdier, men kan anvendes i kombinasjon med pan-x, pan-left, pan-rightog pinch-zoom.
  • manipulation: Aktiverer klype- og zoominteraksjoner, men deaktiverer andre du kan finne på noen enheter, for eksempel dobbeltklikk for å zoome. Det er stenografi for kombinasjonen av pan-x pan-y pinch-zoom.
  • pan-left (Eksperimentelt): Aktiverer en enkelt fingerinteraksjon når brukerens finger beveger seg mot høyre, som panner mot venstre.
  • pan-right (Eksperimentell): Aktiverer en enkelt fingerinteraksjon når brukerens finger beveger seg mot venstre, som panner mot høyre.
  • pan-down (Eksperimentelt): Aktiverer en enkelt fingerinteraksjon når brukerens finger beveger seg oppover, som panner nedover.
  • pan-up (Eksperimentell): Aktiverer en enkelt fingerinteraksjon når brukerens finger beveger seg nedover, som panner oppover.
  • pinch-zoom: Aktiverer interaksjoner med flere fingre og kan kombineres med en hvilken som helst annen pan-verdi.

I slekt

  • pointer-events

Nettleserstøtte

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
36 52 10 * 12 Nei

Mobil / nettbrett

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

Safari er den skarpe utelatelsen av berøringsstøtte. iOs Safari har begrenset støtte, bare for autoog manipulationverdiene.

Tilleggsinformasjon

  • Pointer Events Level 2 Specification - Spesifikasjonen er for øyeblikket i kandidatanbefaling, men er ment å flytte til foreslått anbefaling tidlig i 2019, når dette skrives. Hensikten er at dokumentet skal bli en offisiell W3C-anbefaling.
  • MDN-dokumentasjon
  • Touch-action pinch-zoom CSS-egenskap Eksempel - Google Chrome demonstrasjon av implementeringen.
  • WebKit Bugzilla Ticket # 133112 - Åpen billett for å foreslå Safari-støtte. Legg til stemmen din for å støte den opp.