Cool, right? But still, how actually useful is that? What are the major use cases? I think we’re still seeing those shake out.
Imagine we allow the header and footer background of our site to be customized.
The value is plucked out of localStorage and used when the page loads. A default value is also set (in CSS), in case that doesn’t exist.
What makes the above demo so compelling, to me, is how little code it is. Maintaining this as a a feature on a site is largely a CSS endeavour and seems flexible enough to stand the test of time (probably).
Not unusually, I was way behind on this one.
Lots of people think of theming as one of the major use-cases for CSS Custom Properties. Let’s look at some other folks examples.
Giacomo Zinetti has the same kind of color-picker implementation
Harry does a lot of consulting, and to my surprise, finds himself working with companies that want to do this a lot. He warns:
Theming, the vast majority of the time, is a complete nice-to-have. It is not business critical or usually even important. If you are asked to provide such theming, do not do so at the expense of performance or code quality.
Which meant that you could set those variables and have the component take on new colors.
Support and fallbacks
Support has gotten pretty good recently:
Green indicates full support at the version listed (and above). Yellow indicates partial support. Red indicates no support. See Caniuse for full browser support details.
Mobile / Tablet
Opera Mini and IE are notably missing. We already covered the idea of a fallback through setting a valid non-variable property before the one using a Custom Property.
Normally we’d be able to count on @supports to help us with modern CSS features, but Custom Properties are tricky in that they just stand for other values, so can’t really be trusted with @supports. You could probably use a stand-in, like: