Flotación larga

El otro día tuve un momento CSS muy vergonzoso.

Estaba trabajando en el código de interfaz de un diseño que tenía una barra lateral estrecha de íconos. No hay suficiente espacio allí para mostrar el texto de los íconos, por lo que la idea es que usaremos texto accesible (pero visualmente oculto, de forma predeterminada) que ya está allí como información sobre herramientas al pasar el mouse por un momento prolongado. Es decir, un dispositivo con un cursor y el cursor flotando sobre el elemento durante un rato, como tres segundos.

Entonces mi mente se puso así…

1. Puedo usar estado : la información sobre herramientas es visible o no visible . Administraré el estado, que se manifestará en el DOM como un nombre de clase en un elemento HTML.
2. Luego me ocuparé de la lógica para cambiar ese estado.
3. El estado predeterminado no será visible , pero si el mouse está dentro del elemento durante más de tres segundos, cambiará el estado a visible .
4. Si el mouse alguna vez abandona el elemento, el estado permanecerá (o se volverá) no visible .

Este era un proyecto de React, por lo que el estado estaba en la mente. Eso terminó así:

No está tan mal, ¿verdad? Eh. Tener el estado administrado en JavaScript potencialmente abre algunas puertas, pero en este caso, fue una exageración total. Aparte del hecho de que lo encuentro mouseenterun mouseleavepoco quisquilloso, CSS podría haberlo hecho todo y con menos código.

Esa es la parte vergonzosa… ¿por qué debería alcanzar la cadena de una biblioteca de JavaScript para hacer esto cuando el CSS que ya estoy escribiendo puede manejarlo?

Dejaré la interfaz de usuario en React, pero eliminaré todo el material de administración del estado . Todo lo que haré es agregar un transition-delay: 3scuando .iconsea :hoverpara que sea cero segundos cuando no esté suspendido, luego desaparezca inmediatamente cuando el cursor del mouse se vaya).

Un desplazamiento largo es básicamente una frase en CSS:

.thing {  transition: 0.2s;}.thing:hover {  transition-delay: 3s; /* delay hover animation only ON, not OFF */}

Funciona genial.

Un problema que no se aborda aquí es el problema de la pantalla táctil. Se podría argumentar que los lectores de pantalla están bien con el texto accesible y los navegadores de escritorio están bien debido a la información sobre herramientas personalizadas, pero es posible que los usuarios con pantallas sólo táctiles no puedan descubrir las etiquetas de los iconos. En mi caso, estaba construyendo un escenario de pantalla grande que asume cursores, pero no creo que todo esté perdido para las pantallas táctiles. Si el elemento es un enlace, :hoveres posible que se active con el primer toque de todos los modos. Si el enlace te lleva a algún lugar con un título claro, podría ser suficiente contexto. Y siempre puedes volver a más JavaScript y manejar eventos táctiles.