style queries - have any questions or use cases?
I'm planning a series on style queries that will go over the basics of them, footguns, and work-arounds, as well as several practical use cases for them.
- Have you tried using them and run into issues or not seen the point?
- Have you avoided them for reasons outside of browser support?
- Have you used them and have a killer use case that you could share?
8 Replies
Might be worth making an #๐ขannouncements post so it doesn't get lost in the mix :p
But to answer the question: WTH are they? I don't think I've heard of style queries yet!
The examples I have seen don't accomplish anything that isn't already possible by assigning another class. I'm sure there is some benefit of using a CSS variable instead of a class to apply styles, but I haven't seen anything that makes this benefit clear to me.
Never heard of it. I'm now looking at a couple of examples now, and it seems that style queries make it incredibly difficult to grasp what a simple change might cascade into.
When you change a class, you just full text search for that class name and you have a somewhat complete list of code places a change might influence.
With style queries, you have no idea what a simple change of colours might influence in other places, and how those other places, again, influence some other style queries, and so on.
For a quick hack this is probably very cool, but I'd be a bit cautious plastering my css files with it.
yeah, that's definitely one of the sticking points that I plan to address, because they definitely feel that way at first ๐
Don't really feel like it's worth an announcement ๐คท - I think most people will fall into the "haven't heard of it" category.
as a quick preview, the advantage is you can conditionally apply the changes.
So, here I'm using a media query and a :nth-child check to change the layout of the cards.
It's like toggling a class on/off if you meet specific criteria.
https://codepen.io/kevinpowell/pen/qEdEpgV/b68a465abe3b83f05ad2da2174959204
those are container queries with the
style() thingy, right?
ive tried these with mixed results
in some things, it worked amazingly - in others it didnt work at all
i dont have examples of it not working
but ive used it to apply a light/dark theme with meh results
something like this:
that's one of the examples I've already set up to use for a video ๐
so much better than having to do the same custom props twice
it is, but somehow i failed the 2nd time i tried to implement this
You can also detect the state of
color-scheme with style queries, to make it a true single source of truth to also change things that are not colors (logos, font weight etc). (And I just realized this also works with if() making it even more powerful! https://codepen.io/Oddbj-rn-vernes/pen/jEPbxPz)