touch-action

Die CSS-Eigenschaft touch-action gibt Ihnen die Kontrolle über die Auswirkung von Touchscreen-Interaktionen mit einem Element, ähnlich der weiter verbreiteten Eigenschaft pointer-events, die zur Steuerung von Mausinteraktionen verwendet wird.

#element {
  touch-action: pan-right pinch-zoom;
}

Die Eigenschaft touch-action ist hauptsächlich nützlich für interaktive UI-Elemente, die je nach Gerätetyp ein geringfügig anderes Verhalten erfordern. Wenn Ihre Benutzer erwarten, dass sich ein Element bei der Verwendung einer Maus auf eine bestimmte Weise verhält und auf einem Touchscreen etwas anders, ist touch-action sehr hilfreich.

Das offensichtlichste Beispiel hierfür ist ein interaktives Kartenelement. Wenn Sie jemals eine Karte gesehen haben, die nicht für Touch-Geräte ausgelegt war, haben Sie wahrscheinlich versucht, sie zu verkleinern und zu vergrößern, nur um festzustellen, dass der Browser das Element vergrößert, aber die eigentliche Karte nicht zoomt.

Standardmäßig behandelt ein Browser Touch-Interaktionen automatisch: Pinch-to-Zoom, Swipen zum Scrollen usw. Das Setzen von touch-action auf none deaktiviert die gesamte Browser-Behandlung dieser Ereignisse und überlässt Ihnen die Implementierung (über JavaScript). Wenn Sie nur eine Interaktion übernehmen möchten, weisen Sie den Browser an, den Rest zu behandeln. Wenn Sie beispielsweise JavaScript geschrieben haben, das nur das Zoomen übernimmt, können Sie den Browser mit dieser Eigenschaft anweisen, alles andere zu behandeln: touch-action: pan-x pan-y;.

Siehe den Pen Beispiele für touch-action von CSS-Tricks (@css-tricks) auf CodePen.

Syntax

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

Werte

Die Eigenschaft touch-action akzeptiert die folgenden Werte

• auto: Ermöglicht dem Browser die Behandlung aller Schwenk- und Zoom-Interaktionen.
• none: Deaktiviert die Browser-Behandlung aller Schwenk- und Zoom-Interaktionen. Dies ermöglicht die benutzerdefinierte Definition dieser Interaktionen in JavaScript.
• pan-x: Ermöglicht horizontales Schwenken mit einer Ein-Finger-Interaktion. Es ist eine Kurzform für die Werte pan-left und pan-right, kann aber in Kombination mit pan-y, pan-up, pan-down und pinch-zoom verwendet werden.
• pan-y Ermöglicht vertikales Schwenken mit einer Ein-Finger-Interaktion. Es ist eine Kurzform für die Werte pan-up und pan-down, kann aber in Kombination mit pan-x, pan-left, pan-right und pinch-zoom verwendet werden.
• manipulation: Ermöglicht Pinch- und Zoom-Interaktionen, deaktiviert aber andere, die auf manchen Geräten vorkommen können, wie z. B. Doppel-Tippen zum Zoomen. Es ist eine Kurzform für die Kombination von pan-x pan-y pinch-zoom.
• pan-left (Experimentell): Ermöglicht eine Ein-Finger-Interaktion, wenn sich die Finger eines Benutzers nach rechts bewegen, was nach links schwenkt.
• pan-right (Experimentell): Ermöglicht eine Ein-Finger-Interaktion, wenn sich die Finger eines Benutzers nach links bewegen, was nach rechts schwenkt.
• pan-down (Experimentell): Ermöglicht eine Ein-Finger-Interaktion, wenn sich die Finger eines Benutzers nach oben bewegen, was nach unten schwenkt.
• pan-up (Experimentell): Ermöglicht eine Ein-Finger-Interaktion, wenn sich die Finger eines Benutzers nach unten bewegen, was nach oben schwenkt.
• pinch-zoom: Ermöglicht Mehrfingerinteraktionen und kann mit jedem anderen pan- Wert kombiniert werden.

Verwandt

• pointer-events

Browser-Unterstützung

Safari ist die offensichtliche Lücke in der Unterstützung für touch-action. iOS Safari hat nur eingeschränkte Unterstützung, nur für die Werte auto und manipulation.

Zusätzliche Informationen

• Pointer Events Level 2 Specification – Die Spezifikation befindet sich derzeit in der Candidate Recommendation, soll aber Anfang 2019 zur Proposed Recommendation werden, zum Zeitpunkt der Erstellung dieses Textes. Die Absicht ist, dass das Dokument zu einer offiziellen W3C Recommendation wird.
• MDN Dokumentation
• Touch-Action Pinch-Zoom CSS Property Sample – Googles Chrome-Demo seiner Implementierung.
• WebKit Bugzilla Ticket #133112 – Offenes Ticket zur Vorschlagung der Safari-Unterstützung. Geben Sie Ihre Stimme ab, um es höher zu stufen.