Resumen

  • El primer borrador público del W3C, de junio de 2016, propuso registrar desde JavaScript propiedades personalizadas con un tipo, un valor inicial y una regla de herencia; su ejemplo animaba un color en un degradado.
  • El borrador de 2019 incorporó la regla CSS @property. El de 2024 detalló el momento en que se comprueba el tipo y la consecuencia de compartir nombres registrados en todo el documento.

La diseñadora quiere que un degradado cambie del rojo al verde en un segundo. Escribe --stop-color, coloca los dos tonos y pide una transición. La variable acepta casi cualquier equipaje de fichas CSS; el navegador, en cambio, necesita saber qué operación hacer entre la salida y la llegada. Un nombre que contiene “color” suena prometedor, pero no es una declaración de tipo. La candidata se presenta a la entrevista con una maleta llena y el apartado «profesión» en blanco. El degradado cambia de golpe, como si hubiera perdido todos los fotogramas del trayecto.

El primer borrador público de CSS Properties and Values API, del 7 de junio de 2016, preparó ese apartado. Extendía CSS Variables mediante el registro de un tipo, un valor inicial y una elección sobre herencia. En aquel texto, la entrada era CSS.registerProperty() en JavaScript. Su ejemplo registraba --stop-color como <color>, le daba un comienzo transparente, fijaba inherits: false y lo cambiaba al pasar el puntero. Al conocer el tipo, el navegador puede calcular colores entre el rojo y el verde. El nombre de la propiedad no tenía ese poder por sí solo.

El borrador del 9 de noviembre de 2017 siguió desarrollando el registro y la animación de valores tipados. Todavía describía esa conversación mediante la API de JavaScript. Esta parada importa: la conocida regla @property no aparece en los originales capturados de 2016 ni de 2017. Primero surgió la idea de pactar con el navegador qué clase de dato lleva un nombre. Después llegó otra forma de dejar el pacto escrito.

Para el borrador del 25 de octubre de 2019, el autor disponía de dos puertas: la función JavaScript y la regla CSS @property. Dentro de esta última podían leerse syntax, inherits e initial-value. Quien encuentra --radius junto a un círculo puede ver allí mismo que representa una longitud, que empieza en cero y que no pasa automáticamente a sus descendientes. El contrato vive ahora junto a los estilos que le dan uso, sin esconderse necesariamente en un archivo de script.

El texto del 13 de octubre de 2020 conservó ambas entradas y sus ejemplos animados. El premio se ve en los fotogramas: un color recorre otros colores; una longitud atraviesa tamaños intermedios. Un --radius registrado como <length> permite que un círculo pintado crezca de diez a cincuenta píxeles pasando por todos los valores del camino. Al navegador ya no le toca adivinar qué hacer entre dos paquetes opacos.

El borrador del 26 de marzo de 2024 muestra las condiciones exactas. Una regla @property necesita syntax e inherits; cuando la sintaxis indica un tipo concreto y no el comodín universal, también necesita un initial-value válido e independiente de datos calculados para un elemento particular. Las tres respuestas dicen qué valores acepta el nombre, con qué empieza y cómo se comporta con sus hijos. Falta una respuesta obligatoria y la regla entera queda descartada. Una tarjeta de visita a medias no enseña al motor a interpolar.

La comprobación del tipo llega al calcular el valor, no al leer por primera vez la hoja. El propio borrador razona por qué. Un script puede registrar un nombre después de que el navegador haya analizado sus declaraciones. Si tirase en ese primer momento las que parecían inválidas para un tipo aún ausente, tendría que guardar todas las descartadas o volver a analizar la hoja entera al llegar el registro. El control ocurre en la etapa de valor calculado, antes de sustituirlo mediante var(). Hasta la entrevista tiene una cita precisa en el calendario de CSS.

El nombre registrado también sale de su cubículo. El texto de 2024 describe un mapa común para todo el documento, incluso cuando una regla se escribe dentro de Shadow DOM. Entre varias reglas @property válidas para el mismo nombre gana la última por orden de hoja; un registro JavaScript prevalece sobre esas reglas. Dos componentes pueden creer que --radius es propiedad privada de cada uno, pero el navegador necesita una sola definición compartida. El grupo de trabajo reconoce la tensión entre aislar componentes y dejar que la página exterior les envíe valores con un tipo conocido.

El historial de publicaciones del W3C ordena las etapas de 2016, 2017, 2019, 2020 y 2024. La variable salió de la entrevista con un tipo, un punto de partida y reglas para la familia. Ahora el degradado puede viajar del rojo al verde sin saltarse todas las estaciones.