soy Kseso y esto EsCSS

La propiedad Css "touch-action": controla la respuesta a los gestos y elimina su retraso de 300ms

La propiedad Css "touch-action": controla la respuesta a los gestos y elimina su retraso de 300ms

·Por Kseso ✎ 2
La propiedad Css "touch-action": controla la respuesta a los gestos y elimina su retraso de 300ms

Ya en ocasiones anteriores he traído al blog propiedades Css (o aspectos que le atañen) que se encuentran recogidas fuera de lo que podría considerarse el corpus de Css. O lo que es lo mismo, su definición se encuentran en documentos "no css".

Como por ejemplo la propiedad pointer-events o las del grupo *-rendering. Ambas desarrolladas en la especificación relativa al SVG.

En esta ocasión la protagonista del artículo es la propiedad Css touch-action. Propiedad que se encuentra en el documento Pointer-events (no confundir con la propiedad mencionada anteriormente).

Este documento, que ha alcanzado recientemente el status de Recomendación, se centra en lo relativo al manejo de los eventos con independencia del dispositivo señalador y su hardware usado (gestos, "toques", clicks... con independencia del dispositivo: ratón, puntero, dedo..).

La propiedad touch-action

Touch-action es una propiedad CSS que controla el filtrado de eventos de los gestos, proporcionando a los desarrolladores un mecanismo declarativo para desactivar selectivamente el desplazamiento táctil (en uno o ambos ejes), el "pinch-zoom" o el "double-tap-zoom".
Nombre:touch-action
Valor:auto | none | [ pan-x || pan-y ] | manipulation
Inicial:auto
Aplica a:todos los elementos, excepto: elementos en línea no reemplazados, table rows, row groups, table columns, y column groups.
Heredado:no
Porcentajes:N/A
Media:visual
Valor ComputadoEl mismo que el valor declarado.

Definición de la propiedad

La propiedad CSS touch-acción determina si la entrada táctil puede desencadenar un comportamiento predeterminado suministrado por el agente de usuario. Esto incluye, pero no se limita a, comportamientos como scroll o zoom.

Significado de los valores

En las siguientes definiciones entiende toque y gesto como el hecho de realizar cualquier acción en el elemento, ya sea con los dedos, el puntero del ratón o cualquier otra forma de "señalarlo".

Auto
El agente de usuario puede determinar cualquier comportamiento táctil permitido (como el encuadre, scroll, zoom) para gestos que comienzan en el elemento.
None
Toques que comienzan en el elemento no deberán provocar comportamientos predeterminados.
pan-x
El agente de usuario puede considerar los toques que comienzan en el elemento sólo a los efectos de desplazamiento horizontal en su antepasado más cercano con contenido "escroleable" horizontalmente.
pan-y
Igual que pan-x pero en el eje Y (vertical).
manipulation
El agente de usuario puede considerar los toques que comienzan en el elemento sólo a los efectos de desplazamiento y zoom continuo. Cualquiera otros comportamiento adicionales soportados por "auto" están fuera del alcance de esta especificación.

IEblog, touch-action y el retraso de los 300ms

Pointer Events W3C Recommendation, Interoperable Touch, and Removing the Dreaded 300ms Tap Delay es un interesante artículo publicado en IEblogs sobre esta especificación (Pointer Events).

En él dedica un apartado especial al efecto 300ms Tap Delay y cómo eliminar el retardo de los 300ms en la respuesta de los dispositivos "táctiles" a los gestos.

Cuando los navegadores modernos llegaron por primera vez a los dispositivos móviles, surgió un problema interesante. ¿Cómo hacer que los sitios diseñados para "grandes" monitores de escritorio trabajasen en una pantalla pequeña? El resultado, los navegadores móviles escalan las páginas web de tal manera (complicada) que se ajusten mejor.

A continuación, se introdujo el gesto de tocar dos veces para ampliar rápidamente el contenido relevante (zoom).

Esta solución proporciona una experiencia razonable para los sitios que no están optimizados para móviles. Sin embargo, se trata con una solución de compromiso. Desde la perspectiva de reconocer los gestos, un solo toque podría ser seguido por otro (lo que es un doble toque).

Así que antes de iniciar la acción por un toque (por ejemplo, la navegación de un enlace o haciendo clic en un botón), el navegador debe hacer una pausa por un momento para ver si sigue otro toque justo a continuación. Esto introduce un retraso notable (300 ms) cuando estás tocando para activar algo. Este problema ha sido documentado y se han propuesto muchas | correcciones o soluciones, incluyendo la biblioteca FastClick y otros.

A partir de IE10 (ahora en Chrome y próximamente en Firefox), los sitios podrán desactivar el retraso de los 300ms en los toques con la propiedad de CSS touch-acción de la especificación Pointer Events:

.disable300msDelay { touch-action: manipulation; }

No dejes de echarle un vistazo al artículo de IEblog sobre la propiedad touch-action

Soporte a la propeidad Css touch-action

A estas fechas, Febrero 2015, esta es la captura de pantalla del soporte por los navegadores a la propiedad Css touch-action según CanIuse:

Soporte a la propiedad Css touch-action según CanIuse
Soporte a la propiedad Css touch-action según CanIuse

Quizás no se vea bien, pero observa la nota referente a Firefox: pese a que que no esté habilitada por defecto (hay que hacerlo en la configuración layout.css.touch_action.enabled) en Windows 8 Touch ('Metro') sí lo está. Por lo tanto funciona en ese sistema operativo.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso