Cursores y punteros

En los dispositivos que no tienen pantalla táctil, el cursor es una forma esencial para que los usuarios sepan con qué están interactuando. También puedes proporcionar sugerencias útiles sobre cómo se puede interactuar con un elemento o cómo un movimiento con un panel táctil o un mouse afectará tu sitio.

Cursores

Los navegadores controlan automáticamente algunos casos de uso comunes para los cursores.

Si estás leyendo esto en un dispositivo con cursor, explora la página. Es posible que no hayas notado cómo cambian los cursores antes, pero ten en cuenta las sugerencias que proporcionan. Cuando el puntero se desplaza sobre el texto, el cursor cambia a una barra en forma de I de selección que sugiere que puedes seleccionar el texto. Si colocas el cursor sobre un vínculo, este cambia a una mano que apunta con el dedo índice, lo que sugiere que puedes realizar una acción. En todos los demás lugares, se mostrará un cursor predeterminado, que suele ser una flecha.

A medida que crees sitios más interactivos, querrás personalizar el cursor para que los usuarios puedan comprender mejor las interacciones.

Los navegadores admiten una variedad de palabras clave para la propiedad cursor que proporcionan sugerencias para arrastrar, cambiar el tamaño, seleccionar y mucho más.

Si ninguno de los cursores admitidos comunica las interacciones de un elemento, también puedes proporcionar una imagen SVG o PNG para usarla como cursor.

Signos de intercalación

Se usa un signo de intercalación para mostrar tu posición en el texto editable. Es diferente del cursor, ya que no sigue el mouse. Puedes cambiar el color con caret-color.

Cómo responder a las entradas del puntero de un usuario

Los usuarios que tienen un mouse o un panel táctil pueden interactuar con un punto más preciso en la pantalla que los usuarios que tienen una pantalla táctil. Si diseñas solo para la precisión de un mouse, es posible que los usuarios con pantallas táctiles o problemas de control motriz fino no puedan interactuar con tu página como lo necesitan.

Entre los problemas habituales, se incluyen los botones demasiado pequeños o los elementos interactivos demasiado cerca entre sí. Esto dificulta que los usuarios interactúen con el elemento correcto.

Asegurarte de que los botones y otros objetivos interactivos sean lo suficientemente grandes es un paso importante para garantizar que tu sitio sea accesible. También puedes personalizar tus diseños según la precisión de los dispositivos de entrada del usuario con las consultas de medios pointer y any-pointer.

La función de medios pointer hace referencia al dispositivo de entrada principal del usuario, mientras que any-pointer hace referencia a todos los dispositivos de entrada. Puedes hacer coincidir dispositivos como mouses con fine y dispositivos como pantallas táctiles con coarse. El valor none indica que el usuario no está usando un dispositivo de entrada con un puntero.

Eventos táctiles y del puntero

Cómo inhabilitar gestos específicos de la pantalla táctil

Cuando usas una pantalla táctil, el navegador controla algunos gestos comunes. Por ejemplo, tocar la pantalla con dos dedos y separarlos suele acercar el sitio. Si bien no es necesario que implementes esos comportamientos en tu sitio, es posible que desees inhabilitar o anular ese comportamiento en ciertos casos.

Para inhabilitar el navegador para que no controle algunas acciones, enumera las acciones que quieres que controle el elemento. pan-x y pan-y habilitan los gestos de desplazamiento con un dedo. Se pueden habilitar junto con pinch-zoom, que permite acercar y desplazar la imagen con varios dedos.

La palabra clave manipulation es equivalente a pan-x pan-y pinch-zoom. manipulation excluye otros comportamientos táctiles que requieren varios toques en un corto período, como presionar dos veces para hacer zoom.

Después de inhabilitar el control del navegador de una acción excluyéndola de touch-action, puedes configurar eventos de puntero para esa acción.

Cómo inhabilitar todos los eventos y las acciones

En algunos casos, es posible que desees especificar que un elemento no es interactivo. Por ejemplo, si configuras pointer-events: none en un botón, no podrás hacer clic en él ni siquiera activar un estado de desplazamiento.

Verifica tus conocimientos