Avanzadocss
Container Queries (@container)
Diseña componentes verdaderamente reutilizables que responden al tamaño de su contenedor padre, no al viewport de la pantalla.
El fin de los Media Queries para componentes
Los Media Queries clásicos (
@media) solo conocen las dimensiones de la pantalla completa. Si colocas una tarjeta en una barra lateral estrecha, los estilos fallaban. Con Container Queries, el componente reacciona al espacio disponible dentro de su padre inmediato.css
1/* 1. Definir el contexto contenedor */
2.sidebar, .main-feed {
3 container-type: inline-size;
4 container-name: card-container;
5}
6
7/* 2. Definir el componente */
8.card {
9 display: flex;
10 flex-direction: column;
11 gap: 1rem;
12}
13
14/* 3. Reaccionar al contenedor padre */
15@container card-container (min-width: 450px) {
16 .card {
17 flex-direction: row; /* Horizontal si hay más de 450px en el contenedor */
18 align-items: center;
19 }
20}Unidades de consulta de contenedor (cqi, cqw)
Junto con
@container, CSS introdujo unidades basadas en el contenedor: 1cqi = 1% del ancho en línea del contenedor, permitiendo tipografías y espaciados que escalan con el componente.css
1.card-title {
2 font-size: clamp(1rem, 4cqi, 1.75rem);
3}Prueba lo aprendido
Escribe código y ejecútalo directamente en el navegador.
Live Sandbox (HTML)
Output