CSS touch-action

Touch Action: Mit zwei Fingern ziehen, doppelt tappen, mit zwei Fingern größer aufziehen

Touch-Actions filtern Gesten und schalten vorgegebene Aktionen wie das Scrollen oder doppeltes Tappen für den Zoom auf einen Bereich aus.

touch-action informiert den Browser via CSS über die Aktionen des Benutzers. Anhand von Touch Events interpretieren der Browser Berührungen des Fingers oder eines Stifts auf dem Touch-Screen. Diese Benutzeraktionen waren bislang auf JavaScript angewiesen.

touch-action tritt spät auf den Plan, denn die Aktionen des Fingers oder Stifts auf dem Touchscreen sind komplizierter als ein Mausklick. Wer Javascript programmiert, weiß, dass ein einfacher Klick mit der Maus in ein Javascript Touch-Event übersetzt wird. Aber wenn der Finger länger auf einem Element bleibt, tritt die vorgegebene Aktion des Touch-Device in Kraft: ein längeres Verweilen des Fingers auf einem Text wird z.B. als Aufforderung zum Kopieren oder Einsetzen interpretiert.

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. Ein zweimaliges Tippen mit dem Finger zoomt den berührten Bereich.

Responsives Webdesign für Handy und Tablet CSS touch-action ändert das Verhaltenfür ein Element, allerdings nicht fürinline-Elemente, Tabellenzeilen und -spalten sowie Tabellengruppen. touch-action: manipulation Quelle: CSS touch-action demo von Chen Huijing 19:34mediaevent.de

Bleibt der Finger auf dem Touchscreen und zieht, scrollt die Geste per Voreinstellung. CSS touch-action: manipulation ändert das Verhalten auf dem Touchscreen.

@supports (touch-action:manipulation) {
    .manipulation {
        touch-action: manipulation;
    }
    .manipulation ~ h4::after {display: none;}
}

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

Quelle: CSS touch-action demo von Chen Huijing

auto
Das voreingestellte Verhalten – der Browser entscheidet.
none
Ein Browser kann eine vorgegebenes Verhalten aufweisen – none unterdrückt das voreingestellte (default-) Verhalten. touch-action: none eliminiert auch die rund 300 ms andauernde Verzögerung, in der der Browser abwartet, ob der Benutzer auch tatsächlich nur einmal mit dem Finger tippt. Doppelt-tappen ist unterbunden.
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.

Browser-Support für touch-action

Alle modernen Browser, aber

iOS Safari auf iPad und iPhone ab iOS 10
:
nur auto und manipulation
touch-action