Reglas @container y breakpoints
Escriba reglas @container que apliquen estilos cuando el contenedor alcance dimensiones específicas.
Reglas @container y breakpoints es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
Sintaxis de la regla @container
@container es la at-rule que aplica estilos cuando un contenedor cumple determinadas condiciones de tamaño. Su sintaxis es similar a la de las media queries:
<div class="wrapper"><div class="box">Styled once container ≥ 400px wide</div></div>
Container queries con nombre
Seleccione un contenedor específico con nombre:
<div class="sidebar">
<div class="nav-item">Dashboard</div>
<div class="nav-item">Settings</div>
</div>
Container queries de ancho máximo
Use max-width para aplicar estilos a contenedores más pequeños:
<div class="wrapper"><div class="card">Compact card at narrow widths</div></div>
Consultas de contenedor con rangos
La sintaxis moderna de las consultas de contenedor admite rangos:
<div class="wrapper"><div class="card"><span>Icon</span><span>Label</span></div></div>
Componente de tarjeta adaptable
Un componente de tarjeta que se adapta según el ancho de su contenedor:
<div class="card-wrapper">
<div class="card">
<div class="card__image"></div>
<div class="card__body">Adaptive card content</div>
</div>
</div>
Consultas de contenedor anidadas
Las consultas de contenedor se pueden anidar. De forma predeterminada, la consulta interna hace referencia al antecesor contenedor más cercano.
<div class="outer">
<div class="inner">
<div class="content">Nested container-aware content</div>
</div>
</div>
Puntos de corte de las consultas de contenedor
A diferencia de los puntos de corte de la ventana gráfica, los puntos de corte del contenedor deben elegirse según el momento en que deba cambiar el diseño del componente, no según tamaños de dispositivo arbitrarios. Empiece por el ancho de contenido mínimo y máximo del componente.
Tipografía en contenedores
Ajuste la tipografía para contenedores pequeños:
<div class="wrapper">
<h3 class="card-title">Adaptive Heading</h3>
<p class="card-text">Body copy that hides on very narrow containers.</p>
</div>
Consulta de contenedor para diseño de cuadrícula
Cambie la cuadrícula interna de un componente en los puntos de corte del contenedor:
<div class="widget">
<div class="widget-grid">
<div>Tile 1</div>
<div>Tile 2</div>
</div>
</div>
Consultas de estilo (más allá del tamaño)
Las consultas de contenedor también admiten consultas de estilo que comprueban los valores calculados de las propiedades personalizadas. Esto permite crear variantes de componentes controladas por variables CSS sin clases adicionales:
<div class="wrapper"><div class="card">Featured card styled via style query</div></div>
Comprobación rápida
¿Qué objetivo tiene @container (min-width: 500px)?
Resumen
Las reglas @container aplican estilos a los elementos situados dentro de un contenedor cuando este cumple determinadas condiciones de tamaño. Use contenedores con nombre para dirigirse a antecesores específicos. Los puntos de corte del contenedor deben basarse en las necesidades del contenido, no en los tamaños de los dispositivos. Las consultas de estilo amplían las consultas de contenedor para comprobar los valores de las variables CSS, lo que permite crear potentes variantes declarativas de componentes.
Preguntas frecuentes
¿La lección «Reglas @container y breakpoints» es gratis?
Sí — el texto completo de «Reglas @container y breakpoints» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Reglas @container y breakpoints»?
Escriba reglas @container que apliquen estilos cuando el contenedor alcance dimensiones específicas. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Reglas @container y breakpoints»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- container-type y container-name
- Reglas @container y breakpoints
- Unidades de consulta de contenedor: cqw y cqh
- Container queries frente a media queries