CSS Moderno 2026 sibling-index(), infinity y Container Stuck Queries sin Rodeos

¡Hola Devs! El CSS de 2026 no es el de 2024 👋

Cada seis meses el CSS suelta algo que hace dos años resolvíamos con una librería entera de JavaScript. Y el paquete actual no decepciona: Firefox 154 acaba de habilitar sibling-index(), la keyword infinity maduró dentro de calc(), y las container scroll-state queries por fin llegaron a Chromium.

Si trabajas front-end en LATAM, ya sabes que siempre chequeamos el soporte de Safari antes de adoptar cualquier cosa. Así que vamos a ver qué se puede usar hoy y qué todavía es experimento.

Y si también sigues el mundo React, checa nuestro resumen del React Conf 2025 sobre el Compiler y React 19.2 — combina bien con esta lectura.

Antes de copiar y pegar: revisa caniuse. En 2026 el estado Baseline cambia demasiado rápido.

Feature 1: sibling-index() para Animaciones

sibling-index() devuelve la posición del elemento entre sus hermanos (empezando en 1). Combinado con sibling-count() y calc(), haces animación escalonada sin tocar JavaScript.

/* Escalonar cards sin JS */
.card {
  /* Cada card recibe un delay proporcional a su posición */
  animation-delay: calc((sibling-index() - 1) * 120ms);
  animation: fadeUp 400ms ease-out both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

Firefox 154 lo libera el 18/08/2026, pasando a Baseline: Newly Available. La demo que se viralizó en la comunidad es un bracket de eliminatorias hecho solo con CSS — sin SVG, sin máquina de estados en JS.

/* Alterna dirección según par/impar */
.bracket-node {
  --dir: calc(mod(sibling-index(), 2));
  translate: calc(var(--dir) * 24px) 0;
}

El patrón a internalizar: la posición ahora es un valor CSS de primera clase. Si todavía escribes Array.from(nodes).forEach((el, i) => el.style.setProperty('--i', i)) en 2026, puedes borrar ese shim. 😎

Feature 2: La Keyword infinity en calc()

calc() ahora acepta infinity y -infinity como valores numéricos de primera clase. A primera vista parece un truco — hasta que ves que elimina varios hacks de edge cases.

El uso más elegante es con corner-shape:

/* Estos dos son equivalentes */
corner-shape: square;
corner-shape: superellipse(infinity);

/* Y estos dos también */
corner-shape: notch;
corner-shape: superellipse(-infinity);

O sea: infinity te deja expresar "redondeado hasta el límite teórico" — que visualmente significa nada redondeado. Perfecto para design systems que quieren un solo token --radius que va de suave a filoso sin lógica condicional.

Otros usos prácticos:

• Clamp sin número mágico tipo 9999px cuando quieres "sin límite superior".
• Escalas tipográficas responsivas con upper bound intencionalmente infinito.
• Restricciones estilo min-content dentro de cadenas de calc().

Es el tipo de primitivo que parece académico hasta que lo necesitas — y ahí se vuelve la única respuesta limpia.

Feature 3: Container Scroll-State Queries (stuck:)

Las scroll-state queries dejan que un hijo reaccione a su propio estado de scroll — incluyendo si está stuck en un límite de position: sticky.

.sticky-header {
  container-type: scroll-state;
}

@container scroll-state(stuck: top) {
  .sticky-header .title {
    font-size: 0.875rem;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
  }
}

Esto reemplaza el clásico IntersectionObserver + toggle de clase que todo design system reimplementó al menos tres veces. Sin observer, sin listener de scroll, sin layout thrash.

Realidad del soporte: solo Chromium por ahora. Safari y Firefox todavía no. Ponlo detrás de @supports (container-type: scroll-state) y trata el fallback como experiencia base.

Feature 4: ¿Lazy Loading Debería Ser el Default?

Debate recurrente en la comunidad: loading="lazy" es opt-in, pero es el default equivocado para la mayoría de las páginas. El argumento de Lea Verou es que necesitamos una forma de darle la vuelta al default a nivel de stylesheet:

/* Hipotético — aún no shippeado */
img, video { loading: lazy; }

…con override por elemento vía loading="eager". Eso requeriría una propiedad CSS que mapee a un atributo HTML — justo lo que la vieja propuesta de CAS (Cascading Attribute Sheets) intentaba resolver. No va a shippear ahora, pero es la conversación correcta.

Comparativa: Qué Adoptar Ya vs. Después

Sobre el Roadmap de 14 Años de Chrome

El roadmap público de Chrome ahora llega hasta Chrome 499 — unos 14 años de milestones agendados. No es bug: es señal deliberada de estabilidad a largo plazo. Para quienes mantienen design systems, esto significa que la superficie de spec que apuntas hoy va a seguir siendo relevante en 2040.

Si te interesa cómo las librerías longevas evolucionan bajo esa presión, checa nuestro análisis de la filosofía de diseño de TRL v1.0.

Limitaciones y Cuidados

• Baseline ≠ seguro. "Newly Available" significa que la versión más nueva de cada engine soporta. Usuario en Safari del año pasado no ve tu animación con sibling-index() — ve elemento estático. Diseña primero el estado sin animación.
• infinity no reemplaza design tokens. Usarlo para expresar "sin redondeo" es elegante, pero no lo dejes filtrarse al sistema de tokens como valor semántico. Mantén --radius-sharp: 0 y mapea a superellipse(infinity) solo dentro del componente que lo necesita.
• Scroll-state queries son solo Chromium. No construyas UX crítica encima. Header que encoge solo en Chrome es progressive enhancement, no feature.
• El debate del lazy loading es problema de spec, no de framework. Ninguna config de Next.js lo resuelve. Si te importa, sigue las discusiones del CSSWG.

Próximos Pasos

1. Audita tu código de animación buscando el patrón --i. La mayoría se convierte en sibling-index() — ganancia de una línea.
2. Prototipa un componente corner-shape con un token --radius que vaya de suave a filoso. Es la forma más rápida de internalizar infinity.
3. Envuelve tus sticky headers en @supports (container-type: scroll-state) y shippea el enhancement. Fallback es el comportamiento actual — riesgo cero.
4. Sigue al CSSWG en el tema del lazy loading default. Si landa, cambia cómo se construye todo sitio con muchas imágenes.

CSS moderno en 2026 es menos sobre sintaxis nueva y más sobre borrar JavaScript. Cada feature de arriba existe porque alguien se cansó de escribir un observer. Esa es la línea que vale seguir. 🚀

Fuente: CSS-Tricks — What's !important #16