CSS Style Queries Have So Much Potential

Key Takeaways

Container queries are one of my favorite features in CSS. I use them in every single project, but they decided to make them even better by adding in style queries, which open up endless possibilities for really cool things you can do in CSS. And in this video, I'm going to be talking about what style queries are, as well as showing you the different use cases for them. Welcome back to WebDev Simplified. My name is Kyle and my job is to simplify the web for you so you can start building your dream projects sooner. To get started, I have some really basic HTML. I just have a wrapper that wraps these three boxes. The wrapper just has a flex with a gap between them. And then my boxes have some flex to center the text. They have a flex grow of one to fill the full width, 300 pixels of height, and a background color of red. Now, I've already talked a lot about container queries themselves. So, I'm not going to go in depth into the container query portion. If you want to learn more about that, I'll link a video in the cards and description for you. But, I want to talk about the style query portion of them instead. So, what we can do is we can create a container query just like this. And normally, you would put like some size restraints and so on inside of here. But if you want to do a style query instead, you're going to use the style keyword, which is going to be a function that you pass some type of check to. So we can just come in here. We can say style. And what I want to do is I want to check a style on one of my parents. So this container query is going to apply specifically to the parents of a particular element. So in my case, I want to check to see if this wrapper has a specific custom property defined on it. We'll just say custom. And I want that custom property to have a value of one. It doesn't matter what I specify as the value or anything. It's just I'm checking to see if they have a custom property with a value of one. Then I can specify I want to select my box and I'm going to change the background here to blue. So we can just swap between these backgrounds. And I'm also going to change the border to be a one pixel solid black border. Just like that. So we can see a little bit more visually what's happening. And I'll make it quite a bit larger. We'll make it a 10 pixel border. So if I give that a quick save, you'll notice my boxes are still red because I don't have a custom property. If I come in here and I add a custom property and I set the value to one, you can now see I now have blue boxes with a black border around them. It's kind of ugly, but you can see that there is a visual change in what happened in my individual boxes. Now, if I change this custom property to something like two, you can see they swap back to red because I no longer have that value of one. It's specifically checking does this value or this property have this exact value. Now, you may think that's awesome. I'm going to apply that to the display property as well. So, I'll come in here and I'll say display and I'll see that the value is flex. But you'll notice that does not actually work. This is something that's in the specification that it should work, but currently no browser supports this feature. It only works with custom properties, so we can't use it with actual CSS properties yet, but that's something that will be coming in the future. To be honest though, the big use case from this comes with custom properties itself. You may be thinking, well, Kyle, I'm looking at your code and yeah, that's kind of cool I put this custom property on here, but why don't you just have some code that says like instead of this big container query, you just have something that says wrapper.custom. And that pretty much does the exact same thing. And now, as long as in my code I add that custom class on here, I now get those blue boxes. And you are correct that that will solve the exact same problem. But often times, you may want to be able to use these CSS properties to do a little bit more than just adding custom classes. And the annoying thing with classes is it can be difficult to make sure you name them properly because now this custom class may clash with other custom classes I have and I may need to like prefix it with like wrapper or something like that. So, in general, this helps a little bit with like naming and certain things like that, but it also helps with a little bit better on creating like themes and things like that. Let me show you what I'm talking about. Imagine that you have a theme on your site that you want to be able to toggle between not just light and dark, but you want to have light, you want to have dark, you want to have a purple theme, you want to have a blue theme, you want to have all these different theme variables. Well, CSS doesn't really have a great way built into it to do that yet. But, we can use this nice container query to essentially theme our site based on all these different themes. So, what I'm going to do is I'm going to come in here. I'm going to create a style container query. And what I want to do is I want to just create a theme variable. Doesn't matter what I call it. I can call it anything I want. And we can have like a light version. We can have a dark version. Let's come in here and we're going to create a blue version. So just like that, I'm going to say blue. And then inside of here, I'm going to say that my box is going to have a background of blue. And we're going to give it that border again. So we'll say 10 pixels solid. And we'll make it, I don't know, yellow so it really stands out. It's going to be super ugly. So, if our theme is set to blue, it's going to have that style. And the nice thing is it doesn't just have to be on our parent component. It can be on literally any component inside of our entire page. For example, we could put it on our HTML element if we wanted. I could just come in here and I could add a style that says theme. Set that equal to blue. And I believe I put this in quotes in my check here. So, let me just put that in quotes. And to make this a little easier, I'm actually just going to remove the quotes from here. And I'll remove the quotes from here. And now when I save, you can see I get these blue boxes with a yellow border around them. But the really nice thing is is I can theme every single thing on my website with any theme. I can just come down, copy this, and now I can create a red theme that's going to have a red color. And now if I swap to the red theme over in here, you can see that I swapped the color of my box, which is really great. Now, this can actually be combined really easily with a brand new CSS feature called the attribute function, which I'll link a video in the cards and description going in depth on, but it allows me to read any attribute on a CSS property. For example, I could create an attribute called data theme. Let's just put that on the body because that's probably where you would end up putting this. And we can set that to any value we want. For our case, we're going to set it to blue. And then inside my code, I can read that particular value and set it to a CSS variable. So I could just come up onto here. I could say body. I can read that attribute and set it to a custom variable. So to read it, I can just say atr. That's going to allow me to read this value. I call this data theme. And I need to specify a type for this. This is going to be a custom ident type. Just like that. Close that off. And I can set this to a custom property called theme. And now I've essentially done the exact same thing. When I save, you can see my box has changed to blue because I'm reading the value from my theme attribute here, which is blue, setting it to this custom variable, and this variable is being used in all of my style queries. So these container queries I find the most useful when you want to change things across large portions of your site or even across your entire site. I find them much less useful when you want to make minor changes to like children of a component because you can always just add an additional class. You know, you could just add in like a custom class or something like that. But when you want to change large portions of your application, like for example, everything in the sidebar looks different or everything on your application is now themed this specific way. I find container queries are a really great way to implement that type of behavior. Now, the only time that container queries won't work for when you want them to is if you want to modify the element that the container is referencing itself. For example, my body I would not be able to use inside this container query. For example, if I say body and I say that the background here is going to be black and I give that a save, you'll notice my background does not change to black even though my theme is blue. And that's because if we look, you can see my theme is being set on the body element. And container queries always look for parent elements. It looks upward in the tree to try to find the element that contains that particular property. So in our case, we would need to move our data theme to our HTML element. And now when I save, if I modified my code inside of here to make sure that this is the HTML element that processes my theme variable, you'll now see my background changes to black and my boxes change the correct color. So the important thing to note is when you're using container queries, it always looks at the parent element or the elements pass that always looks upward. It can never look at itself. Now, another place that I find container queries incredibly useful for this styles specific portion is when you want to do custom media queries because right now you can't create a variable for a media query, but you can kind of hack around it with these style queries a little bit. So, for example, I'm going to create a media query and this is just going to say that my width is less than 500 pixels. And then I'm just going to set a variable on my root and I'm going to set that variable here. We can go it's just going to be breakpoint and we'll set that equal to the value of small. Doesn't really matter what we set this particular value to. And I'm using it inside of quotes. You could use it not quotes. It doesn't matter. Now, I'm going to copy this, paste it down a little bit, and we'll say if our value is less than 700 pixels. And actually, let's make this 1,000 pixels. And we'll make this one like 600. So, it's a little bit bigger. We'll change this to medium inside of here. We can do the exact same thing right here. We'll change it to like 1500 pixels. We'll make that large. And then we can just have it default to extra large. So, we'll say root is going to default to extra large. And I'll need to swap around the order of these to make sure that they're in the correct order because the most specific one always needs to be last. And I essentially have these in the reverse order. So let me swap these around real quick. Oops. There we go. So now these are in the correct order. So essentially by default it's extra large. If my screen width is less than 1500, it's large. If it's less than a,000, it's set to medium. And if it's less than 600, it's set to small. So now I can use these as essentially custom media queries by using a container query and just checking that breakpoint. If my breakpoint is small, for example, I can then change my value of my boxes to blue. And here I can say if my breakpoint is set to large instead, I can change them to whatever. In this case, I'll change it to green, for example. And now we can actually differentiate between these different things. So I'll set my border on this one to be red and the box green. And now if I change around my size, you'll see when I get to that small size here, I have the blue and the yellow. I'm in the medium size now. And it has no colors cuz I don't have a specification for that. And as soon as I get to large, you can now see I have green boxes with a black or red border around them. So I'm able to differentiate between my different screen sizes based on these different breakpoint queries. So it's kind of similar to how a theme would work, but in this case, I'm just using this as a breakpoint variable and I'm specifying it based on all my different media queries. This is really useful if you want to have distinct breakpoints across your entire application because normally you need to write these media queries everywhere. And now if I want to change my breakpoint from 1500 pixels to some other value, I would have to go to every place I to find that. But now I can just come in here and say, you know what, 1300 pixels is my new large breakpoint. And now anything between 1,000 and 1300 pixels will be considered a large screen. Now almost always the big question when it comes to new CSS features is what does the support look like? And if we actually open this up, the support looks atrocious at the start because you see it says 0%. But that's because no browser supports the ability to do like display flex. But everything you see in yellow here supports the ability for you to be able to do a custom property. So every single major browser except for Firefox actually supports this property. So, it's more well supported than you'd think. It's still not well supported enough for me to want to use this in a realworld project just because, as you can see, Firefox doesn't support it, and they have a small but decent portion of the web behind them. So, it's not something I would use right away, but it's at the cusp of something that you can start using relatively soon. Now, if you enjoyed this video and want to learn 20 more amazing CSS features that you can actually mostly use today, I'm going to link a video right over here covering that. And if you want to learn more about that ATR function, which I think is one of the coolest things coming to CSS, I'll also link that right over here.