Now we can do whatever we want in our code with
You can also go the other direction by using
And while I’m struggling to think of any really good use cases for going this way as well (most things I can think of, you’d just be better off toggling a class), I am sure it is going to open the door up to some awesome stuff in the future for somebody more creative than I am.
##Media Queries - Sharing your breakpoints
The thing I think that would have a really large benefit, is sharing a variable for media query breakpoints. There is often a need to have a component’s functionality change (along with its styles) at different breakpoints. The main way to share the breakpoint values today is to maintain them separately in the media query in CSS and using
So dang. We can’t do that for now. There is a clever trick to testing which breakpoint is active using a hidden pseudo element that has been floating around for a while. It uses
getComputedStyle to access the
content of the pseudo element (sound familiar?). So with custom properties, we no longer have to rely on
content to store a string.
I think this is an improvement over the pseudo element technique. If you want to try it out, I did create a test in Codepen (just remember to use Firefox). Now we just need browser support to come around.