Blog / Novedades CSS 2025

Nos encontramos en la casilla de salida de este 2025 y no podemos faltar a nuestra cita con las novedades CSS para este año. Como ya es costumbre en Caronte, repasamos las propiedades que van a revolucionar el diseño web durante este año. Si bien es cierto, que algunas de las mencionadas en nuestros artículos de CSS en 2024 y tendencias CSS en 2019, entre otros, se han diluido en el tiempo, otras llegaron para quedarse. Por eso creemos que las que te vamos a presentar este año llegan para quedarse. Así que sin más dilación, vamos a dar comienzo a nuestra recopilación de nuevas propiedades CSS para 2025, que sin duda, te dejarán sin habla.

Novedades de usabilidad CSS para 2025

View()

Aunque en ya hemos hablado de esta propiedad en artículos anteriores, será a lo largo de este presente 2025 cuando realmente explotemos las posibilidades que nos brinda «scroll into view». Este genial recurso nos permite crear transiciones en función de si un elemento «está en pantalla», como lo hiciera hasta ahora mediante «aos.js».

El funcionamiento es muy sencillo, tan solo debemos crear una animación mediante la propiedad «animation», y definir «animation-timeline» de la siguiente manera. Esto nos permitirá que la animación dependa de la visibilidad del elemento en cuestión.

Como podrás observar en el siguiente código, podemos definir parámetros adicionales como cuándo comienza y cuándo acaba la animación. En este caso, la transición comienza en cuanto el elemento se muestra en pantalla y acaba cuando llega al 30% de la altura de esta. Resulta muy intuitivo poder definir dicho comportamiento.

.elemento {
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: 30vh;

}

También es posible indicar estos parámetros dentro de «view()»:

.elemento {
    animation-timeline: view(100px 200px);

}

Lamentablemente, pese a contar con casi más de medio año entre nosotros, sigue sin contar con soporte para navegadores como Firefox o Safari. Esperemos que a lo largo de 2025 subsanen el error.

Auto Height

Si hay una propiedad que ansiábamos sobre cualquier otra, seguramente se trate de «auto-height». Si te ha tocado lidiar con transiciones de altura como en elementos colapsables, menús y otros, sin duda alguna te habrás topado con el desagradable «salto» de altura entre distintos estados.

En este caso, se trata de la actualización de la propiedad «transition» sobre la altura de un elemento. En el siguiente código podrás observar la práctica más habitual hasta ahora, con una simple variación de altura del elemento de clase «colapsable» cuando se le agrega la clase «abierto».

.colapsable {
  height: 0;
  transition: height 0.5s ease;

  &.abierto {
    height: 300px;
  }
}

Este código resulta en un cambio brusco de la altura de este. Hasta ahora, podíamos lograr una suave transición recurriendo a JS. Sin embargo, ahora podemos prescindir de scripts y de manera nativa en CSS, indicar al elemento que se comporte de la misma manera.

.colapsable {
  height: 0;
  transition: height 0.5s ease;

  &.abierto {
    height: calc-size(auto);
  }
}

De nuevo, para los usuarios de Safari, Firefox y Edge, habrá que esperar para recibir soporte. Por el momento, solo es compatible con Google Chrome.

Anchor Positioning

Quizá la más innovadora propiedad CSS para 2025 sea el posicionamiento por anclas. Cuando hablamos de anclas en HTML y CSS tendemos a pensar en enlazado, pero esta propiedad va mucho más allá. Se trata de un recurso de posicionamiento y visualización de elementos muy innovador. De manera similar a los «popovers», el posicionamiento mediante anclas, permite mostrar elementos en función de otros.

Su funcionamiento radica en definir la relación de un «elemento ancla» con otro u otros elementos «objetivo». Para ello, comenzaremos con indicar al «elemento ancla» la propiedad «anchor-name», y al «elemento objetivo» la propiedad «position-anchor». Estos poseen una nomenclatura similar a las variables CSS. He aquí un ejemplo:

