¿Qué funcionalidades modernas de CSS han cambiado de verdad cómo construyes componentes, y qué problema resuelven las container queries?

Las container queries permiten que un componente responda al ancho de su contenedor en vez de al del viewport, así que la misma tarjeta puede ser estrecha en una barra lateral y ancha en una columna principal sin pasar props ni adivinar breakpoints. Junto a ellas, el selector has permite estilar al padre, el anidamiento nativo elimina la dependencia de un preprocesador, subgrid alinea el contenido anidado a lo largo de una rejilla y las view transitions animan entre estados sin librería.

La grande son las container queries, porque durante años el layout de un componente estaba atado al viewport aunque el componente no tiene ni idea de lo ancho que es su hueco. Así que la misma tarjeta tenía una prop tipo variante compacta, y esa prop había que hilarla desde donde estuviera colocada. Ahora declaro container type inline size en el contenedor y la tarjeta se estila a partir de su propio ancho, lo que significa que cae en una barra lateral o en una rejilla a ancho completo y simplemente funciona. Después de eso, el selector has, sobre todo para estados de formulario, porque puedo estilar el contenedor de un campo según si contiene un input inválido sin tocar JavaScript. El anidamiento nativo me ha quitado una dependencia real de preprocesador, y subgrid por fin hace que las cabeceras de las tarjetas se alineen a lo largo de una fila. Sobre el soporte, consulto el estado de baseline en vez de adivinar, y si una funcionalidad no está ampliamente disponible la uso como mejora progresiva con un bloque supports para que nada se vea roto sin ella.