CSS
Explica container queries de tamaño y estilo para adaptar componentes al espacio y contexto de su contenedor, no solo al viewport.
Container queries aplican estilos según el contenedor de un componente, no solo el viewport.
.card-wrapper {
container-type: inline-size;
}
@container (width >= 30rem) {
.card {
grid-template-columns: 10rem 1fr;
}
}.sidebar {
container-name: sidebar;
container-type: inline-size;
}Shorthand:
.sidebar {
container: sidebar / inline-size;
}inline-size permite consultar el eje inline y aplica containment necesario.
@container sidebar (width >= 24rem) {
.filters { grid-template-columns: 1fr 1fr; }
}El navegador busca el ancestor elegible más cercano con ese nombre.
Las reglas dentro de @container estilizan descendientes del container. El container no puede cambiar su propio tamaño mediante una query que dependa de ese mismo tamaño, evitando ciclos.
Usa un wrapper si el componente necesita consultar el espacio exterior.
.card__title {
font-size: clamp(1.25rem, 5cqi, 2rem);
}cqw, cqhcqi, cqbcqmin, cqmaxSi no existe un container elegible, pueden usar small viewport units como fallback según la especificación.
@container style(--theme: dark) {
.card { color-scheme: dark; }
}Las queries de custom properties tienen soporte distinto a size queries y las queries sobre propiedades normales continúan evolucionando. Verifica compatibilidad antes de depender de ellas.
CSS Conditional Rules moderno incorpora tipos adicionales como scroll-state y condiciones relacionadas con anchor positioning. Son capacidades recientes; mantenlas en progressive enhancement.
Responde al entorno global:
Responde al contexto local del componente.
Ambas son complementarias.
Establecer container-type cambia containment. Puede afectar sizing intrínseco o layout del container; no lo apliques globalmente sin necesidad.
.project-section {
container: projects / inline-size;
}
.project-card {
display: grid;
gap: 1rem;
}
@container projects (width >= 42rem) {
.project-card {
grid-template-columns: 2fr 3fr;
align-items: center;
}
}La misma card funciona en main, sidebar o modal según espacio local.
¿Por qué se utiliza frecuentemente un wrapper como query container?
Porque las reglas consultan un ancestor; el componente puede adaptar sus descendientes al espacio ofrecido sin crear un ciclo sobre su propio tamaño.
Estrategia responsive combina flujo, queries y contenido.