3 ms·
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 se
by simple10 2y ago
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 https://caniuse.com/?search=%40property
- andypants 2y agoIf anybody wants to try the demos in firefox, go to `about:config` and toggle on `layout.css.properties-and-values.enabled`.
- simple10 2y agoHere'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.