Demystifying CSS Container Queries

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON: Hello, everyone. And welcome to another episode of Learn with Jason. Today on the show we have Miriam Suzanne. How are you doing?

MIRIAM: I'm doing great.

JASON: I feel like I asked you about this so long ago. And I'm glad we were able to get the schedules to work. Because I saw you speak at I think Jamstack Con of, and talking about the CSS stuff. I got to get Mia on the show.

MIRIAM: Great. I'm excited to be here. I've known of your show for a while. It's cool.

JASON: Yeah, for folks who aren't familiar with you and your work, do you want to give a background on who you are and what you do?

MIRIAM: Let's see. I studied theater. So, here I am. At some point, the theater needed a website. I learned to make a website. Then other people needed websites. And that spiraled out of control. Now I have an agency called OddBird. We do all sorts of client work from client systems to refactors. Whatever people need. Custom applications. And I got involved with helping with the SaaS language because I built a SaaS grid system way back in the day when that was a thing. Which you shouldn't use anymore. You don't need a great system if there's CSS grids and they're great. And at some point, I got involved with the CSS working group. So, I have been helping out with specifications for new features in CSS lately, which has been a lot of fun.

JASON: Yeah. And I have a lot of questions about that. Because it's a world that I have only seen from afar. But first, I just want to make a comment about the -- the -- having a primary interest that makes zero money that leads to web Dev because you can't afford to hire help pipeline. Like so many musicians and actors and other folks in the performing arts I know have become web Devs because they were trying to do that thing. Well, yeah, but the band needed a website. And the theater --

MIRIAM: Yep. I've met a lot. And I've even -- there was some conference I was at, how many of you have CS degrees? A couple hands went up. And how many of you have music degrees? It was most of the room. I was like, perfect.

JASON: It's so true. And such a bummer.

MIRIAM: Yeah.

JASON: Well, so, okay. So, let's talk a little bit about the reason we're here overall is that I have heard about CSS container queries. And I keep hearing how powerful they are, what they unlock for us. And I -- I just for whatever reason have not gotten around to actually learning them. And so, they're very -- they're like magical to me. I still haven't had it click in my head what exactly they're for. You worked on the spec for this. So, could you maybe give the elevator pitch of what was the pain point that was -- that existed and how do container queries address it?

MIRIAM: Yeah. I mean, we got media queries in 2008, 2009. They started to roll out? 2010 Ethan Marcotte gave the big talk, the article about responsive web design. Even was very excited. But right away, even said there was a problem here. Media queries let us measure the width of the viewport or the height of the viewport or a number of other things. User preferences, all sorts of things. But the main thing that we're measuring a lot of the time is the width of the viewport. And that's really handy for saying, when I have a bigger viewport, I want to change the layout. I want to change the style of something to use that space more efficiently. But then there's a problem if we add a sidebar, for example. And we take a component and we move it from the main area to the sidebar. Suddenly its size doesn't depend on how big the viewport is, right? That's not quite what we're trying to measure. And we -- we can sort of fake it. We can sort of saying with well, okay. I add the sidebar once the viewport is this big. And then the sidebar is this small. So, I have to do this thing where like the thing can grow and then it has to shrink again. And I have to sort of know all the magic numbers to get there.

JASON: I have definitely written some horrendous like calc statements in my CSS. I need to subtract the margins and then I need to subtract the sidebar. Yeah, definitely.

MIRIAM: Right. Right. So, container queries were requested right away. There was the first container queries polyfill was -- or the first one I found -- was posted in 2011. People have been asking for this for a long time. And that's part of the reason why it makes sense to me that even once it becomes available, you would still feel like it's not. Like we have been waiting a decade for this.

JASON: You keep hearing it and you think to yourself, surely -- surely this is just another promise.

MIRIAM: Right. Exactly. Exactly. And all along the way, we were told that it wasn't possible. And, you know, I told people it wasn't possible. Because it isn't in some interesting ways.

JASON: Okay.

MIRIAM: It fundamentally breaks the idea of how flow works. Flow is this concept that we have on the web of content making the box bigger. And the box changing the size of the content has. So, we've got this like two-way flow of information where the context sizes the content, and the content sizes the context and it's this loop. And it's a very clever loop that the browsers figured out. But if you try to measure something in the middle of that loop, what are you doing? How do you measure a balloon as you're filling it with air?

JASON: Oh, yeah.

MIRIAM: What is the size of the balloon? Well, it depends how much air you put in it. And if you're trying to measure it and then change the stuff inside of it based on the measurement, you're creating an infinite loop. And that's why container queries will never be possible. And now they're shipping in every browser.

JASON: Okay. So, follow-up question.

MIRIAM: Yeah.

JASON: How?

MIRIAM: Right. Okay. So, the main thing that happened is containment. Which was pitched -- it has some uses for performance like if you've got -- you're loading a lot of stuff. You want to contain some of them so you just tell the browser, ignore these for now. We'll get to them later. So, there's some performance benefits that you can get from it. But a lot of that was like the main reason people wanted containment is because maybe it makes container queries possible. So, what we're trying to do is we're trying to take an element on the page, measure it, and then change what's inside of it based on that measurement. So, in order to do that, we need to cut off the loop at that point. We need to say: This box doesn't size to its contents. It only sizes based on where it is. That's a little too strict because of what you get. I mean, sort of imagine the CSS is awesome meme with the overflow. You add size containment. Suddenly that box collapses to zero by zero and all of your text is overflowing. That's not what you want. It's not great in CSS to have boxes that can't resize to their compensates. So, that was -- once we had size containment, we still weren't quite there. Nobody was willing to do container queries if it was gonna be that invasive. So, then the big hurdle was in line size containment. Can we tell the browser to keep the inline size or the width, usually, based on context? And allow the height to still grow and shrink the content? That's the big trick. And it took plugging a few holes. There's a few places where like as a thing gets bigger, it can trigger sidebars that make it less wide. So, there's a few places where the height can affect the width that we had to just sort of plug those holes. And say, okay. We'll just come up with a one-off solution for here is how you handle that situation. Which is basically like only move forward. If you have to add a sidebar, you don't remove it again if the contents change. Did I say "Sidebar"? I meant scroll bar.

JASON: Scroll bar. Okay. I gotcha.

MIRIAM: Okay. So, there's a few things like that. But we got inline size containment. And then that's when browsers said, okay. If we have that, then we can ship container queries. Because in most cases, when you're building a layout, you are setting the width from the outside somewhere. You're saying it's -- it fits in this grid. Or it's this percentage of the page. Or it's -- you're giving it some width from the outside. So, then we can contain that. And let the height continue to grow and shrink to the content so we're not just overflowing all over the place. So, that's the solution.

JASON: It's fascinating to hear you talk about this. Because the, you know, the elevator pitch that -- or I guess like when I've asked, you know, when I say, oh, I don't know what contain queries are. They say, well, it's a media query, but based on the element not on the viewport, right?

MIRIAM: Yep.

JASON: And that sounds so simple.

MIRIAM: Yep.

JASON: It's like, ah. What a brilliantly simple and elegant way to solve this problem. And then you talk about all of the knots that have to be untied under-the-hood in the browser to make this work.

MIRIAM: Yeah.

