CSS touch-action

CSS Touch Actions: ziehen, aufziehen, tappen

CSS touch-action filtert Gesten und wie Scrollen oder doppeltes Tappen für den Zoom auf einen Bereich. Sie sind quasi das Pendant zu den pointer-events der Maus. Anhand von Touch Events interpretiert der Browser Berührungen des Fingers oder eines Stifts auf dem Touch-Screen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Touch, Tapp, Swipe

touch-action ist spät auf den Plan getreten, 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. Das ist einfach.

Auf einem Touch-Device gibt es kein Hovern mit der Maus über einem Element. 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.

So wie CSS das Hovern mit der Maus abfangen kann, fängt CSS touch-action Gesten auf dem Touchscreen ab. Bevor touch-action auf den Plan trat, mussten diese Gesten aufwändig von Javascript erkannt werden. Soll eine Geste eine andere Aktion als die voreingestellten ausführen, springt Javascript ein. touch-action informiert den Browser, bevor der Event Listener feuert.

Bleibt der Finger auf dem Touchscreen und zieht, scrollt die Geste per Voreinstellung.

CSS touch-action: manipulation ändert das Verhalten auf dem Touchscreen. p.no-scrolling {touch-action: none} würde die voreingestellten Aktionen verhindern und z.B. das Scrollen auf einem Textabsatz verhindern.

@supports (touch-action:manipulation) {
    .manipulation {
        touch-action: manipulation;
    }
}

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
touch-action: none
touch-action: pan-x
touch-action: pan-y

Quelle: CSS touch-action demo von Chen Huijing

auto
Das voreingestellte Verhalten – der Browser entscheidet.
none
Ein Browser kann ein 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 none, pan-x, pan-y, manipulation und pinch-zoom. Keine Unterstützung für pan-up, pan-down, pan-left und pan-right

Pointer Events

Das Äquivalent zu CSS Touch Action ist pointer-events und legt fest, ob ein Element auf Stift oder Maus reagiert.

elem-1 {
  pointer-events: none;
}

elem-2 {
  pointer-events: auto;
}

Ein möglicher dritter Wert ist inherit – damit erbt ein Element das Verhalten seines Eltern-Elements. Praktisch, wenn ein Element ein andere überlagert: Mit pointer-events: inherit könnte ein Button dann trotzdem geklickt oder ein Text selektiert werden.