DEV Community

Cover image for Harnessing The Power Of CSS Variables With JavaScript

Harnessing The Power Of CSS Variables With JavaScript

Abdulqudus Abubakre on July 03, 2020

CSS Variables have been around for quite some time now and I have to say, it has been really helpful. Prior to the introduction of CSS variables, f...
Collapse
 
galaxy4public profile image
(GalaxyMaster)

The fallback for older browsers is misrepresented here. The construct presented here, var(--variable, default), is for when a variable is undefined. The fallback for older browsers that do not support variables would be defining the same attribute without a call to var() before a more modern definition, so the cascade will take care of unknown value by respecting the prior definition.

Collapse
 
ibn_abubakre profile image
Abdulqudus Abubakre

oh wow, thanks for the correction

Collapse
 
favouritejome profile image
Favourite Jome

Thanks for the hint, based on the post I was able to make a linear gradient change.

Collapse
 
ibn_abubakre profile image
Abdulqudus Abubakre

haha...nice. Would love to see it

Collapse
 
favouritejome profile image
Favourite Jome

Do you mean the code?

Thread Thread
 
ibn_abubakre profile image
Abdulqudus Abubakre

Just the implementation. I think I've seen it on Twitter. Nice work man 💪🏻💪🏻

Thread Thread
 
favouritejome profile image
Favourite Jome

Yh

Collapse
 
souksyp profile image
Souk Syp.

Would that work with multiple css files ?

Collapse
 
vaaski profile image
vaaski

pretty sure, yes

Collapse
 
kennielarkson profile image
LAWAL ABDULRAFIU KEHINDE

This was a very straightforward tutorial on CSS variables.
Just all that is needed to start using the technology.
I’m glad I read this.
Good read.

Collapse
 
timothyokooboh profile image
timothyokooboh

Very nice article. Easy to understand.

Collapse
 
cepreu5 profile image
cepreu5 • Edited

Don't insert a space between var and ( as var (--primary) will not work while var(--primary) will.

Collapse
 
cdsaenz profile image
Charly S.

Great article thanks!

Collapse
 
20nick06 profile image
Nick

Awesome article thanks for the information

Collapse
 
damilolaaaron profile image
dAMi

Nice article