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. Cette méthode est semblable au geste "tirer pour actualiser" qui ne répond que lorsque l'utilisateur fait un geste vers le bas de 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. Seule la direction initiale est affectée.
Bien que la vidéo illustre ce comportement, consultez l'exemple qui vous semble plus facile à tester par vous-même.
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.