touch-action

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.

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

Syntaxe

/* 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: manipulation;

/* Valeurs globales */
touch-action: inherit;
touch-action: initial;
touch-action: unset;

Valeurs

auto
L'agent utilisateur détermine les interactions tactiles possibles (zoomer, déplacer le viewport) lorsque l'élément est touché.
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.
manipulation
L'agent utilisateur peut considérr 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.

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Note : Les valeurs suivantes n'ont pas encore été formellement spécifiées. Elles font partie de Pointer Events – Level 2 Brouillon de l'éditeur mais pas de Pointer Events Recommendation. Ces valeurs ne sont pas largement implémentées à l'heure actuelle.

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.

Syntaxe formelle

auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] ] | 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;
}

Résultat

Spécifications

Spécification État Commentaires
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 Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple 36.0 Pas de support[1] (Oui) 10.0-ms[2]
11.0
26.0 Pas de support[4]
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile
Support simple 37.0 Pas de support[1] (Oui) (Oui) ? 9.1 [3]

[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. Aucune décision n'a encore été faite quant au passage vers le canal Release.

[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

Voir aussi

Étiquettes et contributeurs liés au document

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