JASON: Which actually brings me to a bit of a tangent. But I hope an interesting one for everybody that's listening. And chat, if you disagree, just let us know. But I have so many questions about what the process is of changing the spec. Because in my mind, there is sort of like tiers of intimidation for me in terms of contributing to web spaces. Like there's the, you know, am I willing to put a comment on somebody else's code to say, I think it could maybe be this better. Like a code review, right? And then there's the pull request where I'm changing the code. And then there's like a pull request to a repo that's not mine. Or not my team's. Like an open source contribution. And then there's trying to change browser behavior. And that feels like -- it feels like there's steps and then there's this huge vertical leap to saying, I'm going to go from trying to convince the maintaining team that's four people of this open source library that everybody uses to now trying to convince the browsers, which are all controlled by the biggest mega corporations in the world, that they should do something because I like it better.

MIRIAM: Right.

JASON: So, I guess in the -- in the -- what -- okay. This is a feature that has been -- you said the first polyfill showed up in 2011.

MIRIAM: Yep.

JASON: It is almost 2024 and it is -- it shipped in the beginning of this year? Or was it last year?

MIRIAM: Yeah, it shipped at the end of last year in Safari and Chromium browsers.

JASON: Okay.

MIRIAM: And then beginning of this year in Firefox.

JASON: Okay. So, to get to full coverage it took 12 years.

MIRIAM: Yeah.

JASON: Was that spec in development for the full 12 years?

MIRIAM: No.

JASON: Okay. So, what was the end-to-end time?

MIRIAM: There were open issues in the -- so, the CSS working group --

JASON: Sure.

MIRIAM: I don't know when they moved to GitHub. It was not terribly long ago in that timeline. I mean, it was before I joined. And I joined early 2020. But everything that they're working on I guess I should say everything we're working on is in the GitHub repo. And there are a lot of issues filed. And this issue has been filed for the whole time with a lot of discussion. And different ideas. And around the time that I joined, there were sort of two leading proposals. They weren't specs yet. But they were sort of explainers saying we think we could do this now. Here's the two directions we could go.

JASON: Okay.

MIRIAM: So, those were both pitched I think early 2020. And then the feature launched. But that's a quick timeline. I mean, that's basically like specs don't always move that fast. This one, browsers were like, we know everybody wants this. There's no questions. Let's just do it.

JASON: Yeah. I guess I had the decade of prior very clear customer demand.

MIRIAM: Right.

JASON: So, to me, I mean, that's fascinating. And so, you're having to get buy-in from the whole working group. And I imagine that there's zero chance that you get unanimous consent here. Like I imagine that several people were kind of dragged against their will to this implementation. How do you manage that? Like when you're -- when you're putting out something that's literally gonna change the Internet because once you put it in the browser, it's basically here forever, right? Like that's the one promise of the web is that we don't break backward compatibility. How do you know that you've got enough consensus for this to be a good idea versus like, well, no, we need to keep talking this through because somebody disagrees?

MIRIAM: Yeah, well, there's sort of a process of in the working group, nobody has to object. Something can move forward in no one objects. And generally, the browser vendors are gonna have a little bit more power in objecting. And they have held things up at times when one browser can say, no. We just don't think that this is a good approach at all. And we're not gonna do it. And that will often shut down a spec. Sometimes it has to go higher. There is a way of formally objecting. Which then takes it to actually a different group in the W3C. That sort of resolves those conflicts and says here is our resolution to this formal objection. Or you have to go figure out a different approach that makes everybody happy. In this case, it was more like everybody wanted it. And the question was just details of how. And so, the main -- the main issue on this one was that inline size containment. And there was basically one browser engineer who kept saying "This will work. We can do this." And everybody else was super-skeptical because we had been burned so many times with container queries. And finally, he basically had to write that bit of the spec. And sit down and show us all exactly a demo of how we would pull it off. And it's shipping!

JASON: Yeah.

MIRIAM: There's always this -- there's this weird thing in specs. Where it's not enough to have a working prototype. And this was actually a problem. Where I was working on a spec and we had everything else and we had a working prototype. And there was in one piece missing where nobody believed still that he defined it in a way that it would work in every browser engine in exactly the same way. It has to work predictably the same in every browser engine.

JASON: Right.

MIRIAM: And that's the part that's hard. Even though he had shown it was working in one browser engine, was it going to be translatable?

JASON: This is -- and so, that -- that process took I think you said 2.5 years.

MIRIAM: Yeah.

JASON: And that is a -- a fast timeline for the spec. Which is -- I find it to be like -- it's actually one of the things that I like most about the web is the relationship between like open source frameworks that can do whatever they want and release a breaking change every other week if they want to. And then the browser, which the standards move at a much more deliberate pace. But with this guarantee that it will work forever. And so, you know, I feel like since -- I think when I really started to feel, it was around Babel. But then I kind of extended backwards and how jQuery worked on web standards. I was early in my career and stupid enough to think I was smarter than everybody else. But to see the way that we use something like jQuery or we use something like Babel to test out all these new ideas and see how people interacted with them and what made the most sense. And we see that built into the web with the document.query selector. And that kind of being almost a deliberate copy or an exact copy of the jQuery behavior. It was so cool to see how these two communities can work together. And, you know, I know sometimes people get frustrated with the standard, well, why don't browsers just implement this. We just talked about CSS container queries. Which is maybe I think of all of the requests that I've heard for CSS, maybe one of like five that I've heard very loudly and with zero, like, credible dissent other than don't move my cheese. Even to get that to work properly, you just laid out a million reasons why it's very, very hard to do. It's just a fascinating world. And one that I hope, you know, I hope more developers are thinking about the level of thought and care that goes into these standards that we get. And maybe that's why they take a little bit longer, you know?

MIRIAM: Yeah, yeah. And everybody has to agree. That's the big thing. And there's a lot of people thinking through -- yet, is this -- is it the right design for right now? Or is it still the right design in ten years? And there's some things like I was card of Cascade Layers. And there's some decisions we made there that are right for 10 years out, and right now don't feel quite right.

JASON: Oh, interesting.

MIRIAM: We knew that was an issue. Okay, we could either make the decision that's right for how you start using them, or make the decision for how you want to use them in 10 years. And we had to go with the 10 year option. Because that's gonna last longer than the transitional period, right? And so, every once in a while, I'll see someone complain about that design choice because it doesn't feel right for the transition. And I'll be like, yeah. Well, we went with the 10-year option.

JASON: Yeah. That's another one that one of these days I'm gonna have to have you or somebody else back on to talk about because I actually just saw layers in the wild for the first time yesterday when I was looking --

MIRIAM: Oh, nice!

JASON: -- some demos of something else. I saw Adam Argyle's work using the layers. What's this? I scrolled through. I've read about this, but I've never seen it use. Speaking of which, so, CSS container queries are fascinating in a historical sense. But I'm really excited to see them in a practical sense. So, if you don't mind, I'm gonna switch us over into the pair programming view. And that is going to happen as soon as I get this window over here so that it doesn't create the old infinite loop thing. And then I'm gonna move us into this view. All right. And somewhere over here is my -- there we do. Let's go over here. And I'm going to say, first and foremost, where is the right place to send people if they want to follow you? Like your personal site, you think?

MIRIAM: Or OddBird.net is probably the place.

