When mentioning CSS Custom Properties here on bram.us I do tend to name them like that — and not CSS Variables — as that’s their official name.
I always thought the terms could be used interchangeably — with CSS Variables simply being the unofficial name — but as detailed by Šime Vidas on Web Platform News that’s not the case:
The spec distinguishes the two terms: A custom property is not a variable, but it defines a variable. Any property can use variables with the var() function whose values are defined by their associated custom properties.
Fun pen by Jakob Eriksen in which he combines Emoji and CSS Custom Properties to create an Emoji Customizer.
The reason that this works is because of the fact that emoji can have modifiers. Skin Tone and Hair, as used in the demo above, are such modifiers. Using the ZWJ ("\u200d") you can glue all parts together so that they become an “Emoji ZWJ Sequence”, yielding a new Emoji.
🤓 My favorite Emoji ZWJ Sequence is the Rainbow Flag (🏳️🌈). It literally is the combination of a white flag (🏳) and a rainbow (🌈).
Movement in nature doesn’t happen all at once. Imagine a flock of birds taking off, raindrops splashing on the ground, or trees bending in the wind. The magic of these moments comes from many small movements overlapping and converging. I wanted to bring this natural movement into my web animations.
Instead of setting an incremental transition-delay on each :nth-of-type() element to achieve this effect, a different approach was taken: the transition-delay was set once and CSS Custom Property is used as a multiplier to increase that delay per element.
Nice hack by Cassie: she uses counter-reset as a temporary storage space so that the value of a CSS Variable it can be used inside generated content (e.g. with the content property).
I was trying to display the numeric value stored in a CSS variable inside generated content… Turns out you can't do that. But you can do this…https://t.co/VCJ5wa7bww (not saying you should, but you could)
As Roman notes though, this isn’t great when it comes to a11y:
This solution is not really a solution, but an experiment, and can be bad for accessibility — right now its not possible to reorder stuff in a way it would be accessible with keyboard (without confusing teleporting focus) or screen readers.
Stephanie Liu has replicated the native Slack theming capabilities in the browser using CSS Variables . The essence of the demo is actually quite simple: define the variables on the :root level, and use ‘m where needed.