Ver el código de «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 <code>balance</code> para la propiedad <code>text-wrap</code>. 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:

<syntaxhighlight lang="css" copy>
h1 {
  text-wrap: balance;
}
</syntaxhighlight>

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:'''

{{Iframe
|url = https://codeeditor.ru/code.php?id=2502kj2LYzgi0g&lang=es
|altura = 720px
|nombre = El valor balance para la propiedad text-wrap
}}

== 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:

<syntaxhighlight lang="css" copy>
.awesome-block {
  border: 2px solid lightblue;
  padding: 1rem;
   
  &:hover {
    background-color: tomato;
  }
}
</syntaxhighlight>

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 (<code>&</code>) 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 <code>:user-valid</code> y <code>:user-invalid</code>. A diferencia de las tradicionales <code>:valid</code> y <code>:invalid</code>, 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:'''

<syntaxhighlight lang="css" copy>
input:user-invalid {
  box-shadow: 0 0 10px red;
}

input:user-valid {
  box-shadow: 0 0 10px green;
}
</syntaxhighlight>

'''Ejemplo de uso:'''
{{Iframe
|url = https://codeeditor.ru/code.php?id=2502DOe3zWFqN3&lang=es
|altura = 500px
|nombre = Las pseudoclases :user-valid y :user-invalid
}}<blockquote>'''¡Importante!''' Las pseudoclases <code>:user-valid</code> y <code>:user-invalid</code> 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 <code>:valid</code> y <code>:invalid</code>). Para evitar esto, se pueden usar <code>:focus</code>, <code>:focus-within</code> o agregar un manejador con JavaScript.</blockquote>

== 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 <code>scrollbar-gutter</code> permite reservar espacio para la barra de desplazamiento con anticipación, evitando así el desplazamiento del contenido.

'''Ejemplo:'''

<syntaxhighlight lang="css" copy>
html,
body {
  scrollbar-gutter: stable;
}
</syntaxhighlight>

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 <code>round()</code>. Esto es especialmente útil cuando se trabaja con números decimales en maquetación. '''Ejemplo:'''

<syntaxhighlight lang="css" copy>
.box {
  margin: round(to-zero, 1.25rem, 1px);
}
</syntaxhighlight>

La función <code>round()</code> puede combinarse con <code>calc()</code>, 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 <code>align-items</code> y <code>justify-content</code>, puede ocurrir que los elementos se corten debido a la sobrecarga del contenedor. Las nuevas palabras clave <code>safe</code> y <code>unsafe</code> permiten controlar este comportamiento. Por ejemplo:

<syntaxhighlight lang="css" copy>
.parent {
  align-items: safe center;
}
</syntaxhighlight>

La palabra clave <code>safe</code> 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 <code>align-content</code>, era necesario establecer <code>display: flex</code>, <code>inline-flex</code>, <code>grid</code> o <code>inline-grid</code>. Ahora, <code>align-content</code> puede funcionar por sí sola, lo que simplifica la alineación vertical de los elementos. Ejemplo:

<syntaxhighlight lang="css" copy>
.container {
  height: 10rem;
  background-color: lightblue;
  align-content: center;
}
</syntaxhighlight>

'''Método estándar de alineación vertical con <code>display: flex</code>:'''
{{Iframe
|url = https://codeeditor.ru/code.php?id=2502ylIzdUsT3n&lang=es
|altura = 520px
|nombre = La propiedad align-content con display: flex
}}

'''Y un ejemplo de cómo alinear verticalmente un bloque solo con <code>align-content</code>:'''
{{Iframe
|url = https://codeeditor.ru/code.php?id=2502P68LurLW8O&lang=es
|altura = 630px
|nombre = Alineación vertical solo con align-content
}}

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 <code>items</code>, simplemente aplique <code>float: left</code>;.

<blockquote>'''¡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 <code>display: flex</code>.</blockquote>

== 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 <code>balance</code> para la propiedad <code>text-wrap</code>;
* El anidamiento nativo en CSS;
* Las pseudoclases <code>:user-valid</code> y <code>:user-invalid</code>;
* La propiedad <code>scrollbar-gutter</code>;
* La función matemática <code>round()</code>.

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 <code>cap</code>, basada en la altura de las letras mayúsculas;
* La propiedad <code>content-visibility</code>, que ayuda a acelerar el renderizado de la página;
* <code>transition-behavior</code>, que permite animar un elemento incluso cuando cambia su <code>display</code>;
* Las funciones matemáticas <code>rem()</code> y <code>mod()</code>.

Estas y otras nuevas propiedades y funciones de CSS pueden discutirse en la [[Discusión:Nuevas funciones de CSS en 2025: Resumen de los cambios clave|página de discusión]].

== Otros artículos sobre CSS ==
{{Plantilla:Navegación/CSS|state=uncollapsed}}
{{Enciclopedia CSS/Navegación|state=autocollapse}}
[[Categoría:CSS]]
[[wj-en:New CSS Features in 2025: Overview of Key Changes]]
[[wj-de:Neue CSS-Funktionen im Jahr 2025: Überblick über wichtige Änderungen]]
[[wj-ru:Новые возможности CSS в 2025 году: обзор ключевых изменений]]
[[wj-fr:Nouvelles fonctionnalités CSS en 2025 : Aperçu des changements clés]]
[[wj-it:Nuove funzionalità CSS nel 2025: Panoramica dei cambiamenti chiave]]