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 :

CSS - 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.

Description de la propriété touch-action.

touch-action définit quels seront les gestes traités par le navigateur : défilement par glissé du doigt, zoom par pincement. 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, 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;

    La valeur initiale est auto.

  • touch-action: unset; touch-action: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

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é).

Afficher les versions antérieures   Afficher la version à venir