Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
touch-action
Baseline Widely available *
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2019.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
La propriététouch-action définit si une région donnée peut être manipulée par l'utilisateur grâce à des interactions tactiles (en déplaçant ou en zoomant) et comment cette interaction fonctionnera.
/* Avec un mot-clé */touch-action: auto;touch-action: none;touch-action: pan-x;touch-action: pan-left;touch-action: pan-right;touch-action: pan-y;touch-action: pan-up;touch-action: pan-down;touch-action: pinch-zoom;touch-action: manipulation;/* Valeurs globales */touch-action: inherit;touch-action: initial;touch-action: unset;Par défaut, le déplacement et le zoom sont exclusivement gérés par le navigateur, ce qui déclenche un évènementpointercancel à destination de l'application. En désactivant la prise en charge de ces gestes, l'application peut alors fournir ses propres gestionnaires d'évènements pourpointermove,pointerup.
On utilise parfois cette propriété pour désactiver les interactions tactiles sur un élément pour un jeu ou une carte qui fournissent leur propre gestion tactile.
Lorsqu'une interaction tactile a lieu, le navigateur inspecte les valeurs detouch-action pour l'élément et ses ancêtres jusqu'à atteindre l'élément qui implémente le geste (c'est-à-dire celui qui peut défiler/zoomer). En pratique,touch-action est généralement uniquement appliquée aux éléments de plus haut niveau ayant besoin d'un comportement spécifique. Il n'est pas nécessaire de redéfinirtouch-action sur les descendants.
Note :Lorsqu'un geste est déjà initié, tout changement surtouch-action n'aura aucun impact sur le geste en cours.
Syntaxe
La propriététouch-action peut être définie grâce à :
- l'un des mots-clés parmi
auto,none,manipulationou - un mot-clé parmi
pan-x,pan-left,pan-right, et/ou un mot-clé parmipan-y,pan-up,pan-downet éventuellement le mot-clépinch-zoom.
Valeurs
autoL'agent utilisateur détermine les interactions tactiles possibles (zoomer, déplacer le viewport) lorsque l'élément est touché.
manipulationLes gestes de déplacement et de zoom sont autorisés mais les gestes non-standards (ex. double touche pour zoomer) sont désactivés. Cette valeur est un alias pour
pan-x pan-y pinch-zoom.noneCette valeur désactive tous les comportements par défaut et permet au contenu de gérer les interaction tactiles (les touches qui commencent sur l'élément ne doivent pas déclencher de comportements tactiles par défaut).
pan-xL'agent utilisateur peut considérer que les touchers qui débutent sur l'élément ont pour but de faire défiler horizontalement le plus proche ancêtre de l'élément qui possède du contenu en défilement horizontal. Cette valeur peut être combinée avec
pan-y,pan-up,pan-downet/oupinch-zoom.pan-yL'agent utilisateur peut considérer que les touchers qui débutent sur l'élément ont pour but de faire défiler verticalement le plus proche ancêtre de l'élément qui possède du contenu en défilement vertical. Cette valeur peut être combinée avec
pan-x,pan-left,pan-rightet/oupinch-zoom.pan-left,pan-rightExpérimentalL'agent utilisateur peut considérer que les touchers qui commencent sur l'élément n'ont pour but que de faire défiler horizontalement le contenu du plus proche ancêtre de l'élément qui possède du contenu qui peut défiler (scrollable) horizontalement.
pan-up,pan-downExpérimentalL'agent utilisateur peut considérer que les touchers qui commencent sur l'élément n'ont pour but que de faire défiler verticalement le contenu du plus proche ancêtre de l'élément qui possède du contenu qui peut défiler (scrollable) verticalement.
pinch-zoomL'agent utilisateur peut considérer que les touches qui commencent sur l'élément n'ont pour but que de zoomer sur l'ancêtre le plus proche qui contient du contenu sur lequel on peut zoomer.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | tous les éléments sauf : les éléments en ligne non remplacés, les lignes, les groupes de lignes, les colonnes et les groupes de colonnes pour les tableaux |
| Héritée | non |
| Valeur calculée | comme défini |
| Type d'animation | Non animable |
Syntaxe formelle
touch-action =
auto|
none|
[[pan-x|pan-left|pan-right]||[pan-y|pan-up|pan-down]||pinch-zoom]|
manipulation
Exemples
HTML
<ul> Ma list <li>UnLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll</li> <li> UnAutreLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll </li></ul>CSS
ul { width: 200px; height: 50px; overflow-x: scroll;}ul > li { touch-action: pan-x pinch-zoom;}Résultat
Note :La propriététouch-action est également utilisée afin de supprimer le délai donné à l'évènementclick pour prendre en charge le zoom via la double-touche.
Accessibilité
Une déclarationtouch action: none; empêchera le navigateur de zoomer. Cela peut empêcher les personnes à faible vision de lire et de comprendre le contenu de la page.
Spécifications
| Specification |
|---|
| Compatibility # touch-action |
| Pointer Events # the-touch-action-css-property |