Home > Designing, Others > Autoprefixing with CSS Variables

Autoprefixing with CSS Variables

September 9th, 2016 Leave a comment Go to comments

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 ArticlePermalink


Autoprefixing with CSS Variables is a post from CSS-Tricks

Be Sociable, Share!
Categories: Designing, Others Tags:
  1. No comments yet.
  1. No trackbacks yet.