Getting started with CSS Style Queries

Key Takeaways

Style queries are going to change how you write your CSS. And to celebrate how awesome they are and also to raise a bit of awareness about them, in this video I'm kicking off a little bit of a minieries called Style Query Spotlight. If you aren't aware of what style queries are, or if you've heard about them, but you just don't know what they are or how they work, well, then you're definitely in the right place because in this video, we're going to be going over the absolute basics of them, working our way up to some practical use cases for them, and answering one really important question when it comes to style queries of couldn't we just do this with a modifier class instead? And the answer to that is sometimes yes. And that is actually the better solution or the way that you should be going. But they also make things possible now that were literally impossible before. So, we're going to be exploring all of that and we're going to be doing it by jumping in and starting with this very simple example just to look at the syntax and understand a little bit of how they work before we dive into more practical examples. So, we have three divs with some children in here. And so, just these child divs that are in there, some childs, our children that are right there. And those have a background that's that bright color and then a darker background on the main part of the parent. But what happens if we have something like this middle one where I have an accent modifier class there and we go and we turn on that var of our accent right there and now we can't see anything cuz the children have the same background color and I don't want that to happen. I want to be able to see my children and there's a few different approaches we could use to fix this and style queries are now one of them. So I'm going to come down here into my child selector and what I'm going to do is create a style query. And to make a style query, we do an at container because style queries are building off of container queries. If you've never seen or heard of or used container queries, that's perfectly fine. You can still understand how uh style queries work. But I'll put a link in the description to a video where I also look at container queries for querying sizes of containers. But here I'm going to have an at container and then I'm going to do a style function like this. And then I'm going to do an open and close curly brace. And in here, technically speaking, according to the spec, at least, we could do something like background of purple. And this is supposed to work. This is how it's outlined in the spec. But currently, no browsers actually support this. And if you want to check what the current state of things are, there is a browser support table linked in the description. Uh, but when we see this at container style background purple, yeah, that should work, but currently doesn't. And instead of that, the only thing we can currently query are custom properties. So right here I have a BG. So I can actually query what that BG is. So I can say BG and look for it to be something specific. I can say is it red? And it would actually check for that. So actually let's start with that. Let's say our BG is actually red. And you can see this one changed a little bit to red. And then I could come here and I could say that the background is actually going to be white instead just as a quick example. And now you can see that we can now see our our child divs in there once again. And that's really the basics of how these work. You query something and then it works. So if we go back to this being a var accent of accent like that. And this is how I prefer using them anyway cuz here then I can just come in with my var of accent. This looks just a little bit easier to read, right? If my background is set to accent, then we're going to change the background of this. And the important thing is we're always looking at the container style. Is the container style a bgf accent? We're not looking at the child here. And that is one of the constraints of using style queries is we cannot check the style of the element itself. We can only check for styles coming from outside of the child. It could be the direct parent, but it could also come from other ancestors as well. Uh especially because custom properties are inherited, right? So, I'm checking right now. If this is here, you could we're going to actually see an example shortly where we can check for things a little bit further off as well. Uh, but yeah, that's the very basics of how they work. Now, obviously, when you're doing this, you're not going to be creating some strange like traffic light things like this to use it probably. You never know. Uh, but you'll probably be using them in other situations. So, here's one that I came up with where I might want to use them where I have these cards and I have the same set of cards two times here. We'll move myself out of the way for the time being. And with these two sets of cards, if we wanted to, I've actually created something called glassy here. And this to me is how I really like to use style queries. Instead of doing something where I'm looking for a specific value, I'm more creating like toggles that I'm going to be using. So the example here, and we haven't used it anywhere, but you can see here on my article preview, which is each one of these articles here is an article preview. So each one of those is styled. And then I have this container style. if there is a background of glassy coming from somewhere then we're going to get all of these styles applied to it. So if we come and take a look where this will not work is if I put a glassy directly on the element itself. So article glassy here nothing has changed even though if we come take a look here we we have that set up right with this style query but again the style query will not look at the element itself it has to be something coming from further up so I can't put the glassy here what we could do is put it on the entire list so I could come here and I have that this could be an inline style or I have my glassy here so I could say that everything in this list is getting the glassy and now these ones at at the top are going to change, but the ones at the bottom haven't just cuz we have two separate lists there. And now we get that sort of glassy effect coming through. I'm not going to dive into how this is working in this specific use case, but I've done a different video. It doesn't look exactly at these cards, but it looks at the gradient border plus the the blurry glassy effect. So, if you'd like to know how to do that, there is a link in the description. Um, but yeah, I've enabled it there. Or we could come through and maybe I don't want to only do it here. I could actually come all the way on the body and say that I have a class is glassy. And I've enabled it sitewide now. So if we go look, it's working on these cards and these cards now. We have the same effect on all of them cuz it's enabled sitewide by putting it on the body. And this is one of the potential use cases is definitely theming. And I'm going to include a link to a video from Yuna as well down in the description on the Google for developers blog that looks a little bit at theming like weather cards and how it can come. There's some cool and interesting things you can do there, especially if you're using JavaScript to switch different things depending on the information coming in and then you just have the right style getting applied based on the style query you have. Some really cool stuff you could do. And in a use case like this where I just had these cards, it's probably not the most useful thing in the world. But say you had like an entire UI where you wanted to theme everything and then you could theme it differently depending I have a glassy button and a regular button and a different type of button for example and all these different UI elements that are all switching based on the uh style query cuz they're set up for all of them and you're changing sort of the visuals to go along with it. But that does beg the question of couldn't you just use a modifier class for this instead, right? Instead of having all of this in here, I could just have my article preview. And then I could close that. And then we could just come and say glassy. Article preview. And then I could style all the glassy stuff here, right? And turn that effect on that way. And that would work in exactly the same way. And this is where I first sort of got to when I was using them. And it's it kept always being this thing of like, well, this isn't it's cool and it's a new way of doing things, but is it really opening new doors? And that's how I was thinking about it for a long time until I realized the one thing that really separates them. And not only does it really separate them from that type of approach of just using a descendant selector, but it makes them amazing. And we're going to look at a really simple demo and then go into a more real world example. And for this simple example, what I've done is I've created this horizontal scroller where I have horizontal or it's a horizontal grid, I should say. And so I have one here and I have one over here. And all of these are actually set up exactly the same way. I have a container. In the container, I have a grid. And then there's just a different number of children. Three children, five children, four, and then a whole bunch in this last one down at the bottom. So it just scrolls for a longer time. And what I've done is I've created this container of overcroll on uh oh sorry overflow scroll on. And again this is how I like naming things. You can turn things on or off and then apply the styles that you want. And what I've done is I've said if my horizontal grid container has this is where it gets a little bit weird in this specific use case. The other ones we'll see that are more practical don't don't have this. But if I have a direct child that then has direct at least five direct children. I'm turning this on. Now, for this, I do not need to use a style query. And it's actually made for a really complex uh query here with my has in here just because uh of the way I've set it up where I'm basing it on that. And this is really important because I can't do this on the horizontal grid itself. Right? If I do this and I turn it on, and in this case, we would just do something like this. Uh there we go. If we have my horizontal grid has nth child 5, which some of these do as we just saw, this container query or the style query is not working because the container doesn't have it. It's the element itself that has it here. So doing this like this here with this more complicated setup and markup and everything else is useless. But it comes into play when we do something like this where I say that uh this is only going to kick kick on if we do an at media media and my width is less than 700 pixels and then I wrap all of that in here and all of a sudden this becomes much more useful. So, what this is saying is if my viewport is larger, we have all of them. This bottom one, maybe we'd still want horizontal scrolling because there's a lot of elements there, but it's all working fine. And then as we get smaller, at one point that gets turned on. When we have a viewport that is smaller than 700 pixels, it turns on. Ooh, that's kind of interesting and kind of cool, right? All of a sudden, this becomes so much more useful. And we could actually do a little bit more with this, right? We don't actually have to set it up exactly like this. What I could do is on this container query here because it's a container with the styles that are here. I'm going to actually go back to how we had this before where I have an overflow of on in this specific use case. Or actually, you know what? For this one, let's just go down to this. We're going to say that overcroll overflow scroll is on. So now all of them have it. You can see even this this middle one that doesn't get too wide has it. And these ones, they they all just have it. Uh but what I could do is this because it's a container query can also look at the container itself. So my horizontal grid container I'm going to say this is a container. So I'm going to say container type of inline size. And this does bring up another important thing with style queries is style queries do not need to look at or don't need a defined container to look at the custom property and whether it's there or not. If we want to use a regular size-based container query, then we need to have a defined container like I have here. And again, if you've never seen this, you can check the video that is linked down in the description. And what I'm going to do is here where we have my overcroll container on, I'm going to put and width is less than 700 pixels. And now all of a sudden, you can see, let's make this a little bit bigger actually. It's going to say 900 pixels maybe. And now all of a sudden, look, this one's working cuz the width of this one is always smaller than 900 pixels. So it doesn't matter what's happening. This one's always on because we have an overflow of on just cuz I've said it's always on. And so it's just on. And then as this gets smaller, these ones are going to turn on as well. So we can conditionally do it through things like this where we're looking both for a style and a size. Or like we saw before, I can include the media query to also or you could even technically do this as a container query over here. But with the media query, we can conditionally do it down here as well to toggle it. I wouldn't do both. Having it here and here probably maybe there's use cases for that. I'm not sure, but I think that would just get confusing. Uh but by having it in one or the other, all of a sudden a few interesting extra possibilities come up that you cannot do with just a simple modifier class. And I think it's really really awesome that we can do that. And there's more. And let's go to the practical example now that we're going to look at where I've used that overflow grid here. And you can see it's working. And I've used a media query to enable or disable it with these ones over here. So I have four here. And when that gets narrower enough, all of a sudden both of these become scrolling side to side. And to be able to do that, what I've done is I took a bit of a different approach on here where I'm setting it up so it's always this is the default behavior where it has the overflow scroll going on. And then if we have a wid container query, the width is greater than a certain size. I'm just turning off the scrolling and it goes like this. So for that, it's just regular container queries going on. But the problem that's coming up is when we get to these, like over here, this is great. I want this to work this way. I want this one to work this way. But when I get to this larger screen size, this is kind of awkward, right? And because this is in just a regular container query, this area is smaller than 900 pixels. So this one's working like this. This one's doing this. And I I don't really want that to happen. I'd rather it goes up and down. Maybe I I definitely want it to overflow still because if it's not overflowing, it's going to be a little bit weird. It's, you know, would get too squished or something like that or not something like that. It just would be too squished. So, what I can actually do is create a style query like I have here where I'm going to change my overflow grid direction and I'm going to say I want it to be rows. And I just set up some new row new rules here. And then if I come up here where I'm creating this is my split where I could say that when we go to two columns actually this is going to be all the time. We're getting our overflow that's going up and down now cuz I've changed where that's happening. But now it's doing the same thing over here. And at these small sizes I'd rather it works the same way as this bottom one here. I want it to always be horizontal. And then at larger sizes I want it to go the other way. So that just means this I can include here where I go up to two columns and I change it again within a media or in this case a container query. So at larger sizes, this one goes this way cuz again that's the in my opinion the way that works best. And then when I get to smaller sizes, this gets disabled effectively and we just go back to having it like that and the two of them behave the same way. And so I can do all of this with one component with enabling disabling through one line of CSS and just this uh this right here where I'm switching the direction of how it's working and it works really really well and it's super easy. And there's other options that we have here as well. Uh so another thing that I've included in here is another thing that's a for my cards and each one of these is my card and I have an alternative layout. So, card layout alternative and treat I'm treating this exactly how I would treat something like a uh modifier class where I do a card and then alternative or something like that, right? Change the layout, stack, anything you want. Come up with a new name for it. And if I was doing this as something that I would just want to use myself and this card's always going to be a stack, then I think that doing this makes sense. This is my card is using the secondary layout and it's always going to be the secondary layout. Maybe this is completely fine. But if I want something that's able to change based on different conditions that are being met, then style queries are so much better. So what we can do here is we're in here when we go vertical like this. Maybe I also want to say that my card layout becomes the alternative layout. And so now this I don't think is the nicest, but now I get the alternative layout here where they're not stacking. I got that backwards. They were stacking before. Now it's making a two column layout over here and down here we have them vertical. But when we get to the larger screen size or I should say the smaller screen size now it goes back to both of them having the same layout in both spots again just with this simple toggle that's changing it based on a container query. And yeah I I just think this really opens up some amazing possibilities and interesting ways of working and thinking. It does raise the complexity of things a little bit which is a potential issue. Uh, and there are a few foot guns. Like one of the potential foot guns is the styles are inherited. And because the styles are inherited, you might impact a layout piece that's further inside if you have several layers of nesting going on. And if that's ever something that happens, you can use a registered custom property to actually turn off the inheritance of your custom property. And the big issue though really is that you have to work with your containers all the time. So you're always working setting things on the outside to have what's happening on the inside. and that we can't set set a container or style query on an element itself, which would be cool, but there's reasons these limitations exist. And if you think this is really cool or if you have other use cases, please do share them down in the description below. And if it's something you want to learn more about, as I said, this is part of the style query spotlight. This is just the beginning of a series I'm going to be doing exploring some of the possibilities with them where we're going to be getting more into theming and how it makes life easier there. I'm also going to be looking at some web component stuff that I'm really excited about. So, if you don't want to miss any of that and you haven't yet subscribed, please do consider subscribing to the channel. If you want to check out other videos in this series, if they're live, they'll be right here for your viewing pleasure. If not, my container query one will be. You can check that one out while you wait for the other videos to come out. And with that, I'd like to thank my enabler of awesome, Andrew, as well as all my other channel members and patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.