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 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 |
| Média | visuel |
| Valeur calculée | comme spécifié |
| Animation type | discrete |
| Ordre canonique | l'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) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Support simple | 36.0 | Pas de support[1] | 10.0-ms[2] 11.0 |
26.0 | Pas de support[4] |
| Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Support simple | 37.0 | Pas de support[1] | (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
- Les événements de pointage
- Un billet du blog WebKit : une gestion plus responsive du toucher sur iOS (en anglais)