Mit der CSS-Eigenschaft touch-action kann ein Entwickler einschränken, wie ein Nutzer mit einem Element interagieren kann. Das ist besonders hilfreich, um zu verhindern, dass Ereignisse ausgelöst werden, wenn dies nicht erforderlich ist.
Vor Version 55 unterstützte Chrome pan-x und pan-y, die Elemente auf das Scrollen in eine Richtung beschränken.
Das folgende Video zeigt ein Beispiel für ein Element ohne definierte Touch-Action (links) sowie Schwenk-X- und Schwenk-Y (mittig und rechts).
Die CSS für die Screencasts in der Mitte und rechts lauten wie folgt:
.pan-x {
touch-action: pan-x;
}
.pan-y {
touch-action: pan-y;
}
In Chrome 55 wurden pan-left, pan-right, pan-up und pan-down hinzugefügt. Diese Eigenschaften weisen einen subtilen, aber wichtigen Unterschied im Verhalten auf.
Diese Eigenschaften zwingen den Nutzer dazu, Touch-Gesten in eine Richtung zu starten, bevor das Element reagiert. Dies ähnelt der Touch-Geste "Zum Aktualisieren ziehen", die nur reagiert, wenn der Nutzer auf dem Bildschirm nach unten zeigt.
Das folgende Video zeigt pan-right und pan-down, bei denen Touch-Gesten von rechts nach links bzw. von unten nach oben beginnen müssen.
Sobald die Geste gestartet ist, können Sie vor- und zurückschwenken. Es ist nur die Ausgangsrichtung betroffen.
Auch wenn das Video dieses Verhalten zeigt, finden Sie es möglicherweise einfacher, es selbst auszuprobieren. Sehen Sie sich dazu das Beispiel an.
Der CSS-Code für diese Demo lautet:
.pan-right {
touch-action: pan-right;
}
.pan-down {
touch-action: pan-down;
}
Im Bereich der Touchbedienung wird als Letztes die Property pinch-zoom verwendet. Dies ist eine neue Eigenschaft in Chrome 55, die sich hinter einem Flag befindet und mit jeder Schwenkoption (z.B. pan-x, pan-y, pan-left, pan-right, pan-down, pan-up) verwendet werden kann.
Wenn Sie auf einer Website zwei Finger auseinander- und zusammenziehen, wird in der Regel der Seiteninhalt herangezoomt.
Definieren Sie ein touch-action, um dieses Verhalten zu verhindern, aber durch das Hinzufügen von Pinch & Zoom wird es wieder aktiviert.
In diesem Video sehen Sie den Unterschied zwischen touch-action: pan-x und touch-action: pan-x pinch-zoom.
Alle diese Attribute sollten einen Teil der Logik vereinfachen, die andernfalls von Entwicklern mithilfe von pointer-events implementiert werden müsste.