Novedades CSS 2025 – Parte 2

Una vez cruzado el meridiano de este 2025, es momento de retomar las novedades CSS más sonadas del presente año. Te damos la bienvenida a la segunda parte de nuestra revisión de las más útiles e impresionantes características de CSS. ¿Comenzamos? ¡Vamos allá!

Top propiedades CSS experimentales en 2025

Como ya vimos en la primera parte de nuestro artículo CSS del presente año, hay algunas propiedades ya establecidas y asentadas, así como otras que no cuentan con total soporte en todos los navegadores. Es por eso que vamos a comenzar con algunas de las propiedades.

Layer

Esta útil propiedad permite crear distintas capas de especificidad CSS. Así, de esta manera podemos modificar la jerarquía de la carga de estilos. Además, permite indicar una carga de un archivo en concreto para asociarla en una capa concreta.

Text Wrap:balance

Esta nueva propiedad resulta especialmente en textos grandes como eslóganes o «claims». ¿A quién no le ha ocurrido, que al redimensionar la ventana del navegador le quedara una palabra huérfana en una nueva línea? Para evitar esas palabras «marginadas» en una nueva línea, podemos hacer uso de esta nueva propiedad.

Nesting

Por fin podemos decir que el «nesting» se encuentra implementado por completo en CSS. Una de las características más deseadas de SASS llegó como prototipo el año pasado y como era de esperar, se ha impuesto. Su funcionamiento es de lo más sencillo. Su nomenclatura se basa en el uso de «&» para indicar la pertenencia a un elemento superior.

/* Sin nesting */
.padre {
  /* Estilos del padre */
  .hijo {
    /* Estilos del hijo */
  }
}

/* Con nesting */
.padre {
  /* Estilos del padre */
  & .hijo {
    /* Estilos del hijo */
  }
}

Container queries

Permite hacer una excepción en el estilo de un elemento en función de su contenedor. A diferencia de las mediaqueries habituales, relativas al ancho de la ventana del navegador, la query @container, permite «escuchar» únicamente la naturaleza y estado de un elemento contenedor, y actuar sobre su contenido como especifiquemos.

@container house-card(width <= 450px){}

Relative colors

Permite modificar el valor de un color o background-color correspondiente a una variable. Lo más impresionante de esto, no es solo la posibilidad de modificar el color de un elemento sin necesidad de crear una nueva variable. La mayor ventaja es la capacidad de editar parámetros concretos de esta variable. Por ejemplo, en el siguiente caso, podemos observar cómo solo cambiaremos el tono.

.btn:hover{
oklch(from var(--bg-color) calc(1 - 0.075) c h);
}

Además, lo más sorprendente es que aunque la variable se haya declarado en un formato; rgb, hsl, oklch, … Podemos variar su valor en otro distinto. ¡Impresionante!

Validation

Una de las mejores incorporaciones a CSS es sin duda alguna la validación de formularios sin dependencia de JavaScript. Como bien sabrás, para mejorar la accesibilidad y usabilidad de los formularios, se suelen emplear sistemas de validación que permitan al usuario saber si la información insertada es correcta o no. Pues bien, a partir de ahora, todo ello lo podemos lograr únicamente mediante CSS. Mediante el uso de «valid» o «invalid» en los inputs, podremos dar estilos para gestionar la validación del formulario. Por ejemplo, en el siguiente código podrás observar que cuando un input sea correcto, tendrá un borde verde, además de que su pseudo elemento mostrará «OK».

.input:user-valid {
    border-color: green;
      &::after{
       content: "OK";
  }
}.input:user-invalid {
    border-color: red;
      &::after{
       content: "WRONG";
  }
}

SubGrid

Por fin con soporte para todos los navegadores. La opción de «subgrid» permite algo tan simple como que un elemento hijo de un padre con «display:grid», pueda poseer la misma retícula que su contenedor. En el siguiente ejemplo, podemos observar cómo el elemento hijo adquiere o hereda la retícula de su elemento padre.

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1rem;
}
.grid-child{
   grid-template-columns: subgrid;
}

Como puedes observar, minimizamos el código, al hacer que el hijo adquiera tanto la retícula como el «gap» o espaciado del padre. ¿No es genial?

Display

