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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 36Edge Support complet 12Firefox Support complet 52
Notes
Support complet 52
Notes
Notes Not applicable to Firefox platforms that support neither pointer nor touch events.
Support complet 29
Notes Désactivée
Notes Not applicable to Firefox platforms that support neither pointer nor touch events.
Désactivée 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.
IE Support complet 11
Support complet 11
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Support complet 23Safari Aucun support Non
Notes
Aucun support Non
Notes
Notes See WebKit bug 133112.
WebView Android Support complet 37Chrome Android Support complet 36Edge Mobile Support complet OuiFirefox Android Support complet 52
Support complet 52
Support complet 29
Désactivée
Désactivée 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.
Opera Android Support complet OuiSafari iOS Aucun support Non
Notes
Aucun support Non
Notes
Notes See WebKit bug 133112.
Samsung Internet Android Support complet Oui
manipulationChrome Support complet 36Edge Support complet 12Firefox Support complet 52
Notes
Support complet 52
Notes
Notes Not applicable to Firefox platforms that support neither pointer nor touch events.
Support complet 29
Notes Désactivée
Notes Not applicable to Firefox platforms that support neither pointer nor touch events.
Désactivée 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.
IE Support complet 11
Support complet 11
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Support complet 23Safari Aucun support NonWebView Android Support complet 37Chrome Android Support complet 36Edge Mobile Support complet OuiFirefox Android Support complet 52
Support complet 52
Support complet 29
Désactivée
Désactivée 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.
Opera Android Support complet OuiSafari iOS Support complet 9.1Samsung Internet Android Support complet Oui
double-tap-zoom
Non-standard
Chrome Aucun support NonEdge Support complet 12Firefox Aucun support NonIE Support complet 11
Support complet 11
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Support complet OuiFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
pinch-zoomChrome Support complet 56Edge Support complet 12Firefox Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1285685.
IE Support complet 11
Support complet 11
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Support complet 43Safari Aucun support NonWebView Android Support complet 56Chrome Android Support complet 56Edge Mobile Support complet OuiFirefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1285685.
Opera Android Support complet 43Safari iOS Aucun support NonSamsung Internet Android Support complet 6.0
pan-up, pan-down, pan-left and pan-rightChrome Support complet 55Edge Aucun support NonFirefox Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1285685.
IE Aucun support NonOpera Support complet 42Safari Aucun support NonWebView Android Support complet 55Chrome Android Support complet 55Edge Mobile Aucun support NonFirefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1285685.
Opera Android Support complet 42Safari iOS Aucun support NonSamsung Internet Android Support complet 6.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

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