Action tactile - Astuces CSS

Anonim

La touch-actionpropriété en CSS vous permet de contrôler l'effet des interactions de l'écran tactile avec un élément, similaire à la pointer-eventspropriété la plus largement utilisée pour contrôler les interactions de la souris.

#element ( touch-action: pan-right pinch-zoom; )

La touch-actionpropriété est principalement utile pour les éléments d'interface utilisateur interactifs qui nécessitent un comportement légèrement différent selon le type d'appareil utilisé. Lorsque vos utilisateurs peuvent s'attendre à ce qu'un élément se comporte d'une manière particulière avec une souris, et qu'un comportement légèrement différent sur un écran tactile, cela touch-actionsera utile.

L'exemple le plus évident de ceci est un élément de carte interactive. Si vous avez déjà visualisé une carte non conçue pour fonctionner avec des appareils tactiles, vous avez probablement essayé de pincer et de zoomer uniquement pour trouver le navigateur agrandissant l'élément, mais pas en fait en zoomant sur la carte réelle.

Par défaut, un navigateur gérera automatiquement les interactions tactiles: pincer pour zoomer, glisser pour faire défiler, etc. Le réglage touch-actionsur nonedésactivera toute la gestion de ces événements par le navigateur, vous les laissant à implémenter (via JavaScript). Si vous ne souhaitez reprendre qu'une seule interaction, indiquez au navigateur de gérer le reste. Par exemple, si vous avez écrit un certain JavaScript qui gère uniquement le zoom, vous pouvez indiquer au navigateur de gérer tout le reste avec cette propriété: touch-action: pan-x pan-y;.

Voir les exemples Pen d'action tactile par CSS-Tricks (@ css-tricks) sur CodePen.

Syntaxe

touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulation

Valeurs

La touch-actionpropriété accepte les valeurs suivantes:

  • auto: Permet au navigateur de gérer toutes les interactions de panoramique et de zoom.
  • none: Empêche les navigateurs de gérer toutes les interactions de panoramique et de zoom. Cela ouvre la possibilité de définir de manière personnalisée ces interactions dans JavaScript.
  • pan-x: Active le panoramique horizontal avec une seule interaction de doigt. Il est un raccourci pour les pan-leftet les pan-rightvaleurs, mais peut être utilisé en combinaison avec pan-y, pan-up, pan-downet pinch-zoom.
  • pan-yPermet un panoramique vertical avec une seule interaction de doigt. Il est un raccourci pour les pan-upet les pan-downvaleurs, mais peut être utilisé en combinaison avec pan-x, pan-left, pan-rightet pinch-zoom.
  • manipulation: Active les interactions de pincement et de zoom, mais en désactive les autres que vous pourriez trouver sur certains appareils, comme le double-appui pour zoomer. C'est un raccourci pour la combinaison de pan-x pan-y pinch-zoom.
  • pan-left (Expérimental): permet une interaction avec un seul doigt lorsque le doigt d'un utilisateur se déplace vers la droite, qui se déplace vers la gauche.
  • pan-right (Expérimental): permet une interaction avec un seul doigt lorsque le doigt d'un utilisateur se déplace vers la gauche, qui se déplace vers la droite.
  • pan-down (Expérimental): permet une interaction avec un seul doigt lorsque le doigt d'un utilisateur se déplace vers le haut, qui se déplace vers le bas.
  • pan-up (Expérimental): permet une interaction avec un seul doigt lorsque le doigt d'un utilisateur se déplace vers le bas, qui effectue un panoramique vers le haut.
  • pinch-zoom: Active les interactions multi-doigts et peut être combiné avec n'importe quelle autre pan-valeur.

En rapport

  • pointer-events

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

Bureau

Chrome Firefox C'EST À DIRE Bord Safari
36 52 dix* 12 Non

Mobile / tablette

Chrome Android Android Firefox Android Safari sur iOS
88 85 81 13,0-13,1

Safari est l'omission flagrante de l'assistance tactile. iOs Safari a une prise en charge limitée, uniquement pour les valeurs autoet manipulation.

Information additionnelle

  • Spécification des événements de pointeur de niveau 2 - La spécification est actuellement dans la recommandation candidate mais est destinée à passer à la recommandation proposée début 2019, au moment de la rédaction de ce document. L'intention est que le document devienne une recommandation officielle du W3C.
  • Documentation MDN
  • Exemple de propriété CSS par pincement-zoom tactile - Démo de Google Chrome de son implémentation.
  • WebKit Bugzilla Ticket # 133112 - Ticket ouvert pour proposer le support Safari. Ajoutez votre vote pour l'augmenter.