Las probabilidades son: hover fue el primer selector de seudo clase que hayas aprendido. Joder, podría ser el único que hayas aprendido. Todos amamos esta pequeña y encantadora característica y la usamos constantemente como una forma de crear experiencias de usuario enriquecidas.
Mi pregunta de hoy podría cambiar la forma en que piensas sobre la flotación para siempre: "¿La ubicuidad de las pantallas táctiles hace que los eventos de la flotación queden obsoletos?" Dicho de otra manera, ¿mató el iPhone: flotar? Siga leyendo para ver cómo iOS maneja un evento de activación de CSS, lo que eso significa para usted como desarrollador y cómo debe o no debe usar eventos de activación en sus diseños.
Oda Para Hover
Me encanta CSS3. Ha hecho que el desarrollo de CSS puro sea mucho más robusto y divertido. Las características como transiciones y animaciones de fotogramas clave nos brindan el tipo de interacción fascinante que una vez tuvimos que recurrir a JavaScript para obtener.
Sin embargo, cuando estás hablando de eventos animados a través de CSS puro, tus opciones son bastante limitadas. Target nos da una forma de hacer algo mientras los usuarios tienen el mouse hacia abajo, pero la acción de mantener pulsado no es necesariamente intuitiva en la web. Hay otras formas de simular una interacción de clic, como quizás modding botones de radio en una presentación de diapositivas en toda regla, pero estas técnicas todavía son bastante raras.
Con los fotogramas clave, tenemos la capacidad de iniciar una animación tan pronto como se carga la página e incluso hacer un bucle infinito. Sin embargo, esto no siempre es deseable y puede venir con una velocidad de procesador decente para animaciones complejas.
Luego está el hover. Es una acción simple, fácil de implementar y fácil de entender que usted, como desarrollador, puede utilizar para hacer que la interacción con el usuario sea un poco mejor. Con las transiciones, puede desvanecerse de un color a otro, reducir o aumentar gradualmente el tamaño de un objeto e incluso enviarlo girando en el espacio 3D si así lo desea. Con Hover, tienes la forma ideal de iniciar todos estos efectos.
Me encantan los efectos de desplazamiento y he escrito varios artículos con ejemplos gratuitos de mis trucos favoritos.
Problemas en el paraiso
Hay un problema con los eventos de sobrevuelo como medio principal de interacción, o tal vez debería decir millones y millones de problemas en manos de personas de todo el planeta: los teléfonos inteligentes.
Durante décadas hemos tenido cursores en pantalla, un medio extraño pero ampliamente aceptado para interactuar con contenido digital. Los dispositivos de pantalla táctil, ya sea con el dedo o el lápiz dirigido, han existido durante casi tanto tiempo como el cursor, pero el nivel de saturación de la industria siempre fue bastante bajo y, admitámoslo, ninguno de ellos podría manejar el? Real? Web en cualquier lugar lo suficientemente bien como para incluso molestar.
Luego vino el iPhone. No fue el primer teléfono inteligente o el primer teléfono con pantalla táctil, pero definitivamente fue un dispositivo pionero en el mundo de una web móvil no diluida y táctil. Avancemos unos años y el mundo está lleno de dispositivos iOS y Android que acceden en gran parte a la web simple y sin adulteraciones.
La mayoría de nosotros estamos ahora tan familiarizados o más familiarizados con las interacciones web impulsadas por el tacto que con sus homólogos controlados por el cursor. El gran problema, por supuesto, es que los teléfonos actualmente no perciben su dedo. por encima de un elemento. Esto significa que la experiencia no se traduce directamente de un método de interacción a otro.
Esto suena como un pequeño problema, pero no lo descartes. Las interacciones táctiles son fundamentalmente diferentes del modelo tradicional y, en consecuencia, muchos de nuestros trucos favoritos, como los eventos de sobrevuelo, deben replantearse. No ellos?
¿Qué hace iOS con un Hover?
Obviamente, las pantallas táctiles presentan un problema con los eventos de desplazamiento. Una de las preguntas que me vinieron a la mente de inmediato fue si este es mi problema como desarrollador web o un obstáculo que los fabricantes de dispositivos se vieron obligados a enfrentar cuando desarrollaron por primera vez sus navegadores táctiles. Si hover es una forma fundamental en que interactuamos con la web, tal vez los poderes que se explican de alguna manera.
La mejor manera de averiguar qué sucede cuando lanza un evento flotante en una pantalla táctil es probarlo. Entonces codifiquemos un ejemplo súper rápido y sucio para probar y ver qué sucede. Básicamente, simplemente lancé un montón de imágenes a un div y las puse en rotación. Aquí está el CSS:
La prueba en vivo
Ahora que tenemos algo que probar, veamos en un dispositivo con pantalla táctil. Toma tu iPad o iPhone y toca aquí o en la imagen de arriba para iniciar la página de demostración.
Obviamente, nada ocurrirá mágicamente si pasas el dedo sobre una imagen, pero ¿qué sucede si tocas una imagen?
Resulta que el efecto de desplazamiento en realidad funciona bastante bien, simplemente se ha traducido a un evento de tap. En nuestras demostraciones, ninguna de las imágenes se rota de forma predeterminada, luego, al tocar una imagen, se produce la rotación animada.
Observaciones interesantes
Así que hemos establecido que los eventos de desplazamiento se traducen en eventos de toque en iOS, y por lo que puedo decir, se produce un efecto similar en Android (posiblemente con un toque doble ocasional). Es importante tener en cuenta, no solo que estos eventos ocurren, sino también cómo Ocurren y afectan diferentes circunstancias.
Para empezar, debe tener en cuenta el hecho de que una vez que ha tocado un elemento, la única forma de detener ese evento de desplazamiento es tocar el elemento anther que hace que ocurra un evento de desplazamiento.Por ejemplo, en esta demostración, al tocar el párrafo o el fondo no se detiene el evento de desplazamiento, solo el toque en otra imagen lo hace.
La revelación más significativa se produce cuando nos damos cuenta de que la mayoría de los eventos de desplazamiento se producen en elementos que también sirven como enlaces a otros elementos. Esto significa que tenemos un evento de desplazamiento y de clic en el mismo elemento.
Como sabemos, los dispositivos de pantalla táctil también convierten los eventos de clic en eventos de toque, así que, ¿qué sucede cuando combinamos dos eventos de escritorio diferentes que se traducen en el mismo evento de pantalla táctil? Como podemos ver en esta demostración, la animación comienza cuando toca el elemento, pero el evento de clic salta rápidamente y redirige la página, incluso si la animación no ha terminado.
Dado que los eventos de desplazamiento se utilizan a menudo para ayudar a informar al usuario de que se puede hacer clic en un elemento, este descubrimiento los hace en gran medida inútiles en ese sentido.
¿Deberías abandonar los eventos de hover?
La pregunta que está en el centro de esta discusión es si el pseudo selector de desplazamiento tiene o no un lugar en su CSS en un momento en el que tanta gente navega por la web con dispositivos de pantalla táctil. Entonces, ¿cuál es la respuesta?
En lo que a mí respecta, la respuesta es un rotundo? Sí? Aunque eso viene con varias estipulaciones. En primer lugar, es interesante observar que algunos proyectos funcionarán muy bien en muchos dispositivos con pantalla táctil a pesar de su dependencia en los eventos de desplazamiento. Un ejemplo es una galería de miniaturas animada de un artículo reciente de Design Shack, que funciona maravillosamente en mi iPad. Otro ejemplo podría ser un menú desplegable de navegación que aparece al pasar el mouse, muchos de los cuales funcionan bastante bien en dispositivos con pantalla táctil a pesar de la creencia común de que lo contrario es cierto.
A pesar de esto, todavía recomiendo absolutamente que no confíe en los eventos de desplazamiento como un método crítico de interacción en dispositivos móviles. Hacerlo es prepararte para muchos dolores de cabeza de los usuarios. Dado el rango de diferentes navegadores y dispositivos de pantalla táctil, no puede estar seguro sin un nivel ridículo de pruebas de que los eventos de desplazamiento se traducen de la misma manera en todos ellos.
En consecuencia, mi consejo es suponer siempre, independientemente de la verdad de la afirmación, que el modelo de interacción con el hover no funcionará para los usuarios de teléfonos inteligentes y tabletas. Sin embargo, esta suposición no le impide diseñar el selector de desplazamiento en todo su trabajo e incluso utilizar algunos efectos de desplazamiento de lujo de vez en cuando. Solo tenga en cuenta que el éxito del usuario no debe depender de esta acción, sino que se convierte en una situación de mejora progresiva en la que todos pueden usar su sitio en su nivel más básico y los usuarios de escritorio pueden disfrutar de algunas emociones visuales que los usuarios de la pantalla táctil pueden no tener nunca. ver.
Optimización a través de consulta de medios
Si desea ir más allá y diferenciar claramente las experiencias de los usuarios de su pantalla táctil y de escritorio, puede escribir algunos JavaScript simples, pero soy un gran fan del uso de CSS siempre que sea posible, por lo que mi mente gravita instantáneamente hacia una solución basada en consultas de medios.
Puede usar consultas de medios para asegurarse de que tanto los dispositivos móviles como los de escritorio tengan una experiencia optimizada. Por ejemplo, una lista de enlaces puede tener un área pequeña para hacer clic y un buen efecto de desplazamiento en una computadora de escritorio, mientras que tiene un área amplia para hacer clic y no tiene efecto de desplazamiento en un dispositivo móvil.
Pero digamos que queremos ir más allá y hacer que el sitio de la gran pantalla sea completamente dependiente de un evento de desplazamiento para que funcione correctamente. Esto es aceptable porque nuestra consulta de medios asegurará que los dispositivos móviles tengan un modelo diferente, ¿verdad? Talvez no.
Revisión del futuro
A lo largo de este artículo he contrastado constantemente los dispositivos de pantalla táctil con las computadoras de escritorio. El supuesto inherente aquí es que todos los dispositivos de pantalla táctil tienen pantallas pequeñas. Se me ocurre que, si bien esto es convenientemente correcto en más En la actualidad, es una suposición totalmente errónea que se rompe especialmente a largo plazo.
Personalmente creo que la interacción de la pantalla táctil solo será más popular en los próximos años. Una PC con pantalla táctil o una computadora portátil puede ser una rareza ahora, pero no estoy seguro de que sea una suposición segura de que esto será cierto a largo plazo. Esto significa que aunque el uso de una consulta de medios para detectar el tamaño de la pantalla pueda parecer una buena forma de diferenciar entre dispositivos con pantalla táctil y dispositivos con cursor en la actualidad, probablemente no sea la mejor práctica, ya que las pantallas de veinte pulgadas del mañana podrían usar la interacción táctil. Tanto o más que hacen los cursores.
Utilice Hover Wisely
¿Se ha extinguido la flotación? No ¿Se extinguirá pronto? Probablemente no. ¿Se está volviendo cada vez más peligroso confiar en los eventos de desplazamiento como un medio principal de interacción con el usuario? Absolutamente.
Seguiré usando los estilos de desplazamiento e incluso continuaré repartiendo tutoriales divertidos sobre el efecto de desplazamiento, pero definitivamente quiero dejar en claro que creo que los días en los que el sitio confía en el funcionamiento de la función sobre el desplazamiento han quedado atrás. A menos que el próximo iPhone detecte su dedo sobre la pantalla, las pantallas táctiles complican este modelo de interacción lo suficiente como para suponer que simplemente no funcionará en estos dispositivos (ya sean pequeños o grandes).
¿Qué piensas? ¿Eres cuidadoso acerca de cómo aplicar los estilos de desplazamiento en CSS? ¿Dónde traza la línea para usar el desplazamiento estacionario como un punto de interacción? ¿Crees que las pantallas táctiles continuarán aumentando en ubicuidad? Me encantaría escuchar tus pensamientos.