Getting Hardboiled with CSS Custom Properties
5 Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
Ralph
Gunnar Bittersmann
Custom properties are a powerful thing—thank you for spreading the word. They are so powerful that I think “Of course we could use a post-processor plugin to turn Custom Properties into plain CSS” isn’t always the case. Of course a post-processer can deal with simple substitutions, but will it be able to deal with more complex calculations, as done for example in this pen tag stripes? And a CSS post-processor has no chance to get the values when custom properties are set from the outside—be it with JavaScript or in the mark-up, as in that pen responsive table.
You surely can check browser support, but you don’t have to in this case:
—color-text-default : black;
body { color : black; color : var(—color-text-default);
}
Browsers that don’t support custom properties would ignore that declaration and use the fallback. Using @supports() makes sense when setting other properties than the one in the condition, e.g.
body { background: red }
@supports (—foo: “”) { body { background: green } }
“Dumb browsers look the other way”—progressive enhancement, yay! As Jeremy Keith put it into words: “you’re free to spend all your time experimenting with the latest and greatest browser technologies, secure in the knowledge that even if they aren’t universally supported yet, that’s okay: you’ve already got your fallback in place.” I’m a fan.
Mihai
So simple yet not obvious. Thanks for the idea.
Robin Osborne
1. How did I not already know about custom properties?! Thank you.
2. “websites need not look the same in every browser” – damn right.
Great article, loving the b&w IE version of the site too.
prisca
Andy, thanks for a great article :)
And awww… those screenshots take me back… loved the idea then, reference it in my teaching lots – and still love the idea now – so nice to see them again :)
IMO creating fallbacks for custom properties defeats the purpose of using custom properties in the first place. Isn’t the goal of custom properties to make a global change in one spot in your CSS for example the text colour? Now you still have to change all the fallback text colours in all the CSS blocks you’ve set them, so what’s the point of using custom properties?