Curso gratuito de CSS
Experimento con mejora progresiva

display: grid-lanes para un masonry nativo

Este snippet compara una base segura con columns y una mejora activada con @supports. Si el navegador entiende grid-lanes, el flujo irregular deja de ser un truco y pasa a ser layout nativo.

@supports (display: grid-lanes) {
  .grid {
    display: grid-lanes;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
Columnas
CSS

Container queries

Un mismo componente cambia por el ancho real de su contenedor sin depender del viewport global.

Rendimiento

Speculation Rules

Permite precargar o prerenderizar rutas con intención clara para reducir la espera percibida al navegar.

CSS

Anchor positioning

Tooltips y popovers siguen al elemento ancla sin cálculos manuales de coordenadas.

HTML

<dialog> nativo

El navegador ya resuelve foco, escape y backdrop, así que el esfuerzo va al diseño y no al pegamento.

Accesibilidad

Text wrap balance

Ayuda a que los titulares largos rompan mejor en varias líneas sin ese último renglón demasiado corto.

Arquitectura

Cascade layers

Ordena el CSS por intención: reset, tema, componentes y utilidades, en vez de pelear solo con especificidad.