Las mejores novedades de CSS de 2025, ya compatibles con todos los navegadores

CSS continúa evolucionando, haciendo que el trabajo de los diseñadores y desarrolladores sea aún más rápido, más bonito y más fácil. Las nuevas funciones de CSS ya están disponibles en todos los principales navegadores y simplifican enormemente el trabajo con diseños, animaciones y rendimiento.

En este material aprenderás:

• Qué nuevas propiedades CSS aparecieron en 2025;

• Cómo ayudarán a acelerar el desarrollo de sitios web;

• Cómo aplicarlos con ejemplos de código.

Echemos un vistazo a cada nueva característica con más detalle: qué es, por qué usarla y ejemplos de código.

1. Scrollbar-Gutter y Scrollbar-Color 🖱️

¿Qué es?

• Scrollbar-gutter reserva espacio para la barra de desplazamiento, incluso si el desplazamiento aún no ha comenzado.

• Scrollbar-color permite establecer los colores del control deslizante y el fondo de la barra de desplazamiento.

Por qué usarlo:

• Evitar los desplazamientos de contenido cuando aparece la barra de desplazamiento.

• Hacer que la interfaz sea más estética y acorde a tu diseño.

Ejemplo de código:

.scrollable {
  scrollbar-gutter: stable both-edges;
  scrollbar-color: #444 #ccc;
}

2. ::target-text 🎯

¿Qué es?

Un pseudoelemento que resalta el texto al que se hace referencia mediante un enlace interno (ancla).

Por qué usarlo:

• Mejora la navegación en documentos largos.

• Ayuda al usuario a encontrar rápidamente el lugar correcto después de la transición.

Ejemplo de código:

::target-text {
  background: yellow;
  color: black;
}

3. Diseño de Ruby (ruby-align y ruby-position) 🈚

¿Qué es?

Estilización del texto ruby (pequeñas leyendas explicativas sobre o junto al texto principal).

Por qué usarlo:

• Obligatorio para el diseño de alta calidad de idiomas de Asia Oriental.

• Útil para materiales de formación y consejos.

Ejemplo de código:

ruby {
  ruby-align: center;
  ruby-position: over;
}

4. Relative Color Syntax y light-dark() 🎨

¿Qué es?

• Relative Color Syntax permite cambiar los parámetros de color en relación con otro color.

• light-dark() selecciona automáticamente el color según el tema (claro u oscuro).

Por qué usarlo:

• Facilita el soporte de temas oscuros y claros.

• Gestión dinámica de colores sin código JavaScript adicional.

Ejemplo de código:

.element {
  background: light-dark(#ffffff, #000000);
}

5. Accordions exclusivos 📂

¿Qué es?

Usar el elemento HTML <details> con el atributo name para cerrar automáticamente otros elementos desplegados.

Por qué usarlo:

• Creación de acordeones sin JavaScript.

• Simplificación de la estructura de las preguntas frecuentes y del menú.

Ejemplo de código:

<details name="exclusive">
  <summary>Подробнее</summary>
  Текст внутри панели.
</details>

details {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.5em;
}

6. content-visibility 🚀

¿Qué es?

Una propiedad que permite posponer la renderización de elementos que están fuera de la vista de la pantalla.

Por qué usarlo:

• Acelera significativamente la carga de las páginas.

• Ahorra recursos del dispositivo, especialmente en teléfonos móviles.

Ejemplo de código:

.lazy-load-section {
  content-visibility: auto;
}

7. font-size-adjust 🔤

¿Qué es?

Permite mantener la legibilidad visual del texto cuando se cae en la fuente de reemplazo.

Por qué usarlo:

• Simplifica la adaptación de las fuentes.

• Mantiene las proporciones correctas del texto al cargar fuentes de reserva.

Ejemplo de código:

.text {
  font-family: "CustomFont", Arial, sans-serif;
  font-size-adjust: 0.5;
}

8. transition-behavior 🧩

¿Qué es?

Una nueva forma de gestionar transiciones y animaciones sin necesidad de usar JavaScript.

Por qué usarlo:

• Permite crear complejos escenarios de animación.

• Hace que las interfaces sean más receptivas y animadas.

Ejemplo de código:

.card {
  transition-property: opacity, display;
  transition-duration: 0.25s;
  transition-behavior: allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

9. @property y funciones matemáticas en CSS ➗

¿Qué es?

• @property permite declarar variables personalizadas con tipos de datos y valores iniciales.

• Las nuevas funciones (round(), mod(), rem()) agregan operaciones matemáticas básicas directamente en CSS.

Por qué usarlo:

• Mejora la gestión de los estilos dinámicos.

• Simplifica los cálculos matemáticos sin preprocesadores.

Ejemplo de código:

@property --animation-progress {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

10. offset-position y offset-path 🛤️

¿Qué es?

Permite mover elementos a lo largo de una trayectoria compleja sin la ayuda de JavaScript.

Por qué usarlo:

• Creación de animaciones a partir de curvas sin bibliotecas de terceros.

• Hace que la interfaz sea más dinámica e interesante.

Ejemplo de código:

.move {
  offset-path: path("M10,80 Q95,10 180,80");
  offset-position: 0%;
  transition: offset-position 2s ease;
}

Resumen de las nuevas funciones de CSS 2025 ✨

Conclusión ✅

Las nuevas características de CSS 2025 simplifican el trabajo con el diseño adaptable, mejoran la experiencia del usuario y reducen el tiempo de desarrollo de la interfaz. ¡Todas estas características ya son compatibles con los principales navegadores!

Si quieres aprender a programar aún más rápido y aprender las últimas tecnologías de desarrollo web, prueba nuestra aplicación Kodik para aprender a programar! 🚀 ¡Con nosotros aprender es fácil e interesante!

¡Descarga «Kodik» ahora mismo y empieza a desarrollar tus habilidades de programación! 📚💻