Touch-action - Propriété CSS
Résumé des caractéristiques de la propriété touch-action
auto | none | pan-x | pan-y | pan-left | pan-right | pan-up | pan-down | manipulation | pinch-zoomautoSchéma syntaxique de touch-action.
touch-actionLes 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 verticalementpan-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, puisquepan-xintègrepan-leftetpan-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 valeurspan-x,pan-yetpinch-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.
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.
Prise en charge par les navigateurs (compatibilité).
La propriété touch-action est bien prise en charge par la plupart des navigateurs actuels.
touch-actionNavigateurs 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
UC Browser pour Androïd
Opéra mini
Voir aussi, dans le même module de standardisation que touch-action.
Les spécifications CSS éditées par le W3C sont organisées en modules. touch-action fait partie du (). Les définitions suivantes sont également décrites dans ce même module.
Sélecteurs :
type="color".