JASON: All right. So, first and foremost, make sure you go and check out Mia online in all the places which I assume are linked from around the site.

MIRIAM: Yep.

JASON: And then this episode, like every episode, is being live captioned. And we've got Amanda here with us today. Doing all of those captions. And I just lost -- no. We're in good shape. Okay. And so, that captioning is -- is thanks to Amanda and White Coat Captioning. And that is being brought to you by our sponsors, Netlify and Vets Who Code. And maybe you, friends out there, if you want to sponsor the show, get in touch! Okay. So, CSS container queries. I'm going to see if I can find the spec. And let's see... the CSS working group. This one?

MIRIAM: Yep. That's it.

JASON: Okay. So, this is the actual spec. This is -- there you are right there. Tab Atkins. And I don't know Florian.

MIRIAM: Florian is great. Yeah. He works on a lot of the specs.

JASON: Excellent. If you're ever interested in seeing how something becomes an actual browser spec from an idea in your head, this is the amount of work that goes into it. And as you can see, this is -- it's a lot. Like, this is not a -- this is not a simple document because you've got a bunch of browsers built by a bunch of different people who all need to be able to read this and implement it exactly the same.

MIRIAM: Right.

JASON: Which is absolutely fascinating to me.

MIRIAM: And a quick thing to note if you're looking at specs like this, if you click on the editor's draft, that's gonna take you to -- it's basically the live working. So, you're in the working draft. This is what's official and published. If you go to the editor's draft, this is what's not published yet.

JASON: Okay.

MIRIAM: It's sort of the working document and it updates every time there's a commit to the repo. If you find yourself in the editor's draft, know you're looking at maybe experimental stuff.

JASON: Okay.

MIRIAM: And you should always have a link to the latest published version which will take you back to that working draft.

JASON: Very cool. This is super -- I guess this is one of those cases where I just have like banner -- I just skip.

MIRIAM: Yeah. Sure.

JASON: I go right here and this is what I start reading. But no, this is -- this is in and of itself is cool. I could go through and start reading this to do it. I could go to MDN. But as I've got an expert on the show, I'm gonna skip all that have. And rely on you for my docs today. So, if I want to build something, what -- like where should -- I'm gonna maybe use like CodePen, do you think?

MIRIAM: Sure.

JASON: So, I'm gonna get into CodePen here. And we'll start with a new pen. And I think we just go from first principles. So, I'll start with an empty setup here and then I want to do my first container query. So, where -- what should my markup look like?

MIRIAM: Well, let's say you have a card element. A card component. It's gonna have in it an image, a heading and some text.

JASON: Okay.

MIRIAM: Is that a good place to start?

JASON: I think that's a great place to start. We'll go here. I'm gonna mark up these images without anything in them yet. We'll put in a heading. And the heading will be place holder. And the text will also be place holder. And that gives us our base level card. I can head over to somewhere like Unsplash and grab some images. What's your favorite snack food?

MIRIAM: Oh, hm. Cheese. Let's go with cheese.

JASON: Excellent choice. All right. So, well, this will be our first cheese. I'm gonna copy this image address and we'll just do some hotlinking today. And then I can make these a little bit more reasonably sized. We will go with the 300 and we can edit the height as well and get a square crop. And that will make our lives easier. So, now we've got the baseline of a card. We've got an image, we've got a heading and we've got some text. It's all wrapped in a div with a class of card. So, I can do something like this. Should I just start out by trying to style it a little bit?

MIRIAM: Yeah. Why don't we start by giving it sort of a vertical style it would need in a tight space.

JASON: Okay.

MIRIAM: You're basically already there. But maybe give it a border and some padding and whatever.

JASON: So, we'll start out with. We'll go with the pretty spartan version today. We'll give it like a solid. And then like a light gray. And then we probably want this to have like, I don't know. Let's see. Padding. Okay. And then...

MIRIAM: Right. Maybe we want the image to stay full width? In our vertical.

JASON: Do some nesting today because I think that's another cool feature they just recently learned about that I'm so happy has landed. It was the only thing I missed about SaaS and less when I went to writing plain CSS again.

MIRIAM: Nice. That's one that almost went from formal objections.

JASON: I'm not surprised.

MIRIAM: There was even more conflict on that one, yeah.

JASON: We're going with square images. I'll set an aspect ratio of 1 to keep it square.

MIRIAM: Yeah. So, already, let's give that paragraph a bit more text. Can we just Lorem Ipsum or something?

JASON: Absolutely.

MIRIAM: If you lorum a tab --

JASON: Does that work? That's cool.

MIRIAM: It does with certain settings.

JASON: I don't think I have those settings. That's okay. I've got a few of these that I have memorized that should be -- I'll just grab one of these. That's probably enough. And then -- nope. That's not the one. Here. Okay. So, that is a decent amount of text. And I can probably grab an actual title as well out of this. So, that will be the title of our card.

MIRIAM: Yeah, all right. Great. I mean, that looks good for a vertical. Now, at some size we're gonna want to go horizontal, right? Or something? Because that image gets way too big.

JASON: Right.

MIRIAM: We're gonna want to do something. How would you do that right now, probably a media query?

JASON: Yeah, I would reach for a media query. And say min width is, I don't know, this one could probably work at we'll say 500. And then we would say card. And... I don't know. Maybe I would have it go display flex. And this is gonna get me in trouble because I'm gonna now have to start wrapping things in things.

MIRIAM: Yeah, I think grid might get you there quicker.

JASON: Okay. So, grid.

MIRIAM: Have you done grid areas? Grid templates?

JASON: I have. But I don't remember the syntax off the top of my head.

MIRIAM: Okay. Grid-template. And then in quotes, let's say we're gonna have an image.

JASON: We have an image.

MIRIAM: And then next to it we're gonna have the header. And the height of that should be auto-sized to the header probably. So, auto. And then -- yeah. And then space -- let's see. Not actually a comma there.

JASON: Oh, okay. I'm gonna be like image...

MIRIAM: Yep.

JASON: Text. Auto again?

MIRIAM: We could say that one fraction. We want that to be able to grow and shrink.

JASON: Okay.

MIRIAM: To take up the remaining space. And then a slash. And we put in the size of our two columns. So, the first one you could say, maybe it's a min/max. Or 150px, that works. You got it.

JASON: I went to 150 because I sized this at 300.

MIRIAM: Great.

JASON: So, min/max, actually, just for the sake of demonstrating that, because that's not one I'm super-strong on. What does min/max do?

MIRIAM: Min/max is fancy. It's like using min and max. What's fancy about min and max, you can put in intrinsic sizes in it. It only works in grids. But let's say you want the minimum to be the min-content. And you want the maximum to be max-content. I mean, you could -- you could do that. That's sort of already what things do by default. So, that's not really what you want here.

JASON: Gotcha.

MIRIAM: And min of the image is weird. You're gonna say, the smallest we want the image to get is 150 pixels. And the largest we want it to get is, boy, I don't know. You could say --

JASON: Max --

MIRIAM: You could say fraction, 300 pixels. You could go wherever you want with that.

JASON: You know, this will be another like, today I learned. I didn't know that you could use decimal points in the fraction values. I thought it had to be 1s and 2s.

