La propriété CSS touch-action permet à un développeur de limiter la manière dont un utilisateur peut interagir avec un élément, ce qui est particulièrement utile pour éviter l'envoi d'événements lorsque cela n'est pas nécessaire.
Avant la version 55, Chrome prenait en charge pan-x et pan-y, qui limitent le défilement des éléments dans une seule direction.
La vidéo ci-dessous montre un exemple d'élément sans action tactile définie (à gauche), ainsi que panoramique-x et panoramique-y (au milieu et à droite).
Voici le code CSS pour les enregistrements d'écran au milieu et à droite:
.pan-x {
touch-action: pan-x;
}
.pan-y {
touch-action: pan-y;
}
Dans Chrome 55, pan-left, pan-right, pan-up et pan-down ont été ajoutés. Ces propriétés présentent une différence de comportement subtile, mais importante.
Ces propriétés obligent l'utilisateur à commencer des gestes dans une direction avant que l'élément ne réponde. Ce geste est semblable au geste "Tirez pour actualiser" qui ne répond que lorsque l'utilisateur fait un geste vers le bas sur l'écran.
La vidéo suivante montre pan-right et pan-down, qui nécessitent des gestes pour commencer respectivement de droite à gauche et de bas en haut.
Une fois que le geste a commencé, vous
pouvez faire un panoramique d'avant en arrière. Seule la direction initiale est affectée.
Bien que la vidéo illustre ce comportement, il peut être plus facile d'essayer par vous-même, en consultant l'exemple.
Le CSS de cette démonstration est le suivant:
.pan-right {
touch-action: pan-right;
}
.pan-down {
touch-action: pan-down;
}
La dernière chose qui se passe dans le monde de l'action tactile est la propriété pinch-zoom. Il s'agit d'une nouvelle propriété dans Chrome 55, derrière un indicateur, qui peut être utilisée avec n'importe quelle option de panoramique (c'est-à-dire pan-x, pan-y, pan-left, pan-right, pan-down, pan-up).
Si vous pincez un site Web, il effectue généralement un zoom avant sur le contenu de la page.
Définir un touch-action empêche ce comportement, mais l'ajout d'un pincement pour zoomer permet de le réactiver.
Cette vidéo montre la différence entre touch-action: pan-x et touch-action: pan-x pinch-zoom.
Toutes ces propriétés doivent simplifier une partie de la logique qui, sinon, devrait être implémentée par les développeurs à l'aide de pointer-events.