🚩 CSS ha cambiado este 2025

CSS ha evolucionado significativamente en 2025, incorporando nuevas características que transforman la forma en que diseñamos interfaces web. A continuación, se detallan las principales novedades:

📦 Container Queries: diseño verdaderamente modular

Las Container Queries permiten aplicar estilos a un elemento en función del tamaño de su contenedor, no del viewport. Esto facilita la creación de componentes reutilizables y adaptables a diferentes contextos.

.card {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }
}

Esta funcionalidad está ampliamente soportada en los navegadores modernos.

De nuestros socios:

Looking for unbiased, fact-based news? Join 1440 today.

Join over 4 million Americans who start their day with 1440 – your daily digest for unbiased, fact-centric news. From politics to sports, we cover it all by analyzing over 100 sources. Our concise, 5-minute read lands in your inbox each morning at no cost. Experience news without the noise; let 1440 help you make up your own mind. Sign up now and invite your friends and family to be part of the informed.

Subscribe to 1440 today.

🔍 :has(): el selector que esperábamos

El pseudo-selector :has() actúa como un selector de padres, permitiendo aplicar estilos a un elemento si contiene ciertos descendientes. Esto abre posibilidades para interacciones dinámicas sin necesidad de JavaScript.

form:has(input:invalid) {
  border: 2px solid red;
}

Con un soporte de más del 92% en los navegadores actuales, es una herramienta poderosa para mejorar la experiencia del usuario.

🧬 Nesting nativo: adiós a los preprocesadores

CSS ahora permite anidar selectores de forma nativa, mejorando la legibilidad y organización del código sin necesidad de preprocesadores como Sass.

.card {
  padding: 1rem;

  h2 {
    font-size: 1.5rem;
  }

  .button {
    background-color: blue;
  }
}

Esta característica está disponible en la mayoría de los navegadores modernos.

📏 Nuevas unidades de viewport: svh, lvh, dvh...

Se han introducido nuevas unidades relativas al viewport, como svh, lvh y dvh, que ofrecen un control más preciso sobre las dimensiones en diferentes dispositivos y situaciones.

.hero {
  height: 100svh;
}

Estas unidades mejoran la adaptabilidad del diseño en dispositivos móviles y con interfaces dinámicas.

🧪 Otras novedades destacadas

• Cascade Layers (@layer): permite organizar y priorizar estilos de manera más efectiva.

• Scroll-driven animations: facilitan la creación de animaciones basadas en el desplazamiento del usuario.

• scroll-state(): permite aplicar estilos en función del estado de desplazamiento de un elemento.

🧠 Conclusión

CSS en 2025 ofrece herramientas más potentes y flexibles que nunca. Adoptar estas nuevas características puede mejorar significativamente la eficiencia y calidad de nuestros desarrollos web.