059: Container queries - The CSS Podcast

Key Takeaways

foreign [Music] hello and welcome back to the CSS podcast where we break down cs's properties and Concepts to bring you the best bits and pieces of what's happening on the web platform there's so much going on right now and it's definitely one of the most exciting times I can remember in my career for UI developers totally so we want to keep you in the loop about all of these changes and especially the ones you can use in browsers now so today we're talking about one of the biggest Landings happening in responsive design space and that is container query container queries if you haven't heard about it it's just fun to say too if you haven't heard about container queries before no worries we're going to go over what they are how to use them and talk about what you can and can't do and what browsers today so Yuna how would you describe to someone what a container query is good question and it's kind of fine to describe something so visual in a podcast format but let me paint you a picture if you've built anything in the past 10 years it's likely that you've had to think about how it would adapt to different screen sizes you want your website to look good on both mobile and desktop and whatever is next and you don't want to create a separate MDOT site for the different versions for the mobile site so what do we use for that media queries exactly you likely used a media query to set up some logic which adjusts components Styles at different screen sizes and you might go from a single column layout to a two column layout when the component has more screen real estate to take up oh yeah we had an episode on page media queries episode 32. yeah good good call the problem is using media queries we only have access to the Page's Global viewport information not the information of where the component appears and in today's framework and component-based UI Design Systems we're usually building reusable components that get placed on multiple pages and in multiple environments with container queries we can apply more granular logic to enable these components to own their responsive Styles nice yes you might want a card component to have a single column portrait type layout if it's in a sidebar but even though your user is looking at it from a really wide viewport with container queries you can actually write this logic and attach it to your target element so you don't have to worry about where it lives in the UI and what the rest of the page looks like when combined with flexible properties like grid and flexbox there's even more cool things you can do and you can write really robust intrinsic Design Systems it's a new entry point for responsive design nice you have so many cool phrases to save our container queries all right so to use container queries we first need to set containment on the parent element we also have an episode all about containment and that one's episode 43 this is like an episode just pointing you to other episodes I know because because we've made so many at this point that we've covered like most of CSS this is true and so now that's why this season we're talking about the new stuff that's true too and there is and there's still so much yeah we're gonna have a big season so be excited everyone uh and for more really catchy phrases okay so we have an episode on containment as episode 43 and uh you can do this by using the new container type property and setting it so what we meant by you can do this is you can create a container um and you can do this by uh setting it to size style or state and this is the container type property so there are three broader types of containment and they correspond to types of queries currently browsers have only implemented size queries but in the future you may be able to query appearance style and its state so size queries can be broken down into inline size like width and block size like height which would query the elements inline logical axis right just so I could cover its horizontal in a Latin language or block logical axis which is vertical in Latin languages so to sum up you can write container Dash type colon inline Dash size on a parent element whose children you want to style with container queries and it'll look for the inline size horizontal space in this case yeah so then you can set height but you can also name that parent container using the container name properly my daddy gave me a name you could call it like a sidebar or card container container name accepts a custom identifier string and it works in the same way that you would name a grid area if you've ever done that so once you've given your container a name you can then reference that name when writing a container query so that might look like at container card container and then in parentheses Min width 350px and that might be the inline size that you're querying with the previous setup that you put with the container type given your container a name is optional but it's the best practice to make things a little bit more clear and also named containers can really come in handy if you have an element with multiple appearance that you're querying so for example I made a demo once where I had this responsive shopping card that shifted from icon only to like incrementally adding like detail and then text based on how much space it had and it also lived inside of a product card container that I wanted to sometimes query that product card container so I was applying different container styles with based on different container names to that product card based on how I wanted to style it and it was pretty critical that I had these different in containers otherwise I wouldn't know what it wanted me to look at right yeah like if you don't name it and if you it'll just kind of query to find the nearest container with containment on it right yeah so yeah having a name makes it so you don't have to guess you know which it's going to Traverse so you get to know and you get to point right to this container like hey this container that I said containment on I would like to query you if your width is above this here's some special styles for your SVG um yeah very nice all right so you can write container name and container type in one line using the container shorthand property if you like shorthand which I do so this is also a new property that lands with container queries so container accepts so this is the new shorthand it's just container it's container just container accepts a container name and a container type all in one with name coming first so you got to give your container name to use this shorthand but then after that you can write uh for example container colon card Dash container space inline size to be a bit more concise with the name of the type yeah so that that's essentially just giving it a name and saying I want to query it in the inline size Direction so all in one nice and handy it is like important to note that you have to have a name you can't just write container inline size which you used to be able to in early versions of the spec but no longer so update your demos if you had the old syntax can use Emoji's container name probably probably that sounds like you can do that with grid names so yeah cool I don't see why not query the Emoji Emoji queries yeah so now that we've set up our parent container we can actually query it you can style any child element using at container and look for changes on its parent to apply the style specified in the at container Rule and this is where the similarities between media queries and container queries come into play you write a container Rule and then in curly braces you put all the styling Logic for the children inside of it so for example a non-named rule on an inline size container could look like a container space in parentheses Min Dash width colon 500 pixels close parentheses open the curly brace and then inside that you'd have your Styles like dot title and then you know font size to REM you could change the font size with the width if you wanted to for a name container it would look like at container space card Dash container if that was the name and then space in parentheses Min width colon 350px close the parentheses open the curly brace and then inside of that you would have your elements and your Styles like dot title font size 2m so uh yeah you could do this two ways but you'd use at container to write the entire container Rule and you'd have a whole block of styles got it okay so we've got like a three-part thing here first you have to establish a container so something has to tell the browser I will be queried and my width will be queried for example like my inline size here's my name maybe and then some sort of container query gets authored that targets that container queries its width just like it would be the browser viewport and then supplies a whole set of selectors and styles to be applied to that okay and then your first one was just at container with no name which means it's just going to look to the nearest parent element that has containment on it query that versus the second example where you explicitly said I want to look at the card container container well that was just fun to say and then you can provide styles for the case where that's either over or below that with the durad okay awesome well uh where's that leave us with I guess some death tools let's talk about some Dev tools if you're playing with container queries there's also great to have tools in Chrome that you can try out devtools will show you a container badge in the Dom panel next to all the container parents just like it does with like CSS grid parents and if you click on that badge it highlights all the children that query this parent it's pretty sweet and then in the elements panel you can see all of your container declarations when they're active and fulfill the query's condition when hovered over the name turns into a link to the element in the elements panel and the Styles pane displays the queried property and its current value which could be the width of the parent if querying inline size and like a Latin language and finally just like media queries you can make adjustments and changes to any of the code in the Styles pane including the at container declaration and to top it off there's a polyfill if you want to use size space container queries today there's a polyfill on Google Chrome Labs it works on Safari 13.4 so Chrome 79 Edge 79 Samsung internet 9.2 and Firefox 69 Plus so now let's talk about the future if I briefly hinted at this earlier but querying size isn't the only thing you can do with container queries in the future you'll also be able to query a parent's CSS styles that means you can query to test against any style up a Target elements Dom tree and apply style containment on it also the working group did resolve to make style containers the default if you are wanting to look for an immediate parent you're able to do that unlike with size containers where you have to set containment type to size or inline size or block size so yeah why would you want to do this so say you want to make text stand out in line like say you have an italicized quote in a paragraph you might use an eye tag to make it italic and that would work it would be italic but then what if that I tag was inside of a block quote that also got styled with font style italic no you wouldn't be able to see the italic text of that I tag so maybe you'd want to give it a pink background instead to make it stand out in some other way this kind of speaks to the problem that we have with you know Global Information when really in this case we need local information local logical Styles so with style queries you can query against apparent styles to write more defensive CSS and regardless of the type of element if it's you know an itag or a span tag or a P tag or any other tag style queries let you look at the specific style of any parent element to make styling decisions you can also do this for a CSS custom properties which means that you can then abstract values to higher order variables like theme dark or Spotlight true you could query any parent element for a custom property State and apply a set of styles based on that wow so it's pretty cool and to use this type of query you would wrap the Styles in a style function so it would look like at container space style open parenthesis and then if it was a variable you could do like dash dash Spotlight colon space true and then close your parentheses and then in the curly braces and you'd have the custom Styles inside of the curly braces so if you had a card that was the spotlight card and you applied any logic to set that to true or set that in the HTML or the Dom or whatever you did you could have a whole set of styles based on that custom property value I love that it's awesome style queries are a part of the contain level 3 spec but they are not Landing in the initial implementations of container queries in chromium 105 and webkit but uh container queries will be stable for size queries in Chrome 105 chromium 105 which is going to be uh August 30th I think it goes stable or at the end of this month but these are are not supported yet with the container query polyfill either so you can only do size queries for now style queries are the future yep I have a use case in my mind I'm thinking about a lot it's like you've got a background of your your website and then you usually have like another layer on top that represents like some sort of surface I always call them surface one and Surface Two and it works out really nice when you only have like those things on that one surface but as soon as I need to put a surface on a Surface these style queries are going to be really clutch for me to be like okay what's the color what's this like the style of this container I'm in I need to be slightly darker than this or I need to be slightly lighter than this yeah and so the ability to know the background color of the context you're on is going to allow you to make some really you know smart decisions about your design and I'm just really excited about super cool also a note about stability by the time this podcast goes out it will be stable we were coming at you from the past nice and then we'll probably have a future episode where we're like the future is now you know style quiz are here okay so then we also had State queries right which you mentioned earlier as well so that's his second part Future Part Two is State queries and this is thinking even further in the future because where the style queries are coming the future the state queries uh will be even further and these will be possible and CSS contain level four and they're pretty early stages but they'd enable you to check if a parent is in a specific State such as stuck like is it sticky and stuck is it visible like is it easy is it even in the view is it uh in the Dom can people see it or is it snapped and so you could be able to query the state of an element and then change a style based on those things super cool should be so handy I feel like I keep wanting to like write all my CSS in container queries yeah not as well yeah so that is a wrap for today this is definitely one of the most exciting features Landing in web browsers this year so definitely check it out if you have a chance and remember to polyfill it for production if you have any CSS questions we'd love to answer them on the show please tweet us with the hashtag CSS podcast I'm at Yuna on Twitter I'm at Argyle Inc and your question could help a lot of people if you like the show please give us a review on whatever podcast app you are using or share this podcast with a friend those reviews help other people discover our show and help us have more time to deliver better content for you thanks y'all looking for your questions bye [Music] foreign [Music]