DEV Community

What no one told you about CSS Variables

Temani Afif on April 08, 2021

CSS Variables are great but do you know everything about them? In this post, I will highlight a few quirks around CSS variables that no one talks...

Read full post

Nathaniel • Apr 8 '21

Love the invisible characters thing.
Just worked out using vars for prefixed properties can save a lot of data, e.g.:

.pattern {
    --stripes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpattern id='s' width='4' height='4' viewBox='0 0 4 4' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Cpath d='M -1 2 h6 v2 h-6z'/%3E%3C/pattern%3E%3Crect fill='url(%23s)' height='100%25' width='100%25'/%3E%3C/svg%3E");
    -webkit-mask-image: var(--stripes);
    mask-image: var(--stripes);
}

GrahamTheDev • Apr 8 '21 • Edited

Loved the last one about using emojis as CSS variable names. I was today years old when I learned about that one!

I can imagine someone has already done this but a library where all properties are emojis would be pretty funny, completely unusable, but funny!

Number 4 is one I have been using extensively, you are right that one is a real life saver if you want to bind the :root CSS var to a slider for example.

Great list and beautifully written, easy to follow! ❤🦄!

Atulit Anand • Apr 8 '21

Never heard of empty variables before.
I'm curious what can be use cases of it.
Thanks for the article mate.
Always something new to learn.

Comment hidden by post author - thread only accessible via permalink

Siddharth • Apr 11 '21 • Edited

There's a lot of stuff you can do with it (if/else, AND, OR, NOR, XOR). I'm thinking of writing an article on this.

Edit: here is the article

Krish Gupta • Apr 18 '21

I think you misspelled linear-gradient as linaer-gradient at some places

Temani Afif • Apr 18 '21

it's done on purpose

Krish Gupta • Apr 18 '21

But Why?? Must be any reason

Temani Afif • Apr 18 '21

read the article to understand :)

Krish Gupta • Apr 18 '21

Understood but I didn't understand how they make invalid valid?

Temani Afif • Apr 18 '21

You can see that the browser is no more crossing the property and using the previous one. An invalid value will be ignored by the browser which is not the case here. It's considered valid and only at "computed time" the value will be invalid

NoChance13 • Aug 5 '21

Great article! You did great with explaining the complexities of vars.

One note, it's spelled "unitless" not "uniteless". :-)

Shahed Nasser • Apr 8 '21

Pretty interesting, especially #3. I imagine if you discovered this one because of a situation happening to you, then it must have been a nightmare to debug it!

Temani Afif • Apr 8 '21

Indeed, it's a nightmare to debug especially when you have a code like the example I am showing in #4 where all the properties are defined with CSS variables and no hint from the browser which one is not good 😕