Nuevas funciones de CSS en 2025: Resumen de los cambios clave

El desarrollo web sigue evolucionando, y CSS no se queda atrás. A principios de 2025, quedó claro que el lenguaje de estilos ha recibido muchas nuevas funciones que ya son compatibles con los navegadores modernos. En este artículo, analizaremos las innovaciones más significativas que pueden facilitar el trabajo de los desarrolladores y mejorar la experiencia del usuario.

El valor balance para la propiedad text-wrap

La tipografía siempre ha sido uno de los desafíos más complejos para los desarrolladores web. Un problema común es la distribución desigual del texto en los encabezados, especialmente en diferentes dispositivos. Por ejemplo, cuando se muestran encabezados largos, a menudo sucede que la última palabra queda en una línea separada, lo que afecta la percepción visual.

Para solucionar este problema, ahora está disponible el valor balance para la propiedad text-wrap. Esto permite distribuir el texto de manera uniforme entre las líneas, minimizando la probabilidad de palabras solitarias al final de una línea. Ejemplo de uso:

h1 {
  text-wrap: balance;
}

Este enfoque es especialmente útil para el diseño responsivo, donde es importante mantener la legibilidad del texto en cualquier pantalla.

Ejemplo de uso de la propiedad:

Pruebe el código en una página separada

Anidamiento nativo en CSS

Durante mucho tiempo, los desarrolladores han utilizado preprocesadores como SASS o LESS para estructurar reglas CSS anidadas. Sin embargo, en 2025, CSS ahora admite el anidamiento de forma nativa. Ahora se puede escribir código de esta manera:

.awesome-block {
  border: 2px solid lightblue;
  padding: 1rem;
   
  &:hover {
    background-color: tomato;
  }
}

Esta sintaxis permite simplificar la estructura de los estilos y hacer que el código sea más legible. Sin embargo, hay que tener cuidado al usar el ampersand (&) en los nombres de clases, ya que podría generar errores.

Las pseudoclases :user-valid y :user-invalid

El trabajo con formularios se ha vuelto aún más cómodo gracias a las nuevas pseudoclases :user-valid y :user-invalid. A diferencia de las tradicionales :valid y :invalid, que aplican estilos inmediatamente después de que se carga la página, estas nuevas pseudoclases solo se activan después de que el usuario interactúa con el campo. Esto evita efectos visuales no deseados al cargar el formulario.

Ejemplo de uso:

input:user-invalid {
  box-shadow: 0 0 10px red;
}

input:user-valid {
  box-shadow: 0 0 10px green;
}

Ejemplo de uso:

Pruebe el código en una página separada

¡Importante! Las pseudoclases :user-valid y :user-invalid aún no son compatibles con la mayoría de los navegadores. Por lo tanto, los estilos pueden aplicarse inmediatamente al cargar la página (como ocurre con :valid y :invalid). Para evitar esto, se pueden usar :focus, :focus-within o agregar un manejador con JavaScript.

La propiedad scrollbar-gutter

Uno de los problemas más comunes al trabajar con ventanas modales es el "salto" del contenido debido a la aparición o desaparición de la barra de desplazamiento. La nueva propiedad scrollbar-gutter permite reservar espacio para la barra de desplazamiento con anticipación, evitando así el desplazamiento del contenido.

Ejemplo:

html,
body {
  scrollbar-gutter: stable;
}

Esta solución es especialmente útil para mejorar la experiencia del usuario al trabajar con ventanas modales y otros elementos de la interfaz.

La función matemática round()

CSS ahora permite redondear valores con la función round(). Esto es especialmente útil cuando se trabaja con números decimales en maquetación. Ejemplo:

.box {
  margin: round(to-zero, 1.25rem, 1px);
}

La función round() puede combinarse con calc(), lo que la convierte en una herramienta poderosa para controlar con precisión tamaños y márgenes.

Las palabras clave safe y unsafe

Al utilizar las propiedades align-items y justify-content, puede ocurrir que los elementos se corten debido a la sobrecarga del contenedor. Las nuevas palabras clave safe y unsafe permiten controlar este comportamiento. Por ejemplo:

.parent {
  align-items: safe center;
}

La palabra clave safe garantiza que los elementos no se recorten en la parte superior del contenedor, lo cual es especialmente importante para las interfaces responsivas.

La propiedad align-content sin flexbox

Antes, para utilizar la propiedad align-content, era necesario establecer display: flex, inline-flex, grid o inline-grid. Ahora, align-content puede funcionar por sí sola, lo que simplifica la alineación vertical de los elementos. Ejemplo:

.container {
  height: 10rem;
  background-color: lightblue;
  align-content: center;
}

Método estándar de alineación vertical con display: flex:

Pruebe el código en una página separada

Y un ejemplo de cómo alinear verticalmente un bloque solo con align-content:

Pruebe el código en una página separada

Cabe destacar que los bloques dentro del contenedor no necesariamente se alinean en una sola línea, pero sí se organizan verticalmente. Para alinear elementos items, simplemente aplique float: left;.

¡Importante tener en cuenta! Esta propiedad puede no funcionar en los navegadores móviles en este momento. Deberías usar el método con el parámetro display: flex.

Conclusión

En 2025, CSS sigue evolucionando, proporcionando a los desarrolladores nuevas herramientas para crear interfaces más flexibles y adaptativas. Entre las innovaciones más útiles destacan:

• El valor balance para la propiedad text-wrap;
• El anidamiento nativo en CSS;
• Las pseudoclases :user-valid y :user-invalid;
• La propiedad scrollbar-gutter;
• La función matemática round().

Estos cambios no solo simplifican el desarrollo, sino que también abren nuevas posibilidades para la creación de interfaces de usuario de mayor calidad. Se recomienda explorar estas funciones y comenzar a usarlas en proyectos.

Otras propiedades adicionales que vale la pena mencionar incluyen:

• La unidad de medida cap, basada en la altura de las letras mayúsculas;
• La propiedad content-visibility, que ayuda a acelerar el renderizado de la página;
• transition-behavior, que permite animar un elemento incluso cuando cambia su display;
• Las funciones matemáticas rem() y mod().

Estas y otras nuevas propiedades y funciones de CSS pueden discutirse en la página de discusión.