CSS en 2025 Polígonos Redondeados, Kit de Transiciones y el Regreso del Subgrid

El Panorama del CSS se Está Moviendo Rápido

Si parpadeaste, te pudiste haber perdido varias funcionalidades nuevas y poderosas de CSS llegando a los navegadores. Desde polígonos con clip-path que ahora se pueden redondear, hasta un kit completo de transiciones de vista, la plataforma está evolucionando a toda velocidad. Este artículo reúne las adiciones y debates más impactantes de la comunidad.

Polígonos Redondeados Ya Están Aquí

Amit Sheen mostró cómo construir un rompecabezas completo usando clip-path — una excelente forma de entender la versatilidad de la propiedad. Pero la gran noticia es que Chrome Canary ahora soporta polígonos redondeados con la palabra clave polygon() round. Esta característica, impulsada por Lea Verou, permite crear formas orgánicas sin trucos.

/* Ejemplo: un triángulo redondeado */
.elemento {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100% round 10px);
}

Activa la bandera enable-experimental-web-platform-features en Chrome Canary para probarlo hoy. También se habla de agregar bevel y otras palabras clave de formato de esquina.

Kit de Herramientas de Transiciones de Vista

El equipo de Chrome DevRel lanzó un kit de herramientas de transiciones de vista — una colección de utilidades que facilitan el trabajo con transiciones. Con las transiciones de ámbito de elemento lanzadas el mes pasado, ahora es el momento perfecto para experimentar.

// Ejemplo: disparar una transición de vista en la navegación
if (document.startViewTransition) {
  document.startViewTransition(() => {
    // Actualizar el DOM
  });
}

Contenedores Solo con Nombre vs. @scope

Chris Coyier exploró recientemente el uso de contenedores solo con nombre para ámbito, comparándolos con nombres de clase y la regla @scope. Aunque @scope generalmente resulta en HTML más limpio, la elección depende de las preferencias de tu equipo. ¿Cuál es tu opinión?

/* Ejemplo con @scope */
@scope (.card) {
  .titulo { color: navy; }
}

Subgrid: Sigue Siendo Relevante

Subgrid se convirtió en Baseline Newly Available hace dos años y medio, pero muchos desarrolladores aún no lo han adoptado. La explicación simple de David Bushell muestra cómo subgrid ayuda a salir de las cuadrículas correctamente, evitando contenedores anidados y márgenes negativos.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}

Quizás No Necesitas JavaScript

"The Great CSS Expansion" de Pavel Laptev lista alternativas CSS para patrones comunes de JavaScript — más pequeñas, más rápidas y cada vez más capaces.

Limitaciones y Precauciones

• Los polígonos redondeados requieren Chrome Canary con banderas experimentales; aún no están en Safari o Firefox.
• Las transiciones de vista aún no son compatibles con Safari y Firefox.
• La adopción de subgrid sigue siendo baja; las herramientas y la educación están rezagadas.

Próximos Pasos

• Prueba el kit de herramientas de transiciones de vista en un proyecto personal.
• Experimenta con clip-path: polygon(... round ...) en Chrome Canary.
• Revisita subgrid en tu próximo layout de cuadrícula para reducir la complejidad de contenedores.

Basado en el artículo original.

Inmersión en el Código: Polígonos Redondeados y Transiciones de Vista

Polígono Redondeado en Acción

/* Haz una estrella con puntas redondeadas */
.estrella {
  width: 200px;
  height: 200px;
  background: gold;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
    round 5px
  );
}

Transición de Vista con Ámbito de Elemento

// Ámbito de transición para un elemento específico
const transicion = document.startViewTransition({
  update: () => {
    document.querySelector('.galeria').innerHTML = nuevoContenido;
  },
  types: ['slide'],
  elements: [document.querySelector('.galeria')]
});

Subgrid: Saliendo de Cuadrículas Anidadas

<div class="grid">
  <div class="item">
    <header>Título</header>
    <p>Descripción que debe alinearse entre filas</p>
  </div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}

Referencia: artículo original

Comparación: Contenedores Solo con Nombre vs. @scope vs. Clases

Limitaciones y Precauciones

• Polígonos redondeados son experimentales; no los uses en producción sin fallbacks.
• Transiciones de vista no tienen soporte en Safari/Firefox — considera mejora progresiva.
• Subgrid es poderoso pero puede confundir a desarrolladores no familiarizados con el anidamiento de cuadrículas.

Próximos Pasos

• Crea un pequeño demo con el kit de herramientas de transiciones de vista.
• Reemplaza una animación JavaScript por una solución solo CSS con clip-path.
• Audita tus layouts de cuadrícula actuales para oportunidades de usar subgrid.

Fuente: CSS-Tricks What's Important #9

Conclusión

El CSS en 2025 está más rico que nunca. Los polígonos redondeados, las transiciones de vista y subgrid resuelven problemas reales — pero vienen con advertencias de soporte en navegadores. Empieza a experimentar en proyectos personales y mantén un ojo en Can I Use para uso en producción.

Lectura Adicional

• Cómo Spotify Honk Automatizó 240 Migraciones de Dataset en 6 Meses
• Cómo Cloudflare Log Explorer Convierte Telemetría Cruda en un Motor de Investigación de Ataques Multivectoriales