MIRIAM: No, what's really fun is if they don't even add up to one, you can leave extra space around. So, you can have things grow to less than the space available.

JASON: Oh! Cool!

MIRIAM: As long as they don't all add up to 1 yet, there will be some space left.

JASON: Fascinating. Okay. That's a tip to take home.

MIRIAM: Yeah.

JASON: Okay. So, let's say for this one, we'll give it -- it can go up to 1x, its actual size.

MIRIAM: You've created four columns -- one thing in each space.

JASON: Look at this just to demonstrate for everybody. This is the actual grid you have created. I don't know how you can see, get my mouse to show it and keep it highlighted. Click on the bottom.

MIRIAM: There you go.

JASON: Oh, perfect. It shows we've got the upper grid here and the title is in the next thing. And another one here, and this one sitting empty.

MIRIAM: Right. And really what we want, if we tell that image to take up both of those spaces and we can do it by setting to grid area image.

JASON: Okay. We do that with --

MIRIAM: Image.

JASON: Image grid area is image.

MIRIAM: There grow.

JASON: And it's like magic, it just works.

MIRIAM: You maybe want to gap?

JASON: I was thinking that.

MIRIAM: Great. You're all set.

JASON: Magical. Like what a glorious -- what a glorious tool grid is.

MIRIAM: Yeah. Grid is amazing and people should reach for it.

JASON: Yes. And so, then I can do a little bit to make this look a tad bit nicer. And so, I'll say if it's the heading or the paragraph, we'll just turn off the margin because we've got the gap for that.

MIRIAM: Great.

JASON: And now we have a nice-looking little layout in our grid.

MIRIAM: Great. Let's check it out at the different sizes.

JASON: I'm going to go here. And that looks a little funky. But this looks nice, right? We're getting there.

MIRIAM: Yeah. So, part --

JASON: But --

MIRIAM: Part of what's happening there is min/max expands before fractions expand. We're off topic at this point. But grids expand in three stages. First auto-expands, and then min/max, and then fractions.

JASON: Oh. Interesting.

MIRIAM: So, when there's space for -- and auto does a roughly minimum to maximum. So, first the auto expands so that the image takes up whatever space it needs to for its basic size. And then the min/max expands to give it the 300. And then what we gave to the text starts expanding.

JASON: Got it. Okay and so, this is like -- I love this. Usually like I think as a -- a tribute to how thorough the edge cases are here. Most of the time when I'm talking to somebody about CSS, what they'll tell me is, that's just how it works. So, like having you step through what's happening under-the-hood is blowing my mind right now. Okay.

MIRIAM: Great!

JASON: And yes, as the chat says, we are always off topic.

MIRIAM: Good. Glad to be where we're expected to be. So, yeah, this works great. Except let's create ourselves a layout to put this card inside of.

JASON: Okay.

MIRIAM: Say we maybe have a main and a side.

JASON: Okay. So, I will set up my main. And we'll set up our aside. And for the aside, I think we can do something like -- just -- blue.

MIRIAM: Right.

JASON: So we can see it. And that way we'll be able to -- I guess --

MIRIAM: Right now it has no size.

JASON: Right.

MIRIAM: But we can put a card in each.

JASON: Okay. That's a good idea. So, I'll take this card, I'm gonna put one in here and one in here. And maybe can I format you? Yes. So, now we've kind of got our setup. But that's not doing what I want. And I guess if I make an actual layout here, I would maybe do this with -- I guess because I'm in here I'll just kind of do the old trick. Is this gonna -- is this making you sad?

MIRIAM: No. I mean, that's a perfectly reasonable way to do it.

JASON: Okay.

MIRIAM: You can also use the body for that. It's there.

JASON: Oh, right! Because we have -- I was -- yeah. We don't have the -- it's not visible but, of course, CodePen is putting it there.

MIRIAM: You've got the wrapper. There's no harm with that wrapper.

JASON: We can say, we can display flex it. Why not? Let's not add any elements we don't need today because that's what this platform is for. And then we can say, give it like a gap again of 1 rem. And then we want to have -- maybe want the aside to be -- I already have the aside stuff down here. So, we can make the aside max width of -- here, why don't we just give it a fixed width.

MIRIAM: Okay.

JASON: That will give us some chaos.

MIRIAM: And already you can see the problem, right? We've got two cards. But they're both expanding at the same time even though they have different amounts of space. And that doesn't -- that doesn't make sense. So, we're gonna use container queries now. And for that to work, we first need to design our containers.

JASON: Okay.

MIRIAM: Because we need to tell them, you lay out your width. Now, this is gonna be tricky with Flexbox potentially. Because we're telling the containers, lay out your width as if you have nothing inside of them. But let's do it and see what happens.

JASON: Okay.

MIRIAM: Main and aside, we want to add a container type of inline size.

JASON: Okay. So, here we'll go with main and aside and container -- oops. Container type. Inline size.

MIRIAM: So, one of them we've given a width. So, it's getting that width. The other one we haven't. So, it's in a Flexbox and it's collapsing.

JASON: Okay.

MIRIAM: This is where, I would, again, maybe use grid instead of Flexbox to get the layout.

JASON: Okay.

MIRIAM: And just add two --

JASON: I can do that.

MIRIAM: -- two grid columns. And then that's giving it -- instead of Flexbox, which takes intrinsic sizes and figures out how to combine them, grid is imposing a size from the outside. And so, we get our extrinsic size which is what the container needs in order to work. So, now we've got those two spaced and they're both containers. And now change your media query to a container query. That's it. @media. Change it to @contain and we can both go take a nap. I mean, there's more we can play with here.

JASON: I feel embarrassed that I waited so long to learn about this.

MIRIAM: I mean, like you saw, there's edge cases you need to be aware of. But otherwise that's it. I -- yep.

JASON: Can I -- I want to show everybody one of my favorite things that I learned about this. So, we can take this whole query. And now that we've got nesting...

MIRIAM: Yeah.

JASON: We can do this.

MIRIAM: Very good.

JASON: Like... look at that! It's so good. Okay. So, I want to get on a little soapbox here about how -- like deceptively cool this is. Because one of the things that I always hear people say, I can't use CSS because... there's a lot of reasons people don't want to write CSS. They want CSS-in-JS, Tailwind, something like this. It comes down to the idea that the web has moved to components. And CSS is built for pages. So, how do I write -- I need a styling solution that's component-focused. What is more component-focused than this? Everything related to this component is completely contained, including the queries on how to lay it out at different sizes. And it's not done in a way that when something like container queries ships, we have to wait for all of the libraries to figure out how to implement it in their different, you know, JavaScript-based solution or tachyon-based solution or whatever the thing is that they're doing. It just works. Like you just get to start writing some nesting, you just get to add this container query. And the CSS you wrote yesterday just gets a little bit better and you don't have to wait for anybody to merge a PR. This is amazing.

MIRIAM: Yeah. And there's that -- I've always heard that there's the paste layers of the web. You sort of mentioned it earlier. Where like the tools move faster. And browser engines move slower. And that's the way it's designed. And what I have been finding recently is it feels flipped. Tools are really worried about supporting everybody. And that means they're not picking up a new feature for 5 years. Browsers are figuring out how to ship something like container queries with 2 years notice. And we've sort of flipped the thing. Where now browsers can ship container queries. And the tools won't pick it up for another 5 years. Because they're scared about backwards compatibility for their most conservative users. And so on and so on. And they have to figure out how to build it in and you don't get a choice. You have to wait for them. And that feels backwards to me. Tools should let you access the language. I mean, I think that's the core of it to me. It's like times don't have to move faster, they just have to let you access the language.

