La propiedad Css "touch-action": controla la respuesta a los gestos y elimina su retraso de 300ms 27.2.15
Descripción de la propiedad Css touch-action, sus valores admitidos y cómo usarla para evitar el efecto de los 300ms de retraso en el doble toque (300ms Tap Delay) en dispositivos táctiles.
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 Computado | El 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
- 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.
- Toques que comienzan en el elemento no deberán provocar comportamientos predeterminados.
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:
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.
 en dispositivos táctiles.){kind=link}
Kseso
the obCSServer ᛯ 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 Kseso
Muchas gracias por este artículo, Kssocss.
ResponderEliminarCreo que conviene ampliar la cita que haces de IEblog, con esta frase:
"Now in the new engine, setting a viewport rule with a width less than or equal to the device-width (a strong signal that you’re not a desktop site we need to optimize for small screens) will also disable the 300ms delay."
Es decir, que si, por ejemplo, incluimos en el head esta meta eliminamos también el retardo en navegadores modernos:
[code] meta content='width=device-width, initial-scale=1.0, minimum-scale=1.0,' name='viewport'/ [/code]
Gracias a ti, Manuel
EliminarSi no puse esa cita fue por mi comprensión del inicio o intro: "Now in the new engine..." (así en singular) al entender (y sigo entendiendo) que se refiere al IE11.
No he podido verificar si es efectivo ese meta en otros navegadores.
Y de paso, con mis omisiones y "dudosas comprensiones" del inglés, os fuerzo a que os lo leáis vosotros y así enriquezcáis los post ;-) xD xD
Un saludo