DEV Community

How to make responsiveness super simple with CSS Variables

Per on August 06, 2019

Click the image to get to the free full-length CSS Variables course. If you haven’t heard of CSS Variables before, it’s a new feature of CSS which...
Collapse
 
nicolalc profile image
Nicola

The only issue related with css variables is IE (every time is IE the problem) compatibility.

I prefer to use vars only with SCSS, because I need to give IE compatibility for my projects.

Anyway nice examples, I love the new css grid system, expecially if combined with flexbox!

Collapse
 
nuxodin profile image
Tobias Buschor

You can try this polyfill:
github.com/nuxodin/ie11CustomPrope...

Collapse
 
bayuangora profile image
Bayu Angora • Edited

Also, CSS variable can't be rendered by Opera Mini with extreme mode. We have to use normal mode to render CSS variable with Opera Mini.

Collapse
 
nicolalc profile image
Nicola

Consider than I've never tested it on a mobile browser because is still a WIP, anyway thanks for the feedback.

Collapse
 
garrett profile image
Garrett / G66

This is exactly the post I needed today. Thank you!

Collapse
 
sawzarnilinhtay profile image
Zarni

"The only issue related with css variables is IE (every time is IE the problem) compatibility.

I prefer to use vars only with SCSS, because I need to give IE compatibility for my projects.

Anyway nice examples, I love the new css grid system, expecially if combined with flexbox!" by Nicola. ->>me too

Collapse
 
vusi47dev profile image
Vusi

Thanks a lot, this was really helpful because I've been struggling with responsiveness for a while now. Didn't realize how powerful CSS variables are.

Collapse
 
ryandotfurrer profile image
Ryan Furrer

Great post! I've just started messing with CSS Variables and hadn't thought of using them this way. It's so much cleaner and IMO makes responsiveness much less daunting.

Collapse
 
zachsaucier profile image
Zach Saucier

Or you could use this exact same approach with the rem unit and have better browser support.

Collapse
 
sebbdk profile image
Sebastian Vargr

Assigning css variables with media queries.. Bloody brilliant! Never thought of that. :)

Thanks!

Collapse
 
mjcoder profile image
Mohammad Javed

Awesome article. Variables are the way to go! Forget IE! 😝

Collapse
 
gnio profile image
Gnio

When a 2 minutes read beats rage-quitting.

Thank you!