[simple10]

The article uses custom css @properties which are awesome and have 88% browser support [1].

One thing to watch out for is differences in how browsers handle setting the fallback initial-value. Chrome will use initial-value if CSS variable is undefined OR set to an invalid value. Firefox will only use initial-value if the variable is undefined. For most projects, this won't be an issue, but for a recent project, I ended up needing to use javascript to set default values in Firefox to iron out the inconsistency between browser implementations.

[1] https://caniuse.com/?search=%40property

[andypants]

If anybody wants to try the demos in firefox, go to `about:config` and toggle on `layout.css.properties-and-values.enabled`.

[simple10]

Here's how to set the property value in Javascript if needed:

Get property value defined in :root{}:

getComputedStyle(document.documentElement).getPropertyValue("--some-custom-css-var");

Set property value:

document.documentElement.style.setProperty("--some-custom-css-var", "some value");

This can work as a polyfill for browsers that do not yet have CSS @property support enabled.