Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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
Valeurs prédéfinies
auto | none | pan-x | pan-y | pan-left | pan-right | pan-up | pan-down | manipulation | pinch-zoom
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Non
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: REC (recommandation)

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 auto none none manipulation manipulation pan-x pan-x pan-left pan-left pan-right pan-right pan-y pan-y pan-up pan-up pan-down pan-down
;
  • 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.

  • touch-action: initial; touch-action: inherit; touch-action: revert; touch-action: revert-layer; touch-action: unset;

    La valeur initiale est : auto.

Simulateur pour touch-action.

Le simulateur applique touch-action à la balise html de cette page. Le contenu complet de la page est donc impacté. Bien entendu l'effet ne sera visible que sur un écran tactile, comme celui d'un téléphone mobile.

touch-action :

Prise en charge par les navigateurs (compatibilité).

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

1
touch-action
Estimation de la prise en charge en pourcentage du parc actuel.
94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini