CSS moderno: clamp(), aspect-ratio, :has() y más — CSS moderno, accesibilidad y arquitectura

Funciones matemáticas: clamp(), min(), max()

El CSS moderno trae herramientas que antes pedían malabares (o JavaScript). Empezamos por las que más vas a usar.

clamp(min, ideal, max) produce un valor fluido que crece con la pantalla pero nunca baja del mínimo ni supera el máximo. Piensa en un guardia con dos límites. Es la forma moderna de hacer tipografía y espaciados responsive sin llenarlo todo de media queries:

h1 {
  /* nunca menos de 1.5rem, ni más de 3rem; crece con el ancho del viewport */
  font-size: clamp(1.5rem, 4vw, 3rem);
}

min(a, b) toma el menor de los valores: width: min(90vw, 600px).
max(a, b) toma el mayor: padding: max(16px, 5vw).

Proporciones con aspect-ratio

aspect-ratio fija la relación ancho/alto de una caja sin trucos de padding:

.video {
  width: 100%;
  aspect-ratio: 16 / 9; /* la altura se calcula sola */
}

El selector :has() — el "padre" que faltaba

Durante años pediste a gritos un "selector padre" y la respuesta era siempre la misma: no existe. Pues ya existe, y se llama :has().

:has() selecciona un elemento según su contenido o sus hermanos. Es el primer selector que mira "hacia abajo", algo que parecía imposible:

/* una tarjeta que contiene una imagen recibe otro layout */
.tarjeta:has(img) {
  display: grid;
  grid-template-columns: auto 1fr;
}

/* un label cuyo input es inválido se pinta de rojo */
label:has(+ input:invalid) {
  color: #b91c1c;
}

Container queries: responsive por contenedor

Las media queries miran el viewport; las container queries (@container) reaccionan al tamaño del contenedor padre. Así un mismo componente se adapta esté donde esté:

.panel { container-type: inline-size; }

@container (min-width: 400px) {
  .tarjeta { flex-direction: row; }
}

Nesting nativo

CSS ya permite anidar reglas como en Sass, sin compilar:

.menu {
  background: #fff;

  & a {
    color: var(--color-primario);

    &:hover { text-decoration: underline; }
  }
}

El & representa el selector padre. El nesting acerca el estilo a la estructura del componente y reduce la repetición. Eso sí: no te flipes anidando seis niveles, o volverás a crear el lío que veníamos a evitar.