container-type y container-name

Las container queries permiten que CSS aplique estilos según el tamaño de un contenedor principal en lugar del viewport. Esto permite un diseño adaptable verdaderamente basado en componentes, donde un componente se adapta al lugar en el que se coloque.

Con las media queries, un componente de tarjeta situado en una barra lateral de 300px no puede saber que es pequeño: solo sabe que el viewport es ancho. Las container queries permiten que el componente reaccione al tamaño de su propio contenedor, no al del viewport global.

Para consultar un contenedor, primero declárelo como contenedor consultable mediante container-type:

Valores disponibles:

• inline-size — habilita consultas sobre la dimensión en línea del contenedor (el ancho en una escritura horizontal)
• size — habilita consultas sobre las dimensiones en línea y de bloque (ancho y alto)
• normal — valor predeterminado; no permite consultas de tamaño, pero sí consultas de estilo

Asigne un nombre al contenedor para referenciarlo en las consultas. Esto es necesario cuando existen contenedores anidados y desea consultar un ancestro específico:

La abreviatura container establece tanto el nombre como el tipo:

Aun puede consultar un contenedor sin nombre: la regla @container se dirigirá de forma predeterminada al ancestro contenedor más cercano. Los nombres solo son necesarios cuando desea omitir ancestros hasta llegar a uno específico.

Cada elemento container-type obtiene su propio aislamiento del diseño. Esto significa que los cambios de tamaño dentro del contenedor no afectan a sus ancestros, lo que supone una ventaja de rendimiento. El navegador no necesita recalcular toda la página cuando cambia el contenedor.

Establecer container-type: inline-size configura implícitamente contain: inline-size layout style en el elemento. Esto impide que el tamaño del contenedor afecte a su propio diseño, algo necesario para que funcionen las consultas de tamaño.

Una configuración completa de container query:

Utilice contenedores para: adaptación a nivel de componente, componentes reutilizables en distintos contextos de diseño y tarjetas o widgets en ubicaciones desconocidas. Utilice media queries para: cambios del diseño global, escalado de la tipografía y mostrar u ocultar secciones grandes.

¿Qué valor de propiedad permite que un elemento sea consultable por su ancho mediante reglas @container?

container-type: inline-size define un elemento como contenedor consultable por su ancho. Utilice container-name para asignar nombres a los contenedores y seleccionarlos de forma específica. La abreviatura container establece ambos valores. Las container queries resuelven el problema de los componentes situados en contextos desconocidos, que las media queries basadas en el viewport no pueden abordar.