CSS touch-action

CSS Touch Actions: ziehen, aufziehen, tappen

CSS touch-action filtert Gesten und das Schalten vorgegebene Aktionen (z.B. 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.

18-12-15 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, 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 ist als der Inhalt.

  • 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;
    }
    .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 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 auto und manipulation