Marc Semper Lloret
← CSS: diseño, maquetación y responsive

Sesión 14 · Semana 5

Estados, pseudo-clases y foco visible

Hoy · Hoja de ruta

  1. 1. Aprende: Que una interfaz tiene más de un estado, y por qué el del foco no es opcional.
  2. 2. Haz: Recorre tu sitio solo con el teclado y arregla lo que no se vea.
  3. 3. Comprueba: Sabes en todo momento dónde está el foco.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Por qué se usan juntos max-width: 100% y height: auto?
  2. ¿Qué diferencia hay entre cover y contain?
  3. Predice cómo ayuda aspect-ratio en un catálogo con imágenes irregulares.

Los estados de un enlace

a              { color: var(--color-primary); }
a:visited      { color: #6d28d9; }
a:hover        { text-decoration: underline; }
a:focus-visible{ outline: 3px solid currentColor; outline-offset: 3px; }
a:active       { color: #b91c1c; }

En formularios, los campos preparados en la UD1 proporcionan ya sus propios selectores:

input:focus     { }
input:required  { }
input:invalid   { }
input:disabled  { }
input:checked   { }

:invalid merece una advertencia: se aplica desde que carga la página, así que un campo obligatorio y vacío aparece en rojo antes de que nadie haya escrito nada. Combínalo con :user-invalid, que solo actúa después de que la persona haya interactuado, o marca el error de otra forma.

El foco no se quita

Nunca outline: none a secas

El contorno del foco resulta visualmente poco atractivo y constituye la única indicación de posición para quien navega con teclado. Su supresión deja la web inutilizable para esas personas: al pulsar Tab no se produce ningún cambio perceptible.

Si no te gusta el contorno por defecto, sustitúyelo por otro igual de claro: un contorno propio, un cambio de fondo, un borde. Lo que no vale es dejarlo sin ninguna indicación.

:focus-visible es la herramienta que resuelve la tensión real:

:focus-visible

Se aplica cuando el navegador entiende que la indicación de foco hace falta: al llegar con el teclado, sí; al hacer clic con el ratón en un botón, normalmente no.

Así se puede tener un foco de teclado bien visible sin que aparezca un recuadro cada vez que alguien pulsa con el ratón, que era la razón por la que la gente lo quitaba.

:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

outline tiene una ventaja sobre border para esto: no ocupa espacio en el layout, así que nada se mueve al recibir el foco. Y outline-offset lo separa del elemento para que se lea mejor.

Selectores modernos

:is(h1, h2, h3) { line-height: 1.15; }

:is() agrupa como la coma, pero funciona dentro de un selector largo, donde la coma obligaría a repetirlo todo:

/* Sin :is() */
main h1, main h2, main h3 { }

/* Con :is() */
main :is(h1, h2, h3) { }

:where() hace lo mismo con especificidad cero, lo cual es muy útil para estilos base que quieras poder sobrescribir sin pelearte:

:where(h1, h2, h3) { margin-block: 0; }   /* cualquier clase lo sobrescribe */

Y :has() selecciona un elemento por lo que contiene, algo que CSS no pudo hacer durante veinte años:

.campo:has(input:invalid) {
    border-color: #b91c1c;
}

Ahí estás dando estilo al contenedor a partir del estado de su hijo. No hace falta que lo domines: basta con que sepas que los selectores también han evolucionado y que muchos problemas que antes pedían JavaScript ya no lo piden.

Tarea 14 · Los estados invisibles

Suelta el ratón. Recorre tus cuatro páginas con Tab, Shift + Tab y Enter.

Elemento ¿Se ve el foco? ¿Se distingue del estado normal? Corrección
Enlaces de navegación
Enlaces del contenido
Botones
Campos del formulario
Casillas y radios

Después:

  1. Define un :focus-visible propio y coherente para todo el sitio.
  2. Comprueba que los enlaces del texto se distinguen del resto sin depender solo del color: alguien daltónico necesita el subrayado.
  3. Da estilo a :hover en enlaces y tarjetas.
  4. Añade un estado visible a los campos obligatorios usando :required.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Por qué no procede escribir outline: none sin una alternativa que lo sustituya?
  2. ¿Qué hace :focus-visible que no hace :focus?
  3. ¿Para qué sirve :where()?
Ver respuestas

1 · Porque deja sin ninguna indicación a quien navega con teclado. Si se quita, hay que poner otra igual de clara.

2 · Solo aplica el estilo cuando la indicación hace falta, típicamente al llegar con el teclado y no al pulsar con el ratón.

3 · Para agrupar selectores con especificidad cero, de modo que los estilos base se puedan sobrescribir sin pelear con la cascada.