MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

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.
Brouillon de l'éditeur 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é Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple 36.0 (Oui) 52.0 (52.0)[1] 10.0-ms[2]
11.0
23 Pas de support[4]
pan-up, pan-down, pan-left, pan-right 55.0 Pas de support Pas de support[5] ? 42 Pas de support[4]
pinch-zoom 56.0 (Oui) Pas de support[5] 10.0-ms[2]
11.0
43 Pas de support[4]
Fonctionnalité Webview Android Chrome pour Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 36.0 36.0 (Oui) 52.0 (52.0)[1] (Oui) (Oui) 9.1 [3]
pan-up, pan-down, pan-left, pan-right 55.0 55.0 Pas de support Pas de support[5] Pas de support 42 Pas de support
pinch-zoom 56.0 56.0 (Oui) Pas de support[5] ? 43 Pas de support

[1] Depuis Firefox 29, cette propriété est disponible via la préférence layout.css.touch_action.enabled qui doit être activée (bug 960316). À partir de Firefox Nightly 50, elle est activée par défaut sur les versions Nightly. Elle fera partie de Firefox 52 (bug 1244402.

[2] IE10+ supporte également les valeurs non-standard pinch-zoom, double-tap-zoom, cross-slide-x et cross-slide-y.

[3] Supporte uniquement les valeurs manipulation et auto sur iOS.

[4] Voir WebKit bug 133112

[5] Voir bug 1285685.

Voir aussi

Étiquettes et contributeurs liés au document

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