CSS Moderno 2025 Nuevo

Container Queries La Revolución del Responsive

Los Container Queries permiten que los elementos respondan al tamaño de su contenedor padre, no solo al viewport. Esto significa diseños verdaderamente modulares y componentes que se adaptan a cualquier contexto.

📦

Contenedor-based Responsive por contenedor

📏

Tipografía Fluida clamp() + container units

🔄

Modular Componentes reutilizables

Demo en Vivo Controla la animación automática

La animación cambia el tamaño del contenedor cada 2 segundos ▶️ Ejecutándose

🎨

Container Query

Diseño Inteligente

CSS 2025

Este componente cambia automáticamente su layout, tipografía y elementos visuales basándose en el ancho de su contenedor padre, no del viewport. La magia del responsive moderno.

@container Query

clamp() Fluido

cqw Units

@container inline-size container-type

¿Cómo Funciona? El código detrás de la magia

1. Definir el Container Query Context

CSS

.container-wrapper {
  /* Definir contexto de container query */
  container-type: inline-size;
  container-name: card-container;
  
  /* Animación automática del tamaño */
  animation: containerResize 8s ease-in-out infinite;
}

@keyframes containerResize {
  0%, 100% { max-width: 100%; }
  25%      { max-width: 600px; }
  50%      { max-width: 400px; }
  75%      { max-width: 300px; }
}

2. Container Query Breakpoints

CSS

/* Layout vertical por defecto (mobile-first) */
.responsive-card {
  display: flex;
  flex-direction: column;
}

/* Cuando el container es ≥ 600px: layout horizontal */
@container card-container (min-width: 600px) {
  .responsive-card {
    flex-direction: row;
  }
  
  .card-image {
    width: 40%;
  }
  
  .card-content {
    width: 60%;
  }
}

/* Cuando el container es ≥ 800px: versión mejorada */
@container card-container (min-width: 800px) {
  .card-title {
    font-size: clamp(1.5rem, 4cqw, 2.5rem);
  }
}

3. Tipografía Fluida con Container Units

CSS

.card-title {
  /* Tipografía que escala según el container */
  font-size: clamp(1.25rem, 3cqw + 1rem, 2rem);
}

.card-description {
  /* cqw = container query width units */
  font-size: clamp(0.875rem, 2cqw + 0.75rem, 1.125rem);
}

/* cqw es relativo al ancho del contenedor, no del viewport */

Ventajas de Container Queries ¿Por qué son el futuro del responsive design?

⚙️

Componentes Modulares

Los componentes se adaptan a cualquier contexto sin importar dónde se usen. Verdadera reutilización de código.

📐

Precisión de Layout

No más media queries globales. Cada componente controla su propio comportamiento responsive.

⚡

Performance

Menos código CSS, menos complejidad. Los cambios se aplican solo cuando el contenedor cambia de tamaño.

🎯

Mantenimiento

CSS más limpio y predecible. Cada componente encapsula sus propias reglas responsive.

Soporte de Navegadores Container Queries en producción

🌐

Chrome 105+ ✅

🦊

Firefox 110+ ✅

🧭

Safari 16.0+ ✅

🔷

Edge 105+ ⚠️

Fallback para navegadores antiguos:

@supports not (container-type: inline-size) {
  /* Usar media queries tradicionales como fallback */
  @media (min-width: 600px) {
    .responsive-card {
      flex-direction: row;
    }
  }
}