DEV Community

CSS Variables Cheat Sheet

Milos Protic on April 21, 2019

Originally posted on devinduct. Introduction CSS variables are an extremely useful feature and they enable us to do things we were co...
Collapse
 
melnik909 profile image
Stas Melnikov

Nice post. But you can't use the main element inside of the article element. The spec says: "A hierarchically correct main element is one whose ancestor elements are limited to html, body, div, form without an accessible name, and autonomous custom elements. Each main element must be a hierarchically correct main element."

html.spec.whatwg.org/multipage/gro...

Please update your example. Thank you

Collapse
 
proticm profile image
Milos Protic

Hi, glad you liked it.

I have this information in my head, not sure from where, but back when HTML5 was released the main element was allowed inside article, or not? The idea was that each article could have its header, main and footer section...I wasn't aware of this update...if it was an update in the first place :)

If the main element wasn't allowed inside the article element from the very beginning, thank you for clearing this out...I had the wrong information.

I've updated the article.

Collapse
 
melnik909 profile image
Stas Melnikov

I think that it was from the beginning because the main element always contained unique content. Thank you!

Collapse
 
horus_sky profile image
Cedric W

This is a great to-the-point post. My only problem with CSS variables (custom properties) is the fallback (specifically for IE 11 usage). If you have to apply a second parameter, it defeats the purpose of the variable itself. For instance, if you ever have to update the value of the variable, you have to update every instance of the var function throughout your code -- its not so automagic. Yes, you can find and replace, but still a hassle if your are updating more than one css variable. This is the only reason I'm sticking with sass vars. I wish there was a way to add a fallback in the declaration rather than the var function. I know it sounds silly since the value is basically there, but declaring the value within the function seems just as silly.

Collapse
 
nuxodin profile image
Tobias Buschor

You can try this polyfill, it just works:
github.com/nuxodin/ie11CustomPrope...

Collapse
 
proticm profile image
Milos Protic

Thank you. I agree with the point you made here. Definitely it has more sense to define the fallback value next to the variable itself. It is easier to maintain as you pointed out.

Collapse
 
papaponmx profile image
Jaime Rios

Sweet and short, thanks for sharing.

Collapse
 
proticm profile image
Milos Protic

Thanks. No problem

Collapse
 
latheresienne profile image
Latheresienne

Good article. Dynamic usage is very clear. Thanks!

Collapse
 
proticm profile image
Milos Protic

No problem. I'm glad I could help.

Collapse
 
emmabostian profile image
Emma Bostian ✨

This is great! I could've used this today :)

Collapse
 
proticm profile image
Milos Protic

Thank you very much! I'm glad I could help :)