Mit der CSS-Property touch-action können Entwickler einschränken, wie Nutzer mit einem Element interagieren können. Das ist besonders hilfreich, um zu verhindern, dass Ereignisse gesendet werden, wenn dies nicht erforderlich ist.
Vor Version 55 unterstützte Chrome pan-x und pan-y, mit denen Elemente nur in eine Richtung gescrollt werden können.
Das folgende Video zeigt ein Beispiel für ein Element ohne definierte Touch-Aktion (links) sowie Schwenk-X und Schwenken (mittig und rechts).
Das CSS für die mittleren und rechten Bildschirmaufzeichnungen ist:
.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 unterscheiden sich im Verhalten subtil, aber wichtig.
Mit diesen Eigenschaften muss der Nutzer Touch-Gesten in einer bestimmten Richtung ausführen, bevor das Element reagiert. Das ist vergleichbar mit der Geste „Zum Aktualisieren wischen“, die nur reagiert, wenn der Nutzer auf dem Display nach unten wischt.
Im folgenden Video werden pan-right und pan-down gezeigt, bei denen die Touch-Gesten jeweils von rechts nach links bzw. von unten nach oben beginnen müssen.
Sobald die Geste gestartet wurde, können Sie den Fokus hin und her schwenken. Nur die ursprüngliche Richtung ist betroffen.
Im Video wird dieses Verhalten demonstriert. Es ist aber möglicherweise einfacher, es selbst auszuprobieren. Sehen Sie sich dazu das Beispiel an.
Das CSS für diese Demo lautet:
.pan-right {
touch-action: pan-right;
}
.pan-down {
touch-action: pan-down;
}
Das Letzte, was in der Welt der Berührungsaktionen passiert, ist die Eigenschaft pinch-zoom. Dies ist ein neues Attribut in Chrome 55 hinter einem Flag, das mit jeder der Schwenkoptionen (z.B. pan-x, pan-y, pan-left, pan-right, pan-down, pan-up) verwendet werden kann.
Wenn Sie auf einer Website mit den Fingern auseinander- oder zusammenziehen, wird der Inhalt der Seite in der Regel herangezoomt.
Wenn Sie eine touch-action definieren, wird dieses Verhalten verhindert. Wenn Sie jedoch das Zoomen per Zusammenziehen und Spreizen aktivieren, wird es wieder aktiviert.
In diesem Video wird der Unterschied zwischen touch-action: pan-x und touch-action: pan-x pinch-zoom veranschaulicht.
Mit all diesen Properties sollte sich ein Teil der Logik vereinfachen lassen, die Entwickler sonst mit pointer-events implementieren müssten.