JASON: Yes. And I'm glad you're here. A lot of times, I'm trying to say what you just said. But I do it by waving my arms. But you clearly articulated a frustration that we have. I feel like at some point we now threw a line in the sand that says, you can either choose to use this tool and do it with all of their quirks and whatever decisions they make. Or you can have access to the platform.

MIRIAM: Right.

JASON: And I think the reason that I get -- why I have never been able to fully let go of just writing CSS. And you know I tried the CSS-in-JS stuff, I tried Tailwind. They never stuck for me because I always felt I was somehow being removed from the source of truth. I was always sort of an abstraction layer away that didn't feel like -- I don't know, I like JavaScript as an abstraction over whatever is happening in the compiler. I didn't feel like any of the make CSS easier solutions actually made CSS easier. I just felt it was a hoop to jump through which gives fewer features of CSS. Sometimes what you're trying to do with a framework is trying to put training wheels on it so people can do less harm. CSS, people want to pretend it's not a programming language. It is wildly powerful and people can get themselves into a lot of trouble with it if they're not thinking about how much power it has. That's why we see the double important hacks and all the messes people get into. Z index 9,999,999. I get so excited when we see these moments of like the community getting so amped up about the direct tool. Not an abstraction of the tool, but the tool itself. And I think that's why I like this -- the motion that you've described of like container queries are shipping. Nesting is shipping. The layer stuff that I've seen, but haven't really gotten to play with at all. And some of these other features like view transitions. And these platform features that are shipping that mean we can do stuff and we don't have to wait for somebody to figure out how to do it in React or Vue or Svelte. We can just do it in the browser. And we can do it with confidence that it's not gonna break in a year and a half when they ship the next major version of the thing.

MIRIAM: Right.

JASON: So, anyways. Little like soapbox rant there. But like... it's just delightful. I love this. And what I love more than anything about this, is that this syntax that I wrote here, we can ignore this and come back to this 2033. And assuming the Internet is still up and running, this will still work.

MIRIAM: Yeah.

JASON: And I love that about using the platform.

MIRIAM: Yeah. Yeah. Great. Good rant. Excellent.

JASON: So, what I would maybe love to dig into a little bit here is are there any -- like you mentioned a couple nuances. Like Flexbox make this is challenging. Does that mean that like you shouldn't use this with Flexbox? Or if I'm trying to build a component system with container queries, how do I make sure that it will do the same things that I was attempting to do before when I was shipping heavy CSS in JavaScript or something like that?

MIRIAM: Yes. Okay. So, there's sort of two things we have to think about with Flexbox particularly. So, Flexbox is generally designed to take the intrinsic size of the things and figure out how to make them fit. That's the purpose of Flexbox. And if we're trying to make a layout, that's the purpose of grid. And that's how I would think about those two things and when to choose one or the other. Am I trying to make a layout? I know what the layout is that I want? I want the things to go into it. Or am I trying to take some things that have intrinsic sizes and just get them to fit? And if I want the things to just fit, that's Flexbox. If I want the layout imposed with the outside, that's grid. There's other considerations and reasons you might go one way or another. The other part is when we're adding Flexbox to things that are going to have that inline size containment. They're gonna collapse by default unless we give them some other rules. Because we're taking away their intrinsic size on the inline access. And so, if we don't give them something else, they're gonna collapse. So, the one thing that we could have done also is just add flex one, right? And that says it can grow instead of just shrinking. And that may have gotten us there.

JASON: Oh, interesting.

MIRIAM: I mean, we could try that here. You could try switching that back to flex and then if we give the items a flex of 1... there we go. Now they still should shrink. But they're allowed to grow. So, we've got a reasonable something. And if we -- we probably now want to give it some constraints of like you're allowed to wrap, if there's enough here, go to a new line so that they're not getting tiny. We could even just give them min widths. So, there's ways to make this work with flex. The -- yep.

JASON: No. I -- I was just kind of thinking. And I realized I was gonna vocalize something that had nothing to do with what you were talking about.

MIRIAM: Great!

JASON: Please, continue.

MIRIAM: The other thing is let's say -- I mean, we don't necessarily need the main and the aside for this. But let's say we had all of our -- we had several cards together in one space. And we want to give them a sort of repeating grid. So, if we had -- let's -- I don't know. Six cards in the main area?

JASON: We have --

MIRIAM: Or however many.

JASON: One, two, three, four, five...

MIRIAM: That seems like enough. And let's make the aside be a little like it's not taking up all of our space. Yep. There we go. So, let's say we want that main area to be a repeating grid.

JASON: All right.

MIRIAM: And we want those elements to just fall on the grid, those cards to just fall on the grid. So, set the main to be grid display with grid template columns. Of -- let's see. It's repeat. And then we probably want auto fit. And then we're gonna did do a min/max in there. What's the smallest they can get?

JASON: Let's see... 150 plus. So, let's call it 200.

MIRIAM: Cool. And I think on the -- yeah. Well, pick a -- pick a large size that's larger than our container query, right? So, that they can --

JASON: Yeah, container query was 500, right?

MIRIAM: Yeah.

JASON: We'll say the biggest they can get is 600.

MIRIAM: Now, it's not actually clear to me if we can get our viewport large enough that they actually go side-by-side ever.

JASON: Let's see.

MIRIAM: We might have to remove the aside. There we go.

JASON: Zoom out!

MIRIAM: Right so, there is -- well, actually, it's gonna work the way that you've done it. There's a potential issue here. Where we're trying to measure an element. Right? We have to measure something that's on the page. And right now we're measuring the card. But what if you wanted to style the card based on its own measurement?

JASON: Right.

MIRIAM: Like, let's say we want the card to get a different border color when it's large?

JASON: Okay.

MIRIAM: How are we gonna do that? What would we measure?

JASON: We... oh. So, we would just put it in here, right? Like container query...

MIRIAM: Well, the card isn't the container. Right now our main area is the container. And actually you can see, when they go side-by-side... oh, I think actually we want one fraction on that if we want it to be able to switch before? Would that work in our min/max?

JASON: In our min/max, we do one fraction as the largest?

MIRIAM: As the largest. I think so. You can see that. They're not doing what you want in the container query. They're still treating the contain as the size of the main area.

JASON: Oh! Oh. Interesting!

MIRIAM: They're measuring. We set main and aside as containers. So, that's what we measure. The main area is big. So, we've got the media query problem all over again.

JASON: Yeah...

MIRIAM: So, this is where we need a little bit of extra wrapper dives.

JASON: Okay.

MIRIAM: And I call these turtle components. This is the thing that you want to think of if you're really moving a component around. It might have to carry its container with it in order to measure space inside of a Flexbox or grid. Because otherwise there's nothing to measure. We can't turn a grid column into a container. We can only turn elements into containers.

JASON: Okay.

MIRIAM: So, if we add container wrappers around each card, then they can --

