Mit der CSS-Property touch-action kann ein Entwickler einschränken, wie ein Nutzer mit einem Element interagieren kann. 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 für „Schwenken-X“ und „Schwenken-Y“ (Mitte 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. Es ist nur die ursprüngliche Richtung betroffen.
Im Video wird dieses Verhalten veranschaulicht. Es ist aber einfacher, wenn Sie es selbst ausprobieren. 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;
}
Die Property pinch-zoom ist die letzte Neuerung im Bereich Touch-Aktionen. Das ist eine neue Eigenschaft in Chrome 55, die hinter einem Flag versteckt ist und mit allen Schwenkoptionen verwendet werden kann (z.B. pan-x, pan-y, pan-left, pan-right, pan-down, pan-up).
Wenn Sie auf einer Website mit den Fingern 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.