CSS Moderno Interest Invokers, Selector de Prefijo y flex-wrap balance en Acción

¡Hola Devs! El CSS se movió otra vez 🎨

Si parpadeaste, te perdiste tres promociones a Baseline, una sintaxis nueva de selector y un flex-wrap: balance que por fin resuelve el problema del último card huérfano que arrastramos desde 2015.

Vamos a ver esto sin rodeos: este roundup cubre lo que realmente está saliendo, no solo specs bonitas en borrador. Porque seamos honestos — el CSS Working Group produce ideas hermosas cada mes, pero solo unas cuantas sobreviven al contacto con los engines reales.

Lo que vamos a revisar:

• Interest invokers y por qué los tooltips necesitan delay asimétrico
• Selector de prefijo de clase — más limpio que los hacks con [class^=]
• flex-wrap: balance y qué cambia en tus grids de cards
• @supports named-feature() para detectar capacidades de verdad
• Status Baseline de text-box-trim, sibling-count() y autocorrect

Interest Invokers: tooltip con delay al entrar, instantáneo al salir

El problema clásico de UX: el usuario pasa el mouse sin querer, el tooltip dispara, se va, y el tooltip queda colgado. La solución es timing asimétrico — lento para aparecer, instantáneo para desaparecer.

/* Aparece con delay, se va al instante */
.tooltip-trigger {
  interest-delay-start: 500ms;   /* espera antes de mostrar */
  interest-delay-end: 0ms;       /* oculta inmediatamente */
}

.tooltip-content {
  position: absolute;
  top: 100%;
  left: 0;
}

<!-- El atributo interesttarget conecta el trigger con el popover -->
<button interesttarget="mi-tip">Pásame el mouse</button>
<div id="mi-tip" popover>Contenido del tooltip con delay</div>

Patrón de progressive enhancement: Como solo Chrome soporta interest invokers hoy, combínalo con el approach legacy de :hover + transition-delay. Navegadores que no entienden interest-delay-start simplemente ignoran la declaración.

/* Fallback para navegadores sin soporte */
@supports not (interest-delay-start: 500ms) {
  .tooltip-trigger:hover + .tooltip-content {
    opacity: 1;
    transition-delay: 500ms;
  }
}

Selector de Prefijo de Clase

Una sintaxis nueva que reemplaza tres selectores de atributo feos por una regla legible:

/* La forma nueva — limpia y performante */
.something-* {
  color: rebeccapurple;
}

/* La forma vieja — tres selectores para cubrir los mismos casos */
[class^="something-"],
[class*=" something-"],
[class*="something-"] {
  color: rebeccapurple;
}

Todavía no tiene soporte en ningún lado, pero la spec es simple y la ganancia ergonómica es enorme — apunta a que la adopción va a ser rápida.

flex-wrap: balance y @supports named-feature()

flex-wrap: balance

text-wrap: balance fue un regalo para los headlines. flex-wrap: balance extiende la misma idea a containers flex — los items se distribuyen de forma equilibrada entre las filas en vez de dejar un card huérfano en la última línea.

@supports named-feature()

Algunas capacidades no se pueden testear con un @supports (property: value) simple. named-feature() te deja consultarlas por nombre:

@supports named-feature(anchor-positioning-transforms) {
  /* El navegador aplica transforms correctamente en elementos anchor-positioned */
  .popover { transform: translateY(-4px); }
}

Actualizaciones de Baseline que vale la pena conocer

• sibling-count() / sibling-index() — ahora Baseline. Se acabó la gimnasia con :nth-child para animaciones escalonadas.
• text-box-trim / text-box-edge — ahora Baseline. Por fin ritmo vertical tipográfico sin márgenes negativos.
• autocorrect — ahora Baseline en Chrome 152.
• alpha() — solo Chrome 152. Safari y Firefox pendientes.
• ::backdrop, ::scroll-marker, ::view-transition — soporte de CSSPseudoElement solo en Chrome.

Cuidados y Próximos Pasos

La neta, sin filtro: la mitad de esta lista es Chrome-only. Si entregas a audiencia global, trata interest-delay-*, named-feature(), alpha() y flex-wrap: balance como enhancements, nunca como feature crítica. Construye el fallback primero, después pones el brillo encima.

El selector de prefijo es el destacado — suficientemente simple para hacer polyfill mental y suficientemente útil para justificar un plugin de postcss hoy.

Qué estudiar después:

1. Lee la spec css-values-5 del CSS Working Group para entender sibling-count().
2. Audita tu design system para delays de tooltip — timing asimétrico es victoria de una línea.
3. Prueba text-box-trim en tu escala tipográfica; elimina una clase entera de hacks de margen.

Para entender cómo plataformas grandes manejan configuración y confiabilidad a escala, checa este breakdown de la arquitectura de sidecar de config dinámica de Airbnb. Y si estás planeando migración de infra, el blueprint de migración Oracle-to-PostgreSQL vale tu tiempo.

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

Cerrando cuentas

CSS en 2025 va volando — más rápido de lo que la mayoría de los equipos puede absorber. La estrategia ganadora no es perseguir cada spec draft; es identificar el 20% de features que resuelven el 80% de tu dolor de layout y adoptarlas detrás de un gate de @supports.

Empieza por flex-wrap: balance y el selector de prefijo. Bajo riesgo, alto retorno. Aguanta los interest invokers hasta que Firefox shipee soporte — a menos que tu audiencia sea Chrome-heavy.

La web platform por fin nos está dando herramientas nativas para problemas que hackeábamos desde hace una década. Úsalas, pero mantén tus fallbacks honestos. 🚀