.ancla{
   anchor-name: --mi-elemento-ancla;
}
.objetivo{
  position: absolute;
  position-anchor: --mi-elemento-ancla;
}

Una vez definidos, podemos posicionar los distintos elementos mediante la propiedad «position-area», habitualmente indicado con dos valores de posición como, por ejemplo, «top start» o «bottom end», etc.

.objetivo{
  position: absolute;
  position-anchor: --mi-elemento-ancla;
  position-area: self-start self-end;
}

Ahora, es cuando realmente sacaremos partido a esta herramienta, ya que podemos definir la visibilidad del»elemento objetivo» con relación al «elemento ancla».

.objetivo{
  position: absolute;
  position-anchor: --mi-elemento-ancla;
  position-area: self-start self-end;
}

Esta propiedad promete ser una alternativa inteligente y muy útil a los actuales tooltips, pero de momento no cuentan con soporte para la gran mayoría de navegadores, siendo únicamente en Google Chrome y Microsoft Edge donde los podemos emplear actualmente.

Novedades de texto CSS para 2025

field-sizing

En ocasiones los formularios con campos extensos como áreas de texto, pensados para incorporar contenido indefinido, cuentan con un tamaño excesivo. En principio, puede parecer lógico, pero no es más que «un parche». Esto consiste en dar una altura aproximada a un campo de texto, jugando a adivinar la longitud más probable de un mensaje o texto por parte del usuario.

Con la siguiente propiedad, por primera vez en CSS, podremos ajustar el tamaño del campo al contenido. Mediante «field-sizing», podemos despedirnos de los formularios con grandes campos de texto, generalmente vacíos. Así, podemos crear diseños más minimalistas y comedidos, sin renunciar a la usabilidad que estos requieren.

Aplicando la propiedad «field-sizing» a campos input con el valor «content», lograremos que el tamaño se adapte al contenido de este.

textarea {
  field-sizing: content;
}

Cabe destacar que, por el momento, únicamente cuenta con soporte para Google Chrome, pero se prevé su compatibilidad en el resto de los principales navegadores a lo largo de 2025.

Font-size-adjust

El uso de distintas familias tipográficas en diseño web es indispensable y en ocasiones puede derivar en un auténtico dolor de cabeza. Quizás, uno de los problemas más molestos en lo que al uso de distintas tipografías web se refiere es al cambio de la «altura x», relativa a las letras minúsculas de cada tipografía. Así, la altura de una «Arial», es distinta a la de una «Times». Y es precisamente cuando se lleva a cabo el cambio de una a otra, cuando se puede llegar a apreciar un desplazamiento del DOM debido a esta diferencia en el texto.

Para solventar este problema nace la propiedad «font-size-adjust». Este puede actuar como un multiplicador del tamaño base de la tipografía del elemento para que pueda ajustarse cuando sea necesario. He aquí un ejemplo:

h2{
  font-size: 2rem;
  font-size-adjust: 0.5;
}

Como podrás observar, el elemento «H2» cuenta con un tamaño de 2rem y mediante la propiedad «font-size-adjust» podemos multiplicar este tamaño para, por ejemplo, ajustarlo hasta 1rem. Además de un valor numérico, podemos indicarle dos, o incluso valores globales; inherit, initial, revert, revert-layer, unset, ex-width, ic-height, from-font, cap-height, etc.

La buena noticia es que cuenta con soporte para todos los principales navegadores.

Conclusión

¿Qué te han parecido las novedades de CSS para 2025? ¿Te parecen suficientes o esperabas más? No desesperes, porque hay muchas otras en camino, y a cuál más interesante.

En cualquier caso, te recordamos que compruebes en «Can I use» la compatibilidad con los principales navegadores de las distintas propiedades aquí expuestas. Siempre están sujetas a actualizaciones e incluso a su propia obsolescencia, así que ten cuidado.

Esperamos que hayas disfrutado de nuestro artículo. ¡Hasta pronto!