JASON: Okay. So, we'll go with the... pull out a card wrapper.

MIRIAM: Great.

JASON: And it's a little bit... and 'cause we --

MIRIAM: Yeah.

JASON: -- did all of these the same, I can just delete them all. And one, two, three, four, five. And that should give us back our six.

MIRIAM: And now we want to add container type inline size to those. There you go. And now --

JASON: Excellent.

MIRIAM: -- they'll be vertical if they have a little bit of space. And if they are ever able to get more space, which I suppose we could change repeat to two or something.

JASON: Yeah.

MIRIAM: So that we see when they get enough space, they go horizontal. So, you're gonna want to nest containers, containers inside of containers inside of containers. If you remove the container type, you'll notice the queries just stop working. There's no default container. You need to define containers in order for container queries to work. That's not a bad fallback.

JASON: Right. It just kind of does what the original styling says it would do.

MIRIAM: Right.

JASON: This is maybe a little bit too much image for what we're after. But it's not broken.

MIRIAM: Right. Yeah. So, I would at the start of a project where I want to use container queries, I would take my top level elements of the layout, my main aside, header, footer, whatever, wrapper, div, whatever it is. I would just add some containers to the main boxes of the page. Adding containment en route gets messy. So, I would avoid that for now. There might be ways we can fix it. But right now it does some weird shit you don't want. A little bit safer on body if you're clever. But yeah. I would just take the main sections of my layout and add containers to them. The other thing that we can do here is we can give containers names.

JASON: Oh, okay.

MIRIAM: So, we could say, let's -- you can either add a container name property...

JASON: So, we would give it container name.

MIRIAM: Yeah.

JASON: And then you call it whatever you want.

MIRIAM: Call it whatever you want.

JASON: Is it quoted?

MIRIAM: It's not quoted.

JASON: Okay.

MIRIAM: And it's a space-separated list so you can name it whatever you want.

JASON: Oh, you could give it like --

MIRIAM: You use these classes sort of.

JASON: Yeah.

MIRIAM: Yeah. And you could reference any one of those names in your query. So, now we could say, that query is specifically for before the parentheses we can put the name of a container. And say...

JASON: And you do just the one or can you -- can you compound them like that?

MIRIAM: I think you can only put one in the -- well, I mean, we could try here. And find out if I'm remembering that right.

JASON: If I add both... it doesn't like that. So, yeah, one at a time.

MIRIAM: Yeah. So, I'll often say -- yeah. I don't think it's gonna do that. I will often think of them both in sort of like I have -- I have layout containers and I have component containers. And I have containers for specific things. So, I would say, aside and main both get the container name of layout. And also, a container name of main or aside. Maybe. I don't know. And then these card wrappers get a container name of -- like you did -- wrapper card or component card or something. There's a short hand for this. If you're gonna do a name and a type, you can just do container, colon, and then any names and then a slash and then the type.

JASON: Okay. So, like component, card, and then the type. And there was a question in the chat.

MIRIAM: There's a slash there before the type. Yep.

JASON: Got it. Okay. That's cool. So, these are arbitrary. And then this is whatever the type is. And then are there other types beside inline size?

MIRIAM: Yes. There is size. There is not block size. There are too many times where the width of something impacts its height.

JASON: Okay.

MIRIAM: We weren't able to isolate just the block size. Now, you can do size. Now, the thing with that, and we can play with it here. We can add size containment to those card wrappers. You're still --

JASON: Very -- oh. Wait. I have extra things in here. That's so cool... oh...

MIRIAM: Well, let's -- there's nothing right now querying those because our --

JASON: That's true.

MIRIAM: -- our queries are getting to the wrapper and saying we found a container. We're good. So, right now nothing is querying those main and aside containers.

JASON: Oh, wait. So, we could potentially do like two in here.

MIRIAM: Yeah.

JASON: Oh! So, we could do something like if the card is over 500, then, you know, we -- we want to do something. But then if the layout gets over, say, 600, we can -- I don't know. Let's just make the back ground red for now so we can see this happen. Because that's very cool.

MIRIAM: There you go.

JASON: Wow!

MIRIAM: Yes.

JASON: So, how useful is this? Because I was just thinking, like, I like that this shifts here. But I actually don't know that I want like that to be that big. Like maybe I want something else to happen. But if this was inline, like if we break down to, say, whatever the -- I would have to fix this to have like a non-grid part where it just shows one at a time. But like in the column, I definitely want the image to be full-width. And if somebody is on the a 500 pixel wide -- or a 499-pixel wide phone with, I want it to fit the screen. But maybe not on a case on a viewport like this. I can think of a lot of reasons why I might want to have that tweaky control. And knowing that I can do duplicate containers like that and kind of make choices on the component itself, on the container the component is displayed in. That's really powerful stuff.

MIRIAM: Yeah. And that's why I would recommend adding names to containers. Even if you're to the sure when you'll use them. You may come back later and be like, I just wish I could reference that container. So, a container query, it's gonna look at every selector inside of it. It's gonna match that element. So, it's matching the card. Which because you're using nesting doesn't look like it's inside. But it is. It matches that card. And then it says, okay. Where is my nearest container that has the name that I've requested, if I've requested one? And is able to answer the question about its width? So, that means it has to be either a size container or an inline size container. Which is really the only two values we're playing with at this point. But so, it says, where is the nearest container that can answer this question? Like has the appropriate type to answer this question and has the appropriate name? So, you're always gonna get the nearest one by default. And then if you use names, you can sort of jump over containers and access a different one.

JASON: Fascinating. I mean, this is so cool. Because like I said, you know, it -- it gets oversimplified whether you say, well, I don't really know what those are. And the answer is, well, it's just a media query for a, you know, a div instead of a page. And it's like, well, yeah, but it's a lot more than that when you dig into what it does. Both in the complexity it takes to make it work. And in the nuances of the application here. Like this is some really, really exciting stuff. So, I cut you off earlier when you were talking about the difference between inline size and size as container type

MIRIAM: Right. So, let's change those main and aside to be size containers.

JASON: Okay.

MIRIAM: And you'll see, they just collapsed.

JASON: Oh...

MIRIAM: Because now we've extended that containment problem. Now, the place where this might be fine is if we say, those are by default they're 100% of the viewport height. They have a height of 100vh. They might not work exactly the way we want without messing with some padding and stuff. But it will get us close. And okay. Great. But now they also need to be overflow. Basically, any time we're adding a height and overflow to something, then it's safe to make it a size container. And that means we can query its height. But it's gonna be in these cases where we're doing sort of an application layout where things scroll separately or any place we're adding height and overflow.

JASON: Yeah. So, if we were doing an overflow-wise scroll...

MIRIAM: Right. So, now you can create a height-based query on that main element. Because --

JASON: Oh!

MIRIAM: It has a height defined from the outside.

JASON: Okay. So, then if I do something like... so, the height -- let's see. How is that gonna...

MIRIAM: It's gonna be based on your window height.

JASON: And it's viewport height, not inner content height.

MIRIAM: Well, it is the inner content of that element. Although you've set that element to be the 100vh. It's gonna be the viewport height just because you have used that in setting it. Does that make sense?

