La propriété CSS touch-action permet à un développeur de limiter la façon dont un utilisateur peut interagir avec un élément, ce qui est particulièrement utile pour éviter que des événements ne soient distribués lorsqu'ils ne sont pas nécessaires.
Avant la version 55, Chrome était compatible avec 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 des panoramiques X et Y (au milieu et à droite).
Le CSS pour les enregistrements d'écran de la main du milieu et de la main droite est le suivant:
.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. Le comportement de ces propriétés est subtil, mais important.
Ces propriétés obligent l'utilisateur à commencer les gestes dans une direction avant que l'élément ne réponde. Cela ressemble au geste "baisser 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 commençant respectivement de droite à gauche et de bas en haut.
Une fois le geste commencé, vous pouvez faire un panoramique avant et arrière. Seul le sens initial est affecté.
Bien que la vidéo illustre ce comportement, il peut être plus simple de l'essayer vous-même. Pour ce faire, consultez l'exemple.
Le code 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 l'une des options de panoramique (par exemple, pan-x, pan-y, pan-left, pan-right, pan-down, pan-up).
Si vous pincez un site Web, le contenu de la page est généralement mis en avant.
La définition d'un touch-action empêche ce comportement, mais l'ajout du pincement pour zoomer le réactive.
Cette vidéo montre la différence entre touch-action: pan-x et touch-action: pan-x pinch-zoom.
Toutes ces propriétés devraient simplifier une partie de la logique que les développeurs devraient autrement implémenter à l'aide de pointer-events.