What is CSS Quickes?
I started to ask my beloved community on Instagram: "what CSS properties are confusing for you?"
In "CSS Quickies"...
For further actions, you may consider blocking this person and/or reporting abuse
YES! I first ran across native CSS variables about a month ago, and was super excited - finally variables come to CSS without a preprocessor! This post is a nice example of where they can be used. Thanks!
(for those curious, here's where you can check what browsers support css variables: caniuse.com/#feat=css-variables)
And for IE11 i made this polyfill (linked on caniuse)
github.com/nuxodin/ie11CustomPrope...
Oh, nice!
Thanx.
Here the Demo in IE11 with just adding the polyfill:
jsbin.com/pofetiyaha/1/edit
Nice I will check it out later 👍😊
They are really awesome!
Oh, good point! I should have included the caniuse link! They are for me just so integral and normal to use that I don't even think about that there can be some issues with older browser 🙈
Even DEV uses CSS variables for theming. 🔥 It goes through SASS, but there is a mixin for generating theme styles via CSS properties.
That's a cute mixin.
Oh cool, I didn't know that :)
I really need to look some time into the dev.to code 😀🖖
But yeah I think SASS and LESS have some sort of plugins that let you write CSS variables :)
Great article! I'm adding this to my students reading list this year. In your demo I don't think you need to set the background of .theme-container.light to var(--c-background) again. Or am I missing something?
I think you are talking about this example:
So this is the
.theme-container
and yeah here it looks confusing but imagines you have a bigger app and want to use the right background again.As you can see here you would use
--c-background
because you have set it up in the container with--c-background: var(--c-light-background);
This makes the code more extendable. Think now you would have a 3 or 4 or 5 theme you would only need to change the code in one place.
.theme-container.<THEME NAME>
.so you can have a
solarized
theme or apink
theme and so on.Yeah I get that. I'm talking about the background property on .theme-container.light. I commented out to show what I mean.
Ahh okay!
Now I understand.
There is no technical reason for that.
It is just to make it more clear to other people what is going on here.
Thank you so much, I was recently struggling to make a switch like that and just couldn't wrap my head around making one. I would like to implement your approach to creating one for my project heavily inspired from this if you don't mind. Also I'm glad I learnt about CSS variables along the way.
Hey glad i could help!
Of course, you can use it :)
And drop a link here in the comments to your project so I and other people can see it ✌😀
Awesome!! So happy this is native now! Could use a proofread for email grammar, but good article.
Thanks.👍😊
BTW I used grammerly pro for checking 😉
"I will explain one CSS property in deep." You mean to say "depth" in place of "deep".
"Now this would produce our desired outcom." The word is "Outcome", outcom isn't a word.
"Puh this is a lot of code" I'm not sure "puh" is a word.
There was at least one more too.
Thanks, I changed it.
"puh" is a thing in Germany :D
I was thinking that Grammarly would find stuff like that.
I would too! Glad to help, thanks again for the article!! Awesome news!!!!
Thank you 👍 ☺️
I still didn't get why set other custom properties inside .theme-container and .theme-container.light... wouldn't be easier to use the custom properties in the :root throughout your stylesheet or did the local custom properties of those divs had another function that I didn't get? Nice post! Keep tem coming! I believe you'll need more than one quickie to talk about grid though lol cheers!
What is
.slider.round:before
style for?For me page looks the same with and without it
great work
Thank you, much appreciated.
Have a great week!