JASON: Yeah. Is there a way that you could do something -- an application I'm thinking of is let's say I've got a list of -- of like thumbnails of photos and I'm doing an image gallery. And I want -- if it gets above say 800 pixels or something that they just start to kind of like lower in transparency. So, they kind of look like they're trailing off at the bottom. Is there a way to set a container query where it's like well, if I've got -- I know that the thumbnails are square. So, for every 50 pixels of height, I'm doing a thing. If it gets over 400 pixels high, that means I've got my eight rows. So, I want to start fading them out.

MIRIAM: Yeah, sure. I don't know how you're gonna do that fading exactly but you could definitely do that query.

JASON: Sure.

MIRIAM: And then you're figuring out how to do the fade

JASON: Yeah! Okay. Fascinating...

MIRIAM: But you have to be in a situation where -- the thing that can't happen is those images can't be what gives the container its size. It has to be getting its size from somewhere else.

JASON: Okay.

MIRIAM: That's the trick of containment. Is once you set containment, the size has to be extrinsic instead of intrinsic. It has to be based on something -- anything other than the content.

JASON: Got it.

MIRIAM: So, that can be the explicit height that you gave it. Or that can be a grid row that has a height. Or --

JASON: And if we did -- so, if we did like repeating grid rows for each thing, that would be able to set the height. But like I couldn't just rely on it to pick up that there are 80 images which means that it's gonna have, you know, 400 pixels of height. Which means...

MIRIAM: Well, so, the container, whatever you're putting those images in, if you add size containment to it, it ignores its children when laying out.

JASON: Oh!

MIRIAM: It has to get a height from somewhere else.

JASON: Got it. So, it is nuanced for sure --

MIRIAM: You have to have a container query in this that can measure what that height is and respond to it.

JASON: Got it. Okay. I think I understand. I would have to have a think on how I would actually implement something like that. And, you know, who knows, maybe it's one of though things that's like, sounds easy! Is not!

MIRIAM: I think there's some complexity there. But generally when you have something that's overflowing, that means that it's getting its height from somewhere else. Because the contents can't size it if the content is overflowing it. If you have something that's overflowing, that usually means it's safe to add size containment. And then the things inside of it can measure its height.

JASON: Got it.

MIRIAM: Yeah.

JASON: I mean, this is very, very powerful stuff. And I already have a bunch of ideas spinning in my head around ways that I'm gonna use this that, you know, sometimes I wish I would just take some time to learn about things. Because I'm like, oh, I can see a lot of places where this would have saved me significant pain.

MIRIAM: Do we have 5 minutes to look at another thing?

JASON: We certainly do. We have about 15 minutes left.

MIRIAM: Great. Let's say you want responsive typography. You want the headers to change based on the size of their --

JASON: Absolutely yes.

MIRIAM: -- of the container.

JASON: Of course I want that, yes, please.

MIRIAM: Great. How would you do that now? I'm imagining viewport units in a...

JASON: I am imagining that I'm going break my brain by attempting to use a clamp.

MIRIAM: Great.

JASON: Is how I would go after this. So, I would say something like, I don't know, maybe it's like two and then we'll go with two, and then we'll max it. Is that how that works? I don't think that -- I think I did that backwards.

MIRIAM: Yeah. You did that backwards. You want the vw in the middle.

JASON: We'll call it -- and just take some wild guesses at what this should be. See what happens. Trying to --

MIRIAM: It's doing a thing. And there would be ways to like if you -- it's often good when you're using VW or something like that to also include sort of 1n plus some amount of vw. So, that there's some still respecting the font sizes that are there. And some taking into consideration. So, yeah.

JASON: I'd never even kind of considered that that was possible.

MIRIAM: Yeah.

JASON: Do I need to calc this?

MIRIAM: No. Inside of a clamp you're basically in a calc already. So, that works. But it's ignoring the containers.

JASON: And it is confusing me. I'm already looking at this like, I don't know how I'm gonna actually make this work.

MIRIAM: Change vw to cqw.

JASON: Don't you dare.

MIRIAM: That's it. There you go. Now they're responding to the size of the container. You can see as the container gets bigger, it's increasing. But the one that stays the same size, the heading stays the same size.

JASON: Oh, my goodness. This is very upsetting to me because the amount of pain -- the amount of pain... that's incredible. I mean, that's so -- that's so useful. Yeah. And I can see already like where I would want to tweak this a little bit when the layout shifts to grid and --

MIRIAM: Sure. Right.

JASON: We have the container query familiar. But the fact that this is responding toes it own size. I think and the way we can prove that is we can probably do something like change the mid-width here. No, I want you to wrap. Why don't I just do this? I'll just turn off the grid for a second. And look.

MIRIAM: Yeah. Yep. There grow.

JASON: Incredible. That is so handy. Like -- yes. I can see a lot of -- a lot of my CSS hacks are going to be replaced with this. Or not even hacks. Just overwrought like calces based on different things. Trying to figure out, oh, well, if we're in this view, then there's gonna be this thing in here. We got to account for that. And then do some math, to figure out, we're this many pixels away from the edge of the screen because I have a max width in my main container. It's very hard to keep in my head. So, this? Ah, it's so good.

MIRIAM: Yeah, and you've got all -- basically it's all the same as with the viewport, viewport width, height, viewport inline, viewport block, viewport min, viewport max. There's probably others.

JASON: I only knew about height and width.

MIRIAM: Yeah, there's a bunch. You have all the things with cq. Replace the V with a CQ. For this, we decided, it wasn't reasonable to say it doesn't work if you're not in a container. That would be too fragile. This falls back to the viewport units. If there's no container, we give you what the viewport unit would give you. Technically -- if you didn't know there were more viewport units, there's also small and large viewport units which are newer.

JASON: What?

MIRIAM: So, the small viewport is the viewport when all the Chrome is in. So, if you think about a mobile browser, it usually has like browser chrome that appears and disappears. There you go.

JASON: What? [Giggling with joy]

MIRIAM: That's the large and the small viewport.

JASON: No way!

MIRIAM: they will fall back to the small viewport.

JASON: This is incredible. I had literally no idea this was a thing. Gonna have to dive into here. Because this is the one complaint I've had about vh. You just sort of have to live with the fact that when somebody scrolls up, you're gonna have a slightly broken layout. I'm gonna live with that. Now I don't have to.

MIRIAM: You don't have to. I think this is shipping everywhere. You can check. It's fairly recent, in the last year or two. But I think it's fairly well-supported at this point. Check can I use. Oh, really? That's SVH static. That's something else.

JASON: Here.

MIRIAM: Yeah. There you go.

JASON: So, it's -- I don't know why -- I guess they still show that because there's all the corporate clients out there. But it's everywhere.

MIRIAM: Yep.

JASON: That's cool. This is really, really cool. That's gonna -- who knew? Who knew? I guess you knew.

MIRIAM: There's a couple people that have worked on it. But...

JASON: This is amazing. I -- yeah. I -- okay. So, I'm gonna ask you probably a question you get asked a lot. Or I hope you get asked a lot, which is for somebody like me who is probably not going to keep up with all of the issues on the working group, how do I -- how do I find out about this stuff? Like is there a newsletter? A feed or something I can subscribe to?

