CSS, HTML & Javascript mit {stil}

CSS touch-action – Gesten auf dem Touch-Screen

CSS touch-action fängt Gesten wie Scrollen oder doppeltes Tappen für den Zoom auf einem Bereich ab. touch-action: none stellt sicher, dass keine Browsergesten (z. B. Scrollen) dazwischenfunken, wenn Aufgaben wie Drag & Drop oder Swipe von JavaScript durchgeführt werden sollen.

CSS Touch Actions: ziehen, aufziehen, tappen

Touch, Tapp, Swipe, Drag

touch-action sagt dem Browser, welche Gesten er selbst behandeln darf und welche an JavaScript weitergegeben werden. Diese Eigenschaft ist erst spät auf den Plan getreten, denn die Aktionen des Fingers oder Stifts auf dem Touchscreen sind komplizierter als ein Mausklick.

touch-action: pan-x;
Browser darf nur horizontal scrollen (vertikale Gesten blockieren).
touch-action: pan-y;
Browser darf nur vertikal scrollen.
touch-action: manipulation;
erlaubt einfache Gesten wie Tap (Klick), verhindert aber Doppeltap-Zoom (außer Safari ¯\_(ツ)_/¯).
touch-action: none;
Browser soll keine Gesten interpretieren, alles geht an JS.
#dragIt {
	…
    cursor: grab;
    touch-action: none;
}

touch-action:none verhindert, dass der Finger / Stift beim Ziehen die Seite scrollt. Das Verhalten – fallen lassen – wird mit JavaScript umgesetzt.

Wer Javascript programmiert, weiß, dass ein einfacher Tap mit dem Finger automatisch in einem Klick mit der Maus übersetzt wird. Das ist einfach.

Auf einem Touch-Device gibt es kein Hovern mit der Maus über einem Element, sondern das Streichen des Fingers auf dem Screen (swipe) scrollt die Seite vertikal, wenn sie länger ist als der ViewPort, und ein Ziehen mit dem Finger von links nach rechts scrollt die Seite horizontal, wenn sie breiter als der ViewPort ist.

  • Ein längeres Verweilen des Fingers auf einem Text wird z.B. als Aufforderung zum Kopieren oder Einsetzen interpretiert.
  • Ein längeres Verweilen des Fingers auf einem Bild ist die Aufforderung, das Bild zu teilen, zu kopieren oder auf dem Gerät zu speichern.
  • Das Auseinanderziehen von zwei Fingern zoomt den berührten Bereich.
Geste Beschreibung Typischer Effekt
Tap / Single Tap Einmal tippen mit Finger Klick, Auswahl, Button aktivieren
Double Tap Zwei schnelle Taps Zoom (meist Lupe oder Webseiten-Text), mancher UI-Wechsel
Long Press / Press & Hold Finger länger auf Element halten Kontextmenü, Drag starten, Tooltip
Swipe / Flick Finger horizontal oder vertikal über Display ziehen Scrollen, Slideshow, Navigation zwischen Seiten
Drag / Pan Finger bewegen, während er das Element hält Elemente ziehen, Scroll-Container bewegen
Pinch / Spread (Pinch-Zoom) Zwei Finger zusammen oder auseinander Zoomen (in/out) von Bild, Karte, Canvas
Rotate / Zwei-Finger-Drehung Zwei Finger drehen auf einem Element Rotation von Objekten, Maps oder Spielelemente
Multi-Touch Gesten Kombinationen aus mehreren Fingern Spezialaktionen wie drei-Finger-Swipe für Undo oder Systemgesten

So wie CSS das Hovern mit der Maus abfangen kann, fängt CSS touch-action Gesten auf dem Touchscreen ab. Die Maus hat keine Gesten wie Pinch oder Swipe, aber man kann ähnliche Verhalten mit Javascript Pointer Events nachahmen.

touch-action Werte

auto
Das voreingestellte Verhalten – der Browser entscheidet.
none
unterdrückt das voreingestellte (default-) Verhalten. Tap zeigt keine Wirkung, Ziehen innerhalb des Blocks scrollt nicht.
pan-x
Ziehen entlang der x-Achse. Kann mit pan-y, pan-up, pan-down und Pinch-Zoom kombiniert werden.
pan-y
Ziehen mit einer Bewegung des Fingers nach links ist erlaubt und zieht das Element nach rechts. Sobald das Scrollen beginnt, kann die Richtung umgekehrt werden.
pan-left
Ziehen mit einer Bewegung des Fingers entlang der y-Achse nach links. Kann mit pan-x, pan-left, pan-right und Pinch-Zoom kombiniert werden.
pan-right
Ziehen mit einer Bewegung des Fingers nach rechts; zieht das Element nach links. Sobald das Scrollen beginnt, kann die Richtung umgekehrt werden.
pan-up
Ziehen nach oben; zieht das Element nach unten.
pan-down
Ziehen nach unten; zieht das Element nach oben.
pinch-zoom
Ziehen mit mehreren Fingern; kann mit pan-x, pan-left oder pan-right oder mit pan-y, pan-up oder pan-down kombiniert werden.
manipulation
Kurzform für pan-x pan-y Zoom. Das Element kann verschoben (touch-driven panning), verkleinert und gezoomt (pinch and zoom) werden. Gesten wie das doppelte Tippen zum Zoomen werden unterdrückt.

Swipe / Pan wird z.B. für für Slider, Karussells, Scrollbare Bereiche eingesetzt.

Swipe-Galerie

.carousel {
	…
	/** verhindert versehentliches Markieren 
	beim Halten und Ziehen **/
	user-select: none;
	touch-action: pan-y;
}

touch-action Demo

Die @supports-Regel läßt das folgende CSS nur für Geräte zu, die Touch Actions unterstützen.

CSS touch-action ändert das Verhalten für ein Element, allerdings nicht für inline-Elemente, Tabellenzeilen und -spalten sowie Tabellengruppen.

touch-action: manipulation erlaubt vertikales und horizontales Scrollen innerhalb des Bereiches, ohne die Seite zu scrollen.

touch-action: none Der Bereich bleibt fixiert

touch-action: pan-x Horizontales Ziehen, swipe, drap

touch-action: pan-y Vertikales Ziehen, swipe, drap

Quelle: CSS touch-action demo von Chen Huijing

Browser-Support für touch-action

Alle modernen Browser, aber

iOS Safari auf iPad und iPhone ab iOS 10
nur none, pan-x, pan-y, manipulation und pinch-zoom. Keine Unterstützung für pan-up, pan-down, pan-left und pan-right
Suchen auf mediaevent.de