Consultas de puntero: hover none no significa móvil

Las cuatro consultas de puntero son la única forma que tienes de saber algo sobre cómo el usuario interactúa con tu interfaz, y también la fuente de una de las suposiciones más dañinas del desarrollo web: que hover: none equivale a móvil y hover: hover a escritorio. Esa equivalencia era aproximadamente cierta en 2014 y hoy falla en un portátil táctil, en un móvil con ratón, en una tableta con teclado y en cualquier Windows en modo tableta. Y cuando falla, lo que se rompe suele ser el acceso a una función, no la estética.

Las cuatro consultas

Hay dos ejes. Uno es qué se pregunta: si el dispositivo puede pasar por encima sin activar (hover) o cuál es la precisión del apuntado (pointer). El otro es sobre qué dispositivo: el primario, o cualquiera de los disponibles.

coarse significa un apuntado impreciso, típicamente un dedo, cuya área efectiva ronda los 40px. fine significa un apuntado preciso: ratón, trackpad, lápiz. none significa que no hay dispositivo de apuntado en absoluto: un mando de televisión con teclas direccionales, una interfaz manejada solo con teclado.

Las versiones any-* pueden devolver varios valores a la vez conceptualmente: en un portátil táctil, any-pointer: fine y any-pointer: coarse son las dos verdaderas, porque hay ratón y hay pantalla táctil.

Los cuatro dispositivos que rompen la equivalencia

El portátil con pantalla táctil. Su puntero principal es el trackpad, así que hover: hover y pointer: fine. Pero el usuario puede tocar la pantalla, y any-pointer: coarse también es cierto. Si has dimensionado los objetivos táctiles solo bajo pointer: coarse, este usuario obtiene botones de ratón que tiene que acertar con el dedo.

El móvil o la tableta con ratón o trackpad conectado. iPadOS y Android admiten ratón desde hace años, y buena parte del trabajo en tableta se hace con teclado y trackpad. En ese modo el dispositivo reporta hover: hover y pointer: fine, y una interfaz que asumió “pantalla pequeña, luego dedo” le da controles diminutos… o al revés, una que asumió “táctil, luego sin hover” le esconde acciones que sí podría descubrir.

Windows en modo tableta y los dispositivos convertibles. El mecanismo principal cambia durante la sesión, al girar la pantalla o desconectar el teclado. Las media queries reevalúan, así que tu CSS reacciona; el código JavaScript que leyó matchMedia una vez al cargar, no.

El lápiz. Un stylus es pointer: fine porque apunta con precisión, y en muchos dispositivos hover: none porque no hay estado de proximidad. Es la combinación que más suposiciones rompe, porque no encaja en ninguna de las dos categorías mentales habituales.

Cómo usarlas bien

Para agrandar objetivos táctiles, usa any-pointer: coarse. Es la consulta que atrapa también a los híbridos. La versión con pointer: coarse deja fuera al portátil táctil, que es exactamente el caso donde el usuario alterna.

.accion { min-block-size: 2rem; padding-inline: 0.5rem; }

@media (any-pointer: coarse) {
  .accion { min-block-size: 2.75rem; padding-inline: 0.875rem; }
}

Para efectos de pasar por encima, usa hover: hover. Aquí sí interesa el dispositivo principal, porque lo que quieres evitar es el “hover pegajoso” de las pantallas táctiles: al tocar un elemento con estado :hover, muchos navegadores lo dejan aplicado hasta que tocas otra cosa, y el resultado son tarjetas que se quedan iluminadas.

@media (hover: hover) {
  .tarjeta:hover { transform: translateY(-2px); }
  .tarjeta:hover .acciones { opacity: 1; }
}

Nunca escondas funcionalidad detrás de hover. Si las acciones solo se ven al pasar por encima en escritorio, tienen que estar visibles siempre en el resto, o accesibles con otro gesto. La forma robusta es hacer que el estado base sea el visible y que el ocultarlas sea la mejora:

.acciones { opacity: 1; }                 /* visibles por defecto: seguro */

@media (hover: hover) {
  .acciones { opacity: 0; transition: opacity 150ms; }
  .tarjeta:hover .acciones,
  .tarjeta:focus-within .acciones { opacity: 1; }   /* el teclado, tambien */
}

Ese :focus-within no es opcional: sin él, quien navega con teclado en un dispositivo con ratón no puede ver las acciones aunque pueda enfocarlas, lo que produce el peor de los casos posibles.

Lo que estas consultas no te dicen

No te dicen el tamaño de la pantalla. No te dicen el sistema operativo. No te dicen si es un teléfono. No te dicen si hay teclado. Y no te dicen qué dispositivo está usando el usuario ahora mismo: te dicen qué hay disponible, y en un híbrido puede estar alternando cada minuto.

Merece la pena mencionar una consulta emparentada y poco usada: update, con valores none, slow y fast, que indica con qué frecuencia puede el dispositivo repintar. update: slow es el caso de las pantallas de tinta electrónica, donde cualquier animación produce fantasmas y conviene desactivarla:

@media (update: slow) {
  * { animation: none !important; transition: none !important; }
}