MIRIAM: Web.dev does a pretty good job of releasing articles. I think they've got a sort of series on their blog of what's new on the platform. Or what's broadly supported on the platform. Yeah. And they'll do a sort of a monthly -- Rachel Andrew will write it -- sort of monthly, here's what landed and here's what the support look like for it. That's a great place to follow. I mean, if you want to get -- it sort of depends on the level of detail you want. From there, you could -- each browser has a blog where they post release notes. So, you can just follow Safari's blog or Chrome's blog. Check their release notes. And see with each release. And that's gonna give you a little bit more detail. But a little bit more of a firehose.

JASON: Sure, sure.

MIRIAM: And that's sort of like you can keep zooming in there the more interested you are. And the CSS working group's GitHub is not where you're gonna find out what landed in browsers. But it is CSSwg.director/drafts. It probably links to their issues. Open issues.

JASON: Open issues... here.

MIRIAM: Yeah. Oh, that didn't take you to the GitHub. The group uses GitHub. Yep. That's the one.

JASON: Okay, so...

MIRIAM: It's where all the specs live and where all the issues are tracked. Yeah, it would be absurd to try to follow every issue that's happening here. But if you have a few issues you're interested in, it's totally worth tracking them. Participating in the conversations. You can sort of -- everything is labeled by the spec that it's part of. So, you can be like, okay, I'm interested in something that was defined in CSS contain 3. And that's where container queries were defined. I want to see what issues are open against that spec. I want to file an issue. Here is something that's not working for me. You are totally -- this is public. You can file issues with the CSS working group. I think -- I mean, it's great if you learned container queries from this. But also, the way I got involved with the CSS working group is I filed an issue. And I was terrified. But somebody told me to do it. Jenn Simmons was like, yeah, no, that's a real -- that's a real problem you're having. Go file an issue. And the working group agreed it was a problem. And we got cascade layers.

JASON: Cool...

MIRIAM: That was -- I said, here's a problem that I see with the cascade and I think it can be fixed. And I didn't have a solution. And I think that's important. Coming in with a pre-set solution will often not get you real far. But coming in with like a, here's a problem I face every day. Is it possible for us to solve it? Here are some ideas? Will go a long way. And people -- sometimes the answer is no. We can't solve it. Sorry. But at least you'll find out. Feel free to file issues.

JASON: Yeah. All right, this is --

MIRIAM: Or search and see if somebody else already filed it.

JASON: Sure, sure. I mean, and this is really cool. Because like vdawg in the chat just asked, what about masonry if I type in masonry. And look, here's a huge amount of information about what's going on in here. And I imagine if I poke around long enough, I'm gonna learn like why -- like what people want, what's is viable. And what the issues are. And it looks like here's some performance problems, stretching by default. There's the same amount of information you gave on why it was so hard to make container queries work. We can find those same reasons. Why is it taking a while to make this happen? Probably a million little reasons that you're just not thinking about. Actually, that's really inspiring to hear was the way you got involved was that you opened an issue and that you were scared. Because I think if I think about opening an issue for one of the working groups, I am definitely kind of like, ah, that feels like a lot.

MIRIAM: Yeah. And I also -- when they said, yeah, will you come help write the spec. I've never written a spec. I have no idea, what the fuck? What the fuck? I don't know how browser engines work. I still don't really know. Like I keep learning more and more as I'm dealing with them. But I feel like, you know, I'm a designer working with developers in this situation. Right? Where usually I'm a developer working with designers. Who I get to a browser image, I'm saying here is the design I want for CSS. And they have to figure out how to build it and tell me whether it's possible. But there are -- that's why there are both CSS authors and browser engineers in the working group. We --

JASON: Right.

MIRIAM: -- work together to figure it out. I don't have to understand the internals of a browser engine entirely in order to have those conversations with the developers. So, it's -- it's less scary getting involved than it is. I mean, it's terribly scary. But you don't have to know everything to start contributing.

JASON: Sure.

MIRIAM: You just -- the main thing is that you have to think about will it work for everyone across the web in 10 years? And that's the mental model that you have to shift a little bit from like, will it solve my problem next week to will it also work in 10 years across the web?

JASON: Right.

MIRIAM: You can start by asking the question and other people can bring up that.

JASON: Absolutely. It's such a cool space to be in. And it's like -- in terms of things that will have a lasting impact throughout your career, you know, opening -- like working in open source is a wonderful way to do that. You can -- you can contribute to the community. It helps people. Contributing to the platform is like a next step. Where you're going from something that is popular now and will hopefully be popular for the next two, five, ten years to contributing to something that has been continuous since the -- at least the '90s if not earlier, right? We've just got this incredible collection of consistent models for how we interact with each other online. And contributing to that spec, adding something to it, that's, you know, that's part of history. That's very, very cool. So, yeah. Y'all. Don't be like me. Be like Mia. Go and contribute to the Internet.

MIRIAM: Well, hey, it took a lot of convincing to get me to file that first issue. So, I totally understand. You don't need to. But like, you know, you had that reaction earlier of this is just how it works? And the thing I think that's most important to remember is we can change how it works. It is like an open source tool. The web is an open source tool.

JASON: Right.

MIRIAM: And so, you can go file an issue against SaaS or Tailwind or whatever. You can also go file an issue against the web platform. And say, this is broken for me. Is there a way we can fix it? It's the same thing. It's just sort of at a bigger scale. But yeah. We can fix it. And there's a reason it works the way that it does. So, going and asking the question is worthwhile. It's not just how it works. It's magic. Don't think about it. There is a reason and a logic to it.

JASON: I love it. And with that, I can't think of a better way to wrap it up. So, I'm gonna send everyone one more time to OddBird to go check out Mia's work. Anything else you want people to go check out? We've linked to all of the working group stuff. Is there anywhere else you want to send, a resource, something else of yours you want people to check out? Anything like that?

MIRIAM: Well, I mean, if you go to our posts, that's -- any articles that we're writing or podcasts we're doing or stuff that we're talking about is gonna be linked there. Like I've got that whole article on, you know, why -- can we query the root container? What's the problem there? So, like if you're interested in weird deep dives into why certain things don't work well, I post that stuff sometimes. Or we post just a simple how-to. And if I'm writing articles on, well, CSS Tricks back in the day or Smashing, or whatever else, I'll link them here as well.

JASON: Cool.

MIRIAM: This is a good place to find the aggregated.

JASON: That's -- I think the aggregate is kind of -- like I am lacking in aggregate right now. Like there's -- I guess it's my newsletter kind of. But I'm only like 80% good at that. So, I love the idea of putting together something like this where you're putting everything in together. But with that, we are out of time. So, let me do one more shoutout to our live captioner. We've had Amanda here with us from White Coat Captioning all day, thank you so much. Made possible through the support of our sponsors, Netlify, and Vets Who Code, thank you both for making this show more accessible. We have things not on the list yet. But I have someone from the Google team coming to teach about advanced View Transition. And Rich Harris to talk about Svelte and runes, which I'm super-excited to work on. And working on dates. And I will post those. If you want the updates, get on the Discord, on your calendar, subscribe on YouTube or Twitch. Whatever makes you happy. Mia, thank you so much for spending time with us today. This was an absolute blast.

MIRIAM: Yeah, thanks for having me. It was a lot of fun.

JASON: All right, y'all. With that, we're going to find somebody to raid and we will see you next time. Later, y'all.