Accès aux propriétés CSS personnalisées non valides à partir de JavaScript

Il est possible de créer des propriétés CSS personnalisées à l'aide du préfixe -. Cependant, ces propriétés personnalisées sont-elles accessibles à partir de JavaScript ?

La réponse est malheureusement non, du moins dans les principaux navigateurs comme Chrome et Firefox. Les propriétés CSS personnalisées avec des noms non valides sont simplement ignorées par l'analyseur CSS. Par exemple, considérons le CSS suivant :

div {
    -my-foo: 42;
}

Même si ce CSS est appliqué à un div, tenter d'accéder à la propriété -my-foo à l'aide de JavaScript ne retournera rien. L'objet CSSStyleDeclaration ne contiendra que des propriétés valides, telles que la largeur ou la hauteur.

Ce comportement est conforme aux spécifications CSSStyleDeclaration. Les spécifications indiquent que l'objet ne doit inclure que des « propriétés spécifiées », ce qui implique que les propriétés personnalisées ne sont pas reconnues. Cependant, certaines implémentations peuvent prendre en charge l'accès aux propriétés personnalisées, mais cela n'est pas garanti.

Si l'accès aux propriétés CSS personnalisées est crucial pour votre application, vous pouvez contourner les limitations de JavaScript en analysant le texte CSS brut. Cela peut être fait en utilisant la propriété innerText de l'élément de style :

document.getElementsByTagName("style")[0].innerText

Bien que cette approche fonctionne, elle n'est pas aussi simple que d'accéder aux propriétés directement à partir de l'objet CSSStyleDeclaration. De plus, cela nécessite une analyse et une manipulation supplémentaires du texte CSS.