Nuevas funcionalidades de CSS que deberías empezar a usar ya

Con las nuevas funcionalidades que te presento aquí, diseñar para la web no solo es más fácil, sino también más inteligente, expresivo y potente. Desde variables tipadas hasta mejoras en las animaciones y el manejo de temas, estas son algunas de las novedades de CSS que deberías empezar a usar hoy mismo.

1. Centrar contenido sin Flex ni Grid

¿Recuerdas lo engorroso que era centrar un elemento antes de Flex o Grid? Aunque estas herramientas facilitaron mucho la tarea, a veces usarlas para algo tan simple resulta excesivo.

Ahora, CSS introduce una forma aún más sencilla gracias a align-content en elementos de bloque:

¡Así de simple! Sin contenedores adicionales ni estructuras complejas.

2. Variables con tipos definidos gracias a @property

Las variables CSS (--mi-variable) son muy útiles, pero hasta ahora carecían de validación de tipo. Podías asignar cualquier valor, incluso si era inválido.

Con la nueva regla @property, puedes declarar variables tipadas, con valores por defecto y reglas de herencia:

Esto permite, por ejemplo, que una rotación solo acepte ángulos:

Este sistema evita errores y mejora la robustez del código CSS.

3. Estilo inicial con @starting-style

El temido Flash of Unstyled Content (FOUC) es un clásico: el contenido aparece mal estilizado durante el primer render.

Con @starting-style, puedes definir el estado visual inicial de un elemento antes de que se apliquen las transiciones:

Este pequeño cambio garantiza transiciones suaves y evita saltos visuales molestos en la carga inicial.

4. Nuevas funciones matemáticas en CSS

Hasta ahora, calc() era la única herramienta matemática en CSS. Pero llegan nuevas funciones como round(), mod() y rem() que amplían el horizonte:

Estas funciones permiten cálculos más avanzados, útiles en layouts complejos o generativos, sin necesidad de JavaScript.

5. Temas claro/oscuro con light-dark()

Tradicionalmente, los temas se gestionaban con media queries:

Ahora, puedes simplificar esto con light-dark():

Una sola línea define el comportamiento en ambos modos. Más claro, más limpio y más fácil de mantener.

6. Validaciones más naturales con  :user-valid y :user-invalid

Antes, :valid y :invalid aplicaban estilos tan pronto como se cargaba la página, lo cual no siempre era deseable.

Las nuevas pseudo-clases :user-valid y :user-invalid aplican los estilos solo después de la interacción del usuario, evitando validaciones prematuras:

Una mejora pequeña pero muy útil para una mejor experiencia de usuario.

7. Animaciones de tamaño fluidas con interpolate-size

Animar alturas, anchos o paddings ha sido históricamente complicado. Solíamos usar max-height, trucos de JavaScript, o asumir valores fijos.

Con interpolate-size, el navegador calcula dinámicamente el tamaño desde el inicio al final de la animación, incluso cuando el tamaño es auto.

Esto mejora enormemente las transiciones de acordeones, paneles desplegables o modales.

Conclusión

Todas estas nuevas características están soportadas en los principales navegadores modernos, como Chrome, Firefox, Safari y Edge. Así que no tienes que esperar a “cuando sea compatible”. Ya puedes llevar tus estilos CSS al siguiente nivel hoy mismo.