Advertisement
  1. Web Design
  2. CSS

Mejores estilos de focus con la pseudoclase :focus-visible de CSS

by
Read Time:3 minsLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

En este consejo rápido, te voy a mostrar cómo crear mejores estilos de focus en los elementos de los formularios con una pseudoclase de CSS llamada :focus-visible. O, en términos simples, te enseñaré cómo deshacerte de ese contorno azul de manera adecuada:

form input outlineform input outlineform input outline

La pseudoclase :focus-visible de CSS

¡Mira el video, suscríbete al canal de Tuts+ en Youtube y continúa con la versión escrita de este consejo rápido!

Remover los estilos de focus de entrada (de manera incorrecta)

Cuando creas un formulario simple, el agente de usuario (navegador) aplicará sus propios estilos al estado de focus de los elementos del formulario (como las entradas de texto, las áreas de texto, etc.).

De hecho, se trata de una función importante de accesibilidad, pues permite a los usuarios cuya experiencia en la página se ve afectada de alguna forma, navegar y utilizar el formulario correctamente. Cuando un elemento está enfocado, los eventos de teclado se aplicarán a ese elemento.

El tono de azul muy claro (#2360c5) que los navegadores suelen usar por defecto es un color efectivo y funcional en términos de accesibilidad, pero existe la posibilidad de que no funcione bien con el resto de tu diseño.

Para remover este contorno azul por completo, podríamos utilizar el siguiente CSS para dirigirnos a todos los estados de focus:

Eso resuelve el problema desde un ángulo estilístico, pero al hacerlo, eliminarás la indicación de accesibilidad que le informa visualmente a los usuarios qué elemento tiene el foco. En otras palabras, no es una buena idea.

Cambiar los estilos de focus de entrada (de manera correcta)

Veamos la pseudoclase :focus-visible. Se aplica cuando un elemento coincide con la pseudoclase :focus (en otras palabras: un elemento está en foco).

Incluso va más allá, permitiéndonos diferenciar la modalidad de entrada (por ejemplo, si el usuario está enfocando un elemento con el teclado o el ratón). Voy a demostrar cómo se pueden eliminar los estilos de focus para los usuarios del ratón, pero manteniendo los estilos de focus para los usuarios que naveguen por los elementos del formulario con el teclado.

Nota: Este no es necesariamente un ejemplo perfecto de accesibilidad, pero sirve para el propósito de demostrar las capacidades de :focus-visible.

Aplica un estilo predeterminado de contorno

Comencemos por determinar cómo aparecerán nuestros contornos de focus por defecto. Le daremos a los elementos enfocados un contorno rojo sólido:

Esto es lo que se obtiene. Es importante observar que las entradas y el botón obtienen un contorno rojo cuando están enfocados, con el teclado y con el ratón:

De manera predeterminada, un navegador no dará a los botones un estilo de focus visible al hacer clic en ellos con el mouse. Se da por hecho que el usuario está ejecutando un evento al hacer clic deliberadamente y no necesita ver el foco. Sin embargo, agregará un estilo de focus cuando se navegue al botón mediante el teclado.

Elimina los estilos de focus para la combinación de botón y mouse

Vamos a emular este comportamiento eliminando los estilos de focus del botón cuando se hace clic en él con el ratón.

Podemos hacer esto seleccionando cualquier elemento que esté en foco, pero que no (not()) sea considerado :focus-visible por el navegador. Así:

Añade estilos mejorados para los navegadores compatibles

Como última mejora, podemos añadir un contorno morado para cualquier elemento que tenga focus y que sea considerado :focus-visible por el navegador:

Aquí está la demostración resultante:

Conclusión

¡Eso concluye cómo utilizar la pseudoclase :focus-visible! Ahora sabes cómo crear formularios elegantes y accesibles. Para obtener más detalles sobre cómo los navegadores determinan qué elementos deben y no deben calificar como :focus-visible, mira el video en la parte superior de la página.

Recursos útiles

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.