Imágenes, estados y movimiento

Tres horas. Media hora para entender cómo encaja una imagen en un hueco que no es el suyo y por qué el estado de foco no es opcional, y dos horas y media dejando el catálogo coherente y el sitio recorrible sin ratón.

Se explica

25 minutos · conceptos y demostración

Tres asuntos que parecen menores y no lo son: una imagen que no encaja rompe el layout entero, un foco invisible deja la web inservible para quien no usa ratón, y un movimiento sin motivo estorba. Los tres se resuelven con decisiones, no con recetas.

La regla que va en toda hoja de estilos

Una imagen tiene un tamaño propio, y si es más ancha que su contenedor, se sale. Es la causa número uno de scroll horizontal.

img {
    max-width: 100%;
    height: auto;
}

max-width: 100% impide que sobrepase a su contenedor. height: auto es imprescindible junto a la anterior: sin ella, si el HTML declaraba width y height —como pedíamos en la UD1—, al reducirse el ancho la altura se quedaría fija y la imagen se deformaría.

Encajar una imagen en un hueco que no es el suyo

El problema real de un catálogo: las fotos de producto vienen con tamaños y proporciones distintas, y las tarjetas quedan desiguales. La tentación es forzarlas, y eso las estira:

/* Mal: deforma */
.card img { width: 100%; height: 15rem; }

La solución es decirle cómo debe encajar en el hueco que le das:

.card img {
    width: 100%;
    height: 15rem;
    object-fit: cover;
}

object-fit

Cómo se acomoda el contenido de una imagen dentro de la caja que se le ha dado. cover la escala hasta llenarla y recorta lo que sobra, conservando la proporción. contain la encaja entera y deja huecos.

Si el recorte de cover elimina la parte relevante, object-position determina qué zona se conserva:

.card img { object-fit: cover; object-position: top; }

Mejor todavía que fijar una altura en rem es declarar una proporción, porque entonces la altura se calcula sola a partir del ancho y la tarjeta funciona igual en una columna estrecha que en una ancha:

.card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

Una interfaz tiene más de un estado

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.

: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.

Transiciones y transformaciones

Una transición suaviza el paso de un estado a otro. Se declara en el estado normal, no en el :hover, para que funcione en los dos sentidos:

.card {
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgb(0 0 0 / 0.12);
}

transform    qué propiedad se anima
150ms        cuánto dura
ease         cómo acelera

transform: translateY(-2px);
transform: scale(1.03);
transform: rotate(2deg);
transform: translateY(-2px) scale(1.02);   /* se combinan en una sola declaración */

Una transformación no afecta al espacio que ocupa el elemento: se dibuja movido, pero su hueco sigue donde estaba y nada se descoloca alrededor. Por eso mover una tarjeta con transform es seguro y hacerlo con margin-top no.

El movimiento tiene que decir algo

Una interfaz no mejora por tener zooms, rebotes, sombras y degradados. Cada efecto debería responder a una pregunta: ¿qué le está comunicando esto a quien lo ve?

Hay además quien configura su sistema para reducir las animaciones, y no por gusto: el movimiento puede provocar mareo o desorientación. El sistema operativo lo comunica, y CSS puede leerlo.

prefers-reduced-motion

Una media query que no pregunta por el tamaño de la pantalla sino por una preferencia declarada por quien usa el dispositivo. Existen más de esta familia, como prefers-color-scheme.

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

Es uno de los poquísimos sitios donde !important está justificado: es una preferencia de la persona, y debe ganar a cualquier estilo del sitio.

Se trabaja

150 minutos · práctica sobre tu propio proyecto

Los dos primeros pasos arreglan lo que está roto: las imágenes y el foco. Los cuatro últimos añaden movimiento, y después quitan el que sobra.

Paso 1 · El catálogo irregular · 35 min

Reúne al menos seis imágenes deliberadamente dispares: alguna vertical, alguna horizontal, alguna muy grande, alguna pequeña. Puedes usar fotos reales de tu tema.

Consigue que el catálogo se vea coherente sin editar los archivos:

1. Todas las tarjetas con la misma altura de imagen.
2. Ninguna imagen deformada.
3. Nada se sale a 320 px.
4. Comprueba las verticales: si cover les corta la cabeza a las fotos, ajústalo con object-position.
5. Explica en un comentario por qué has elegido cover o contain.

Antes de continuar: las seis tarjetas tienen la misma altura de imagen y ninguna foto está estirada ni aplastada.

Paso 2 · Los estados invisibles · 35 min

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

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.

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

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

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

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

Paso 3 · Transiciones con una finalidad · 25 min

1. Añade una transición a tus botones y otra a tus tarjetas o enlaces.
2. Nombra las propiedades: nada de all.
3. Asegúrate de que los estados de :hover y :focus-visible son claros y distintos entre sí.
4. Por cada transición que escribas, anota en un comentario qué comunica. Si no sabes qué escribir, esa transición sobra.

Paso 4 · Respetar la preferencia de movimiento · 10 min

Añade el bloque de prefers-reduced-motion al final de tu hoja y compruébalo de verdad, activando la reducción de movimiento en la configuración de tu sistema o desde DevTools, en el panel de Rendering.

Anota qué cambia en tu sitio al activarla. Si no cambia nada, o el bloque no está bien escrito, o tus transiciones no estaban donde creías.

Paso 5 · Menos es más · 25 min

Ahora la parte determinante: recorre tu sitio y elimina cualquier efecto que no comunique nada.

Es la única tarea de la unidad en la que se puntúa quitar cosas. Cuenta cuántos efectos tenías y cuántos quedan.

Paso 6 · Revisión cruzada sin ratón · 20 min

Intercambia el sitio con un compañero y recorre el suyo usando solo el teclado, sin tocar el ratón en ningún momento.

1. Anota el primer punto en el que pierdes de vista el foco.
2. Anota cualquier elemento al que no consigas llegar.
3. Comprueba si algún estado se distingue únicamente por el color, entrando en DevTools y forzando una simulación de daltonismo desde el panel de Rendering.
4. Devuelve las tres respuestas con el formato qué / por qué importa / qué probaría.

El autor decide qué acepta. Si rechaza algo, tiene que justificarlo con lo que hace la interfaz, no con lo que le parece más bonito.

Ampliación si has completado el trabajo

Primero termina y comprueba los seis pasos. Los dos retos se resuelven decidiendo, y uno de ellos consiste casi entero en borrar.

Reto 1 · Las imágenes imposibles

Un cliente entrega estas cinco imágenes para un catálogo de tarjetas iguales:

A · panorámica de 3000 × 600 px    (una estantería entera de la tienda)
B · vertical de 800 × 2400 px      (una torre de ordenador de cuerpo entero)
C · cuadrada de 500 × 500 px       (un ratón sobre fondo blanco)
D · diminuta de 120 × 90 px        (un logotipo de fabricante)
E · foto de 4000 × 3000 px         (un teclado, con la marca en la esquina inferior)

Consigue un catálogo coherente. Para cada una, decide y justifica:

1. cover o contain, y por qué.
2. Qué object-position necesita, si necesita alguno. La E tiene la información en una esquina: piensa qué pasa al recortarla en un formato apaisado.
3. La D es más pequeña que el hueco. Explica qué ocurre al ampliarla y qué harías en un encargo real, que no siempre es una decisión de CSS.
4. La B, recortada a 16 / 9, deja de mostrar el producto. Propón una solución que no sea deformarla ni recortarla.
5. Escribe una sola regla de CSS que resuelva bien cuatro de las cinco, y di cuál se queda fuera y por qué.

Reto 2 · Auditoría de movimiento en una interfaz ajena

Elige una web con bastante animación: una tienda grande, una web de producto, una landing.

Localiza al menos seis. Después:

1. Cuenta cuántos son informativos y cuántos decorativos.
2. Activa la reducción de movimiento en DevTools y recarga. ¿Respeta la web la preferencia, o se mueve igual? Es la comprobación interesante del reto.
3. Recorre la página con Tab. ¿Se ve el foco? ¿Alguna animación lo persigue o lo oculta?
4. Escribe en tres líneas qué le quitarías a esa interfaz y qué ganaría con ello.

Cierre

5 minutos · comprobación y recuerdo