Autoprefixing with CSS Variables
I’d call this a bonafide CSS trick, courtesy Lea Verou.
Don’t miss the comments, in which Sérgio Gomes reminds us this might make it easier to change values in JavaScript, because you could skip worrying about prefixes there. Changing CSS variables in JavaScript is already rather appealing, as the changes will disperse throughout wherever they are used naturally.
And Andrea Giammarchi’s trick, where you create a setup that behaves almost like a @mixin with default values:
* {
--box-shadow:
var(--box-shadow-x, 0)
var(--box-shadow-y, 0)
var(--box-shadow-blur) /* no default, required */
var(--box-shadow-radius, 0)
var(--box-shadow-color, black);
box-shadow: var(--box-shadow, initial);
}
p {
--box-shadow-blur: 8px;
}
p.special {
--box-shadow: 10px 0 0 green;
}Direct Link to Article — Permalink
Autoprefixing with CSS Variables is a post from CSS-Tricks
LEAVE A REPLY
You must be logged in to post a comment.