Container queries
Un mismo componente cambia por el ancho real de su contenedor sin depender del viewport global.
display: grid-lanes para un masonry nativoEste 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));
}
}
Un mismo componente cambia por el ancho real de su contenedor sin depender del viewport global.
Permite precargar o prerenderizar rutas con intención clara para reducir la espera percibida al navegar.
Tooltips y popovers siguen al elemento ancla sin cálculos manuales de coordenadas.
El navegador ya resuelve foco, escape y backdrop, así que el esfuerzo va al diseño y no al pegamento.
Ayuda a que los titulares largos rompan mejor en varias líneas sin ese último renglón demasiado corto.
Ordena el CSS por intención: reset, tema, componentes y utilidades, en vez de pelear solo con especificidad.