Acción táctil - Trucos CSS

Anonim

La touch-actionpropiedad en CSS le brinda control sobre el efecto de las interacciones de la pantalla táctil con un elemento, similar a la pointer-eventspropiedad más utilizada para controlar las interacciones del mouse.

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

La touch-actionpropiedad es útil principalmente para elementos de interfaz de usuario interactivos que necesitan un comportamiento ligeramente diferente según el tipo de dispositivo que se utilice. Cuando sus usuarios puedan esperar que un elemento se comporte de una manera particular con un mouse, y un comportamiento ligeramente diferente en una pantalla táctil, touch-actionserá útil.

El ejemplo más obvio de esto es un elemento de mapa interactivo. Si alguna vez ha visto un mapa que no está diseñado para funcionar con dispositivos táctiles, probablemente haya intentado pellizcar y hacer zoom solo para encontrar que el navegador amplía el elemento, pero no hace zoom en el mapa real.

De forma predeterminada, un navegador manejará las interacciones táctiles automáticamente: pellizcar para hacer zoom, deslizar para desplazarse, etc. La configuración touch-actionen nonedesactivará todo el manejo del navegador de estos eventos, dejándolos a usted para implementarlos (a través de JavaScript). Si solo desea hacerse cargo de una interacción, dígale al navegador que se encargue del resto. Por ejemplo, si escribió algo de JavaScript que sólo los mangos zoom, se puede decir que el navegador mango todo lo demás con esta propiedad: touch-action: pan-x pan-y;.

Vea los ejemplos de Pen de acción táctil de CSS-Tricks (@ css-tricks) en CodePen.

Sintaxis

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

Valores

La touch-actionpropiedad acepta los siguientes valores:

  • auto: Permite que el navegador maneje todas las interacciones de panorámica y zoom.
  • none: Impide que los navegadores gestionen todas las interacciones de panorámica y zoom. Esto abre la posibilidad de definir de forma personalizada esas interacciones en JavaScript.
  • pan-x: Permite la panorámica horizontal con la interacción de un solo dedo. Se taquigrafía para los pan-lefty pan-rightvalores, pero se puede utilizar en combinación con pan-y, pan-up, pan-downy pinch-zoom.
  • pan-yPermite la panorámica vertical con la interacción de un solo dedo. Se taquigrafía para los pan-upy pan-downvalores, pero se puede utilizar en combinación con pan-x, pan-left, pan-righty pinch-zoom.
  • manipulation: Habilita las interacciones de pellizcar y hacer zoom, pero deshabilita otras que puede encontrar en algunos dispositivos, como tocar dos veces para hacer zoom. Es la abreviatura de la combinación de pan-x pan-y pinch-zoom.
  • pan-left (Experimental): permite la interacción de un solo dedo cuando el dedo de un usuario se mueve hacia la derecha, que gira hacia la izquierda.
  • pan-right (Experimental): permite la interacción de un solo dedo cuando el dedo de un usuario se mueve hacia la izquierda, que gira hacia la derecha.
  • pan-down (Experimental): permite la interacción de un solo dedo cuando el dedo de un usuario se mueve hacia arriba, que gira hacia abajo.
  • pan-up (Experimental): permite la interacción de un solo dedo cuando el dedo de un usuario se mueve hacia abajo, que gira hacia arriba.
  • pinch-zoom: Permite interacciones con varios dedos y se puede combinar con cualquier otro pan-valor.

Relacionado

  • pointer-events

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Cromo Firefox ES DECIR Borde Safari
36 52 10 * 12 No

Móvil / Tablet

Android Chrome Android Firefox Androide Safari de iOS
88 85 81 13.0-13.1

Safari es la omisión evidente del soporte de acción táctil. iOs Safari tiene soporte limitado, solo para los valores autoy manipulation.

información adicional

  • Especificación de nivel 2 de eventos de puntero: la especificación se encuentra actualmente en la Recomendación Candidata, pero está destinada a pasar a la Recomendación propuesta a principios de 2019, a partir de este escrito. La intención es que el documento se convierta en una Recomendación oficial del W3C.
  • Documentación MDN
  • Ejemplo de propiedad CSS de acción táctil y zoom: la demostración de Google Chrome de su implementación.
  • WebKit Bugzilla Ticket # 133112 - Ticket abierto para proponer soporte de Safari. Agregue su voto para aumentarlo.