HTML y CSS en 2025: 5 nuevas características que podrías haberte perdido

¿Crees que el HTML y el CSS ya se han estudiado a fondo? ¡Pues no! En 2025, estos «viejos» vuelven a sorprender: han aparecido varias características interesantes en los navegadores que hacen que el diseño sea más fácil, más limpio y más potente 💥

En este artículo encontrarás 5 novedades que quizás te hayas perdido. Especialmente si acabas de empezar. ¡Vamos!

1. 🧱 :has() en CSS, ¡por fin!

Ahora CSS puede «mirar hacia atrás», es decir, aplicar estilos al elemento principal si tiene un elemento específico dentro. Antes, esto solo se podía hacer a través de JS.

.card:has(img) {
  border: 1px solid green;
}

👉 Aplica el marco .card si hay una imagen dentro. ¡Hurra, el selector de padres ya es una realidad!

2. 🎛️ Consultas de contenedores (container queries)

Los estilos ahora se pueden adaptar no al tamaño de la pantalla, sino al tamaño contenedor¡Es una revolución para el enfoque por componentes!

@container (min-width: 400px) {
  .card-title {
    font-size: 2rem;
  }
}

⚙️ Se utiliza junto con la propiedad container-type, y esto ya es compatible con Chrome, Firefox, Safari.

3. 🎨 CSS :where() y :is() — selectores sin dolor

Estas son herramientas potentes para escribir selectores cortos y flexibles con baja especificidad:

:where(header, main, footer) {
  margin: 0 auto;
}

🧠 Es útil si no quieres pelearte con las redefiniciones y la importancia.

4. 💾 Atributo loading="lazy" predeterminado

Ahora todos los <img> y <iframe> en la mayoría de los navegadores por defecto se cargan lentamente — solo cuando aparecen en la pantalla.

<img src="photo.jpg" alt="Photo">

Antes tenías que escribir loading="lazy", ahora puedes olvidarte de eso, ¡y todo funcionará!

5. 🧪 Estilos con alcance en HTML

Un experimento que ya está disponible en Chrome y Safari: puedes escribir estilos directamente en el componente y se aplicarán solo a él.

<style scoped>
  h2 {
    color: tomato;
  }
</style>

⚠️ Todavía es inestable, pero el futuro está claramente detrás de esto. Especialmente para aquellos que escriben en Web Components.

🤓 Bonificación: un par de características más para tener en cuenta

• text-wrap: balance; — lleva los títulos a varias líneas de forma elegante

• view-transition API: transiciones fluidas entre páginas

• anchor positioning — nuevo posicionamiento de tooltips y popups

En el anexo Kodik no solo puedes leer, sino probar ¡directamente en el editor! Actualizamos los cursos de HTML y CSS, añadimos nuevas funciones y te proporcionamos conocimientos actualizados. Y también tenemos comunidad acogedora en Telegram 👾

💬 ¿Ya has probado :has() o las consultas de contenedores?

¡Escribe en los comentarios qué trucos de CSS te impresionaron en 2025!