: foco visible - Trucos CSS | Almanaque CSS 2024

La :focus-visiblepseudoclase (también conocida como la pseudoclase "Indicada por enfoque") es una forma nativa de CSS para diseñar elementos que:

Están enfocados
Necesita un indicador visible para mostrar el enfoque (más sobre esto más adelante)

:focus-visiblese usa de manera similar a :focus: para llamar la atención sobre el elemento que actualmente tiene el foco.

.element:focus-visible ( background-color: pink; /* Something to get the user's attention */ )

:focus-visiblees parte del borrador de trabajo de CSS4 Selectors. Antes de la adopción, Mozilla introdujo la :-moz-focusringpseudoclase para llevar la funcionalidad a Firefox antes que una especificación formal.

¿Por qué necesitamos: foco visible?

¿No :focushace esto ya? Sí, pero hay problemas. La ilustración más clara es un botón que activa algo de JavaScript. Imagina un carrusel de imágenes con botones para intercambiar imágenes. Digamos que ha agregado tabindexa los botones para que puedan seleccionarse con un teclado, pero cuando va a probar el carrusel con su mouse, verá este contorno alrededor de su magnífico botón:

Esquema agregado por el navegador en `:focus`

No es que quiera hacer esto (por cuestiones de accesibilidad), pero ¿cómo deshacerse de él? Estableciendo la :focuspseudoclase:

.next-image-button:focus ( outline: none; )

Ahora, su botón se ve muy bien cuando está enfocado, pero ¿qué sucede cuando un usuario toca su botón sin un mouse sino un teclado? ¡No pueden ver dónde han marcado! Eso es un problema porque ahora no hay forma de saber qué botón está enfocado para las acciones del teclado:

Uno de ellos está enfocado, ¡pero no puedes verlo!

¿Hay alguna manera de eliminar el contorno de enfoque azul pero aún mostrar un enfoque que esté más en línea con el diseño del sitio? Claro, puedes tener tu pastel y comértelo también, ¡gracias a :focus-visible!

:focus-visiblesolo se aplica cuando realmente desea un indicador visual para ayudar al usuario a ver dónde está el enfoque. En otras palabras, no puede ocultar el contorno como :focuspuede hacerlo . (Bueno, podría combinarlo con el diseño, pero lo que sea). Los dos deben usarse juntos en ese sentido. Agreguemos uno a nuestro botón:

.next-image-button:focus ( outline: none; ) .next-image-button:focus-visible ( outline: 3px solid blanchedalmond; /* That'll show 'em */ )

Ahora, cuando se utiliza el teclado para desplazarse al botón, habrá una indicación visual del enfoque:

`:focus-visible` hace visible el enfoque!

¿Cómo determinan los navegadores cuando algo es: foco visible?

Los navegadores tienen un poco de margen para determinar cuándo se debe aplicar este pseudo-selector a un elemento dado utilizando sus propias heurísticas. Primero, veamos el borrador de trabajo de CSS4 y luego intentaremos desglosarlo. De las especificaciones:

Si un usuario ha expresado una preferencia (por ejemplo, a través de una preferencia del sistema o una configuración del navegador) para ver siempre un indicador de enfoque visible, el agente de usuario debe respetar esto haciendo que: focus-visible siempre coincida con el elemento activo, independientemente de cualquier otro factores. (Otra opción puede ser que el agente de usuario muestre su propio indicador de enfoque independientemente de los estilos de autor).

Cualquier elemento que admita entrada de teclado (como un elemento de entrada o cualquier otro elemento que pueda activar un teclado virtual para que se muestre en foco si no hay un teclado físico) siempre debe coincidir: foco-visible cuando está enfocado.

Si el usuario interactúa con la página a través del teclado, el elemento actualmente enfocado debería coincidir: foco-visible (es decir, el uso del teclado puede cambiar si esta pseudoclase coincide incluso si no afecta: foco).

Si el usuario interactúa con la página a través de un dispositivo señalador, de modo que el foco se mueve a un nuevo elemento que no admite la entrada del usuario, el elemento recién enfocado no debe coincidir: foco visible.

Si el elemento activo coincide: foco-visible y un script hace que el foco se mueva a otra parte, el elemento recién enfocado debería coincidir: foco-visible.

Por el contrario, si el elemento activo no coincide: focus-visible y un script hace que el foco se mueva a otra parte, el elemento recién enfocado no debería coincidir: focus-visible.

Si eso es un poco abstracto, aquí hay una interpretación:

Situación	¿Se aplica: focus-visible?
El usuario dice que siempre quiere que el enfoque sea visible a través de una configuración	sí
Un elemento necesita un teclado para funcionar (como texto)	sí
El usuario está navegando con un teclado.	sí
El usuario está navegando con un dispositivo señalador (como un mouse o un dedo en una pantalla táctil)	No
Un script hace que el foco se mueva de un `:focus-visible`elemento a otro elemento	sí
Un script hace que el foco se mueva de un no `:focus-visible`elemento a otro elemento	No

Vale la pena repetirlo: estas son pautas, y los navegadores podrán tomar su propia determinación sobre qué se selecciona :focus-visible. Podemos esperar que el caso obvio de la navegación por teclado se maneje de una manera predecible, pero los navegadores tienen la capacidad de tomar la determinación ellos mismos, como cualquier otra característica.

Soporte de navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.