Résumé

  • Le premier projet public du W3C, en juin 2016, proposait d’enregistrer une propriété personnalisée en JavaScript avec un type, une valeur initiale et une règle d’héritage. Son exemple faisait varier la couleur d’un arrêt de dégradé.
  • Un projet de 2019 a ajouté @property dans CSS. Celui de 2024 détaille la vérification au moment du calcul des valeurs et la portée commune des noms enregistrés dans tout le document.

La graphiste veut voir un dégradé passer doucement du rouge au vert. Elle dépose les couleurs dans --stop-color, puis demande une transition. La variable accepte les deux colis avec une politesse parfaite. Mais un sac de jetons CSS n’explique pas au navigateur comment parcourir les teintes intermédiaires. À l’entretien d’embauche, --stop-color sait montrer son nom ; la case « métier » du formulaire reste vide. Le dégradé saute d’une couleur à l’autre comme un danseur qui aurait oublié tous les pas du milieu.

Le premier projet public CSS Properties and Values API du 7 juin 2016 a proposé d’inscrire ce métier. Il prolongeait les variables CSS en permettant à une propriété personnalisée d’annoncer son type, sa valeur initiale et son comportement d’héritage. La porte d’entrée était alors la fonction JavaScript CSS.registerProperty(). L’exemple --stop-color précisait <color>, une valeur initiale transparente et inherits: false, puis changeait la couleur au survol. Une fois la nature de la valeur connue, le moteur peut construire le trajet entre rouge et vert. Le nom de la variable n’avait jamais suffi à lui seul.

Le projet du 9 novembre 2017 a poursuivi cette piste de l’enregistrement et de l’animation typée. Les textes conservés à cette date passent toujours par JavaScript. Cette nuance chronologique évite d’offrir à 2016 une règle CSS qui n’apparaîtra que plus tard. Au départ, l’idée centrale est un accord explicite avec le navigateur sur la nature d’une valeur. Le lieu où écrire cet accord reste à élargir.

Le projet du 25 octobre 2019 ouvre une seconde porte : @property dans la feuille CSS, à côté de CSS.registerProperty() dans le script. Une règle peut annoncer syntax, inherits et initial-value. L’auteur qui rencontre --radius près d’un cercle voit désormais qu’il s’agit d’une longueur, qu’elle commence à zéro et que les enfants ne l’héritent pas par défaut. Le nom reçoit une fiche lisible dans le même langage que les styles qui l’utilisent.

Le projet du 13 octobre 2020 conserve les deux méthodes et les exemples d’animation. Une couleur peut traverser des couleurs. Une longueur peut traverser des tailles. Avec --radius déclaré comme <length>, un cercle dessiné peut grandir de dix à cinquante pixels en montrant tout le chemin. Ce n’est plus une variable qui passe de « petit » à « grand » par téléportation ; le navigateur dispose d’une valeur à calculer à chaque image.

Le projet du 26 mars 2024 détaille les conditions de cette promesse. Une règle @property valide doit donner syntax et inherits. Si la syntaxe désigne un type précis, il faut aussi une initial-value valable et indépendante des calculs propres à un élément. La fiche de poste répond ainsi à trois questions : quels nombres ou couleurs accepter, où commencer, et que reçoivent les descendants ? Quand une réponse indispensable manque, la règle d’enregistrement est ignorée. Le navigateur ne peut interpréter une valeur de longueur avec une moitié de contrat.

La vérification du type attend toutefois le calcul de la valeur. Le texte de 2024 explique pourquoi : un script ou une autre feuille peut enregistrer un nom après la première lecture des déclarations. Si le navigateur jetait aussitôt les valeurs jugées incompatibles avec un type encore inconnu, il faudrait conserver toutes ces déclarations rejetées ou relire toute la feuille quand le type arrive. Le contrôle a donc sa place dans la chaîne de calcul, avant la substitution par var(). Même un entretien d’embauche doit se tenir au bon bureau.

La portée du nom réserve une dernière surprise. Les enregistrements sont communs au document, y compris ceux écrits dans un arbre Shadow DOM. Pour plusieurs règles CSS valides portant le même nom, la dernière dans l’ordre des feuilles l’emporte ; un enregistrement JavaScript du même nom passe avant elles. Deux composants qui donnent à --radius des contrats différents ne disposent pas chacun de leur royaume privé. Le groupe de travail expose le dilemme : un composant cherche son espace local, tandis que la page extérieure veut pouvoir lui envoyer une valeur que les deux parties comprennent.

L’historique de publication du W3C relie les étapes de 2016, 2017, 2019, 2020 et 2024. Au bout de la ligne, la variable a présenté son dossier : type, point de départ, héritage. Le navigateur peut enfin lui confier un dégradé qui marche du rouge au vert sans oublier le trajet.