La propiedad «display» acaba de dar un vuelco en su propio ser gracias a esta nueva característica. Ahora es posible indicar dos valores dentro de esta propiedad. Sí, has leído bien. De esta manera, logramos evitar en gran medida la herencia de comportamiento entre padres e hijos. Por ejemplo, si quiero que un elemento de bloque disponga de hijos «flex», bastará con indicarlo de manera consecutiva. ¿Útil, verdad?

Propiedades lógicas

Una de las características más curiosas y que, quizá, solucione algunos de los problemas menos habituales a la hora de desarrollar un sitio web, son las nuevas propiedades lógicas. Estas tienen como particularidad, cambiar los estilos en función del contexto. Por ejemplo, si tenemos un input en el que se escribe de izquierda a derecha, pero al cambiar de idioma, se escribe al revés, podemos definir un «padding» al inicio del texto, de modo que este varíe automáticamente. He aquí un ejemplo:

.input{
  padding-inline-start: 1rem;
}

Como podrás observar, no definimos el «padding» de la manera habitual, sino que agregamos el apéndice «inline-start» para lograr esta ansiada adaptabilidad. ¿La buena noticia? Ya cuenta con soporte en los principales navegadores.

Top propiedades CSS experimentales en 2025

Hasta ahora nos hemos centrado en características asimiladas por la gran mayoría de navegadores, pero hay muchas otras que no tardarán en llegar para quedarse. Aquí te dejamos nuestra selección.

::backdrop

El pseudo elemento «backdrop» viene a sustituir a la cobertura que se crea habitualmente en los modales y ventanas emergentes. En frameworks como Bootstrap, los modales poseen un elemento HTML que se crea con un div que cubre la pantalla para enfocar la atención en el modal. Esta nueva opción de CSS permite definir y dar estilos al «backdrop» sin necesidad de un nuevo elemento en HTML.

He aquí un ejemplo:

.modal{
  translate: 0 100vh;
   &::backdrop{
    background-color: rgba(0,0,0,.5);
  }
]

En sí, el funcionamiento de esta propiedad cuenta con soporte en los principales navegadores. Sin embargo, lo que aún no es funcional por completo es la «propiedad de transición» ni su comportamiento mediante «transition-behaviour: allow discrete;». Para los más despistados; esta opción permite la transición suave entre tipos de display.

.modal{
  transition-behaviour: allow discrete;
}
.modal::backdrop{
  transition-property: display, background-color, translate;
}

Container queries por estilos

Ya hemos hablado de las «queries» mediante «containers», pero una de las variaciones más interesantes es la de aplicar estilos, no solo en función del tamaño de la ventana o de un contenedor, sino de las propiedades de este. Veamos el siguiente ejemplo, en el que nuestros estilos se aplicarán solo al elemento contendor con la condición que especifiquemos; en este caso, que posea la variable de color rojo:

@container style(--primary-color: red){
  background-color:blue;
}

Esta funcionalidad cuenta con soporte para la mayoría de los principales navegadores, pero no en Firefox. No obstante, seguro que no tarda en implementarse dada su gran utilidad.

Interpolate-size: allow-keywords

Esta propiedad es una de nuestras favoritas y por eso la hemos querido reservar para el final. Se trata nada más y nada menos de la posibilidad de crear transiciones de tamaño entre «keywords» y valores numéricos. Esto «cambia por completo las reglas del juego», ya que a partir de ahora es posible pasar entre, por ejemplo, un elemento con una altura ajustada a su contenido a un tamaño definido numéricamente sin tener que establecer un mínimo o máximo numérico. Además, para hacer uso de esta propiedad, bastará con activarla en nuestro CSS en el body o en la raíz. Veamos un ejemplo:

:root{
  interpolate-size: allow-keywords;
}
article{
  height: 3rem;
  overflow:hidden;
  transition: height ease 1s;
}article:hover{
  height:max-content:
}

Conclusión

Hasta aquí llegan las principales novedades de CSS en 2025. Como habrás podido comprobar, CSS sigue en constante evolución, y cada día que pasa se hace más completo. De esta manera, la comunidad detrás del crecimiento de CSS no deja de brindarnos opciones y herramientas que facilitan nuestro día a día.

Por nuestra parte, esperamos que hayas disfrutado de nuestro artículo y lo hayas encontrado útil. Además, te animamos a que nos cuentes tu experiencia con algunas de estas nuevas herramientas CSS. ¡Te esperamos en el próximo artículo!