We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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;

Valeur initialeauto
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éenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Par défaut, le déplacement et le zoom sont exclusivement gérés par le navigateur, ce qui déclenche un évènement pointercancel à 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 pour pointermove, pointerup. Lorsqu'une interaction tactile a lieu, le navigateur inspecte les valeurs de touch-action pour l'élément et ses ancêtres jusqu'à atteindre l'élément qui implémente le geste (c'est-à-dire celui qui défiler/zoomer).

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.

Syntaxe

La propriété touch-action peut être définie grâce à :

Valeurs

auto
L'agent utilisateur détermine les interactions tactiles possibles (zoomer, déplacer le viewport) lorsque l'élément est touché.
manipulation
L'agent utilisateur peut considérer que les touchers qui débutent sur l'élément n'ont pour but que de défiler ou de zoomer en continu. Tous les autres comportements, supportés par auto, sont en dehors de cette spécification.
none
Cette 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-x
L'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.
pan-y
L'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.
pan-left, pan-right
L'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-down
L'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-zoom
L'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.

Syntaxe formelle

auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation

Exemple

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

Accessibilité

Une déclaration touch 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

Spécification État Commentaires
Compatibility Standard
La définition de 'touch-action' dans cette spécification.
Standard évolutif Ajout de la valeur pinch-zoom pour la propriété.
Pointer Events – Level 2
La définition de 'touch-action' dans cette spécification.
Version de travail Ajout des valeurs pan-left, pan-right, pan-up, pan-down pour la propriété.
Pointer Events
La définition de 'touch-action' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple3612

521

291 2

11

10 -ms-

23 Non3
manipulation3612

521

291 2

11

10 -ms-

23 Non
double-tap-zoom Non12 Non

11

10 -ms-

Non Non
pinch-zoom5612 Non4

11

10 -ms-

43 Non
pan-up, pan-down, pan-left and pan-right55 Non Non4 Non42 Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple3636 Oui

52

292

Oui Non3 Oui
manipulation3636 Oui

52

292

Oui9.1 Oui
double-tap-zoom Non Non Oui Non Non Non Non
pinch-zoom5656 Oui Non443 Non6.0
pan-up, pan-down, pan-left and pan-right5555 Non Non442 Non6.0

1. Not applicable to Firefox platforms that support neither pointer nor touch events.

2. From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. See WebKit bug 133112.

4. See bug 1285685.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,