Touch-action - Propriété CSS

touch-action

Résumé des caractéristiques de la propriété `touch-action`

Description rapide

Détermine quels sont les gestes traités par le navigateur sur un écran tactile (glissé du doigt, zoom par pincement...)

Statut

Standard

Utilisable sur

HTML

Valeurs prédéfinies

Pourcentages

Ne s'appliquent pas.

Valeur initiale

auto

Héritée par défaut

Non.

Module W3C

Les événements de pointeur

Références (W3C)

🡇

🡅

Pointer Events - Level 3

Statut du document: WD (document de travail)

Pointer Events - Level 2

Statut du document: REC (recommandation)

Schéma syntaxique de `touch-action`.

Schéma syntaxique de la propriété touch-action
Les liens du schéma donnent accès à plus de détails
Télécharger le schéma en SVG

Description de la propriété `touch-action`.

touch-action est une propriété du langage CSS, qui active ou désactive le traitement des gestes tels que le défilement du contenu par glissé du doigt, le zoom par pincement, etc. Ces fonctionnalités sont opérationnelles sur les écrans tactiles, particulièrement sur les téléphones portables.

Ces possibilités concernent essentiellement les écrans tactiles. Néanmoins les actions équivalentes réalisées avec une souris ou un stylet sont soumis à touch-action.

Remarque : touch-action ne désactive que le traitement des gestes par le navigateur, autrement dit, l'application ou la page peut fournir un traitement spécifique qui ne sera pas impacté.

touch-action permet une gestion fine des gestes qui sont traités ou non. On peut souhaiter par exemple bloquer le défilement mais sans empêcher le zoom, ce qui serait pénalisant pour des personnes mal-voyantes.

Le standard W3C précise que la prise en compte de touch-action n'a pas à être immédiate. Par exemple si un défilement est en cours et que la valeur de touch-action est modifiée par programme, le défilement en cours sera terminé. Seuls les gestes qui commencent après la modification de la valeur de touch-action sont impactés.

Reportez-vous aussi à la propriété pointer-events qui a un rôle comparable mais pour les pointeurs genre souris.

Syntaxes pour `touch-action`.

touch-action: auto;

Valeur par défaut. Le navigateur traite les gestes normalement.
touch-action: none;

Le navigateur ne traite aucun geste : l'utilisateur ne peut plus déplacer le contenu en glissant le doigts, ni effectuer un zoom par pincement.
touch-action: pan-x; touch-action: pan-y;

Le navigateur traite normalement les gestes visant à faire défiler le contenu horizontalement (pan-x) ou verticalement pan-y).
touch-action: pan-up; touch-action: pan-down; touch-action: pan-left; touch-action: pan-right;

Le navigateur ne traite que les gestes qui ont pour but de faire défiler le contenu dans une des quatre directions.

Cependant si l'utilisateur fait défiler le contenu dans une direction autorisée, tant qu'il ne retire pas son doigt, il sera capable de revenir en arrière jusqu'à son point de départ, même si le défilement dans le sens du retour n'est pas autorisé.
touch-action: pinch-zoom;

Le zoom par pincement est le seul geste traité par le navigateur.
touch-action: pan-x pinch-zoom;

Plusieurs valeurs sont cumulables. Dans cet exemple, le défilement horizontal et le zoom sont autorisés. Certains combinaisons ne présentent pas d'intérêt : par exemple pan-x pan-left, puisque pan-x intègre pan-left et pan-right.
touch-action: manipulation;

Le navigateur traite les gestes visant à faire défiler le contenu, dans une direction quelconque, ou à effectuer un zoom par pincement. Les autres gestes ne sont pas traités (certains navigateur associent par exemple le touché long à une demande de zoom).
Cette valeur est équivalente à la combinaison des trois valeurs pan-x, pan-y et pinch-zoom.

Valeurs communes à toutes les propriétés :


touch-action: initial  (auto)
touch-action: inherit
touch-action: revert
touch-action: revertLayer
touch-action: unset

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Prise en charge par les navigateurs (compatibilité).

La propriété touch-action est bien prise en charge par la plupart des navigateurs actuels.

Propriététouch-action

Estimation de la prise en charge globale.

94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété `touch-action`.

Première introduction de la propriété touch-action. Ce module est maintenant obsolète.

11 Décembre 2012
Document de travail.
09 Mai 2013
Candidat à la recommandation.
16 Décembre 2014
Proposé à la recommandation.
24 Février 2015
Recommandation.
04 Avril 2019
Ancienne spécification, déclarée obsolète.
Les événements de pointeur - Niveau 2

Pas de changement concernant la propriété touch-action.

11 Décembre 2012
Document de travail.
09 Mai 2013
Candidat à la recommandation.
21 Février 2019
Proposé à la recommandation.
04 Avril 2019
Recommandation.
Les événements de pointeur - Niveau 3

Ajout des valeurs logiques pan-left, pan-right, pan-up et pan-down à la propriété touch-action.

12 Décembre 2019
Document de travail.
Pas de changement concernant la propriété touch-action.

28 Novembre 2024
Document de travail.

Voir aussi, au sujet du pointeur.

Cette spécification, dénommée Pointer Events, est assez ancienne, elle décrit plutôt le fonctionnement des différents événements du pointeur (souris). La propriété touch-action fait partie de ce module, ainsi que les définitions suivantes :

Propriétés :

pointer-events

Réaction au survol de la souris ou autre événement lié à la souris.