{}
Aprende diseño y desarrollo web
Cursos gratuitos interactivos

@property: custom properties tipadas y animables

Aprende a registrar variables CSS con `@property` para que el navegador entienda su tipo real y pueda animarlas de forma fiable en gradientes, barras, ángulos y temas dinámicos.

Una custom property normal es flexible, pero el navegador la trata como texto. Eso basta para reutilizar valores, no para interpolarlos con precisión.

Con `@property` registras su sintaxis, si hereda y el valor inicial. Ese contrato hace que deje de ser una cadena opaca y pase a comportarse como un dato real: ángulo, porcentaje, número o color.

La consecuencia práctica es enorme: puedes animar variables de diseño sin meter JavaScript en medio ni duplicar reglas con valores fijos.

  • No es una nueva forma de declarar tokens; es una forma de volverlos entendibles para el motor de estilos.
  • Sin registro, dos valores como `0deg` y `360deg` viven dentro de una cadena. El navegador no siempre puede construir una transición suave entre ambos.
  • Con `@property`, la variable tiene tipo. Entonces sí puede interpolar y validar, igual que hace con propiedades nativas.
  • Sintaxis: define el tipo esperado, por ejemplo `<angle>` o `<percentage>`.
  • inherits: decide si el valor viaja por herencia.

Qué cambia cuando registras una variable

No es una nueva forma de declarar tokens; es una forma de volverlos entendibles para el motor de estilos.

Sin registro, dos valores como `0deg` y `360deg` viven dentro de una cadena. El navegador no siempre puede construir una transición suave entre ambos.

Con `@property`, la variable tiene tipo. Entonces sí puede interpolar y validar, igual que hace con propiedades nativas.

  • Sintaxis: define el tipo esperado, por ejemplo `<angle>` o `<percentage>`.
  • inherits: decide si el valor viaja por herencia.
  • initial-value: evita estados ambiguos cuando nadie ha escrito la variable todavía.

Registro mínimo viable

La forma más útil de aprenderlo es con un caso que luego puedas animar.

Patrones donde realmente luce

No hace falta usarlo en todos los tokens del sistema. Sí en los que quieras animar o validar mejor.

Cuándo no conviene abusar

Registrar variables no sustituye el criterio de diseño del sistema.

Si una variable solo existe para reutilizar un valor estático, una custom property normal suele bastar.

Reserva `@property` para lo que gana de verdad con tipado o animación. Así el código sigue claro y el concepto conserva peso pedagógico.

CSS
48

@property: custom properties tipadas y animables

Aprende a registrar variables CSS con `@property` para que el navegador entienda su tipo real y pueda animarlas de forma fiable en gradientes, barras, ángulos y temas dinámicos.

Test de Desarrollo Web (CulTest)

Código del tema: @property --angle { syntax: "<angle>"; }

📘 Teoría

Qué cambia cuando registras una variable

No es una nueva forma de declarar tokens; es una forma de volverlos entendibles para el motor de estilos.

Sin registro, dos valores como `0deg` y `360deg` viven dentro de una cadena. El navegador no siempre puede construir una transición suave entre ambos.

Con `@property`, la variable tiene tipo. Entonces sí puede interpolar y validar, igual que hace con propiedades nativas.

  • Sintaxis: define el tipo esperado, por ejemplo `` o ``.
  • inherits: decide si el valor viaja por herencia.
  • initial-value: evita estados ambiguos cuando nadie ha escrito la variable todavía.

Registro mínimo viable

La forma más útil de aprenderlo es con un caso que luego puedas animar.

Patrones donde realmente luce

No hace falta usarlo en todos los tokens del sistema. Sí en los que quieras animar o validar mejor.

1

Gradientes y ángulos

Con `` puedes rotar conic gradients o direcciones sin reescribir toda la declaración.

2

Progreso y métricas

Con `` una barra, un gráfico radial o un relleno parcial ganan animación nativa y legible.

3

Temas dinámicos

Con `` o `` puedes hacer variaciones más ricas sobre hue, contraste o intensidad visual.

Cuándo no conviene abusar

Registrar variables no sustituye el criterio de diseño del sistema.

1

Si una variable solo existe para reutilizar un valor estático, una custom property normal suele bastar.

2

Reserva `@property` para lo que gana de verdad con tipado o animación. Así el código sigue claro y el concepto conserva peso pedagógico.

🧪 Aprende probando

Ejemplo Demo interactiva: tres tipos registrados Explora cómo `@property` desbloquea un cambio de tono, una rotación angular y una barra de progreso sin JavaScript.
⌄

🏁 Retos

Reto Reto: registrar una barra de carga Convierte `--progress` en una variable de porcentaje y úsala para animar el relleno.
⌄

🧰 Recursos

Enlaces útiles

MDN - @property MDN - Using CSS custom properties
Test

Comprueba tus conocimientos con un test sobre CSS.

Test de CSS
Recursos del curso 78
📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets
‹
Lección 47
Animaciones CSS: transiciones, keyframes y micro-interacciones
Lección 49
interpolate-size: animar height auto sin hacks
›

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com