 Welcome to the CSS podcast where we cover all things CSS from anchor to sub-grid. This season we went deep into a lot of new and 2022 topics which covered some of the APIs that have landed in browsers this year and a few that are still on the horizon but coming soon. It's been an exciting time to be a UI developer and some would even call it a golden age for web UI. Disagree. Strong disagree. I feel like there's so much happening though. This is a fun time. I'm kidding. Definitely an awesome time. I'm stoked. I would definitely agree with that sentiment and I can't wait to recap some of the topics that we covered this season. I know. It's jam-packed this season. I mean, it's just where to start, where to start. I don't know. There's all sorts of good stuff. The web is just such a fun creative space, becoming stronger and weirder by the month. I love it. I love all the weirdness. The only bummer is that as the web continues to develop and get more power, design tools fallen further and further behind whether that's in color, container query, sub-grid, electrical properties, all sorts of things. I really want to help these new features get into the hands of designers. Let's recap some of these goodies though. It's time to reflect. Get stoked. If you didn't listen to any of the season's episodes, this is a good episode to listen to because it recaps all the other stuff and it will point you to the episodes for you to get more info. Nice. I thought you were going to be like, shame on you. Go back. No, you're so much nicer than that. Okay. Today, we're going to cover cascade layers, container queries, inert has color, well, because we gave an update on color, media query, range, syntax, sub-grid, and nesting. Let's get into it with cascade layers. What do you remember? What was your favorite stiff? Yeah. So cascade layers was really cool because it actually landed early in the year across all of the modern browser engines, pretty much around the same time, which rarely ever happened. So this is kind of a feat and cascade layers are kind of a big deal because they fundamentally change how developers can interact with the CSS cascade. They let you create a new cascade entry point and control the precedence of competing styles, which is something that we were never able to do before. And we would have to use specificity as really the only way to let one style win. But this is a super powerful feature. It's more powerful than selector specificity in terms of that which style wins. And it's one where you have to really understand what's going on because there are some gotchas that you might not be expecting. Like when you have a layer with a higher precedence but a selector that has less specificity, no matter what, if the layer has a higher precedence, that will win. So it's sort of like a great power comes great responsibility vibe. Right. It's almost like before we had cascade layers, the mountain, the cascade mountain, all you could do is fall down it or try to climb it or whatever. But now you can change the mountain. You can move the peaks and valleys and shift them around for your own, I don't know, whatever it is that you need to do. And I had cold feet with cascade layers at first because at first clients, there's so many pieces. Just like you're saying, you have such a big impact on style resolution. I just wasn't sure how I was going to land with folks. But I got to say that after I've been using it for a while, I'm all in on it now. It's just so cool. My favorite use case is like sharing demos because it lets me portion out what styles to care about in the demo and then which you can ignore. I call them like demo support because that's what they are. They're just supporting the main thing I'm trying to tell you and it's always hard to distinguish between like, here's the goodies about this demo. And here's all the stuff that's just, I don't know, holding it up. So I really love that use case and folks used to add a bunch of lines or big comment blocks to do that, but now we can just name a layer and group styles into it. And it has this awesome benefit of showing up the style sidebar when inspecting with DevTools. So you get to leave little clues about what and why styles are overriding and stacking. It's just so cool. I love it. Yeah. The DevTools are nice. And this one does have browser support across all modern browsers, but the progressive enhancement story is one to kind of watch out for here because if Cascade layers are not supported in the browser, it's not like that line of code is ignored and the styles still get read. It's everything in the style block. Everything in the Cascade layer. It's a compute throwing in garbage can. Yeah. It gets thrown out. And that's what makes this one a little bit tricky for me because I know that the majority of people and their sites have a, you know, two major browser versions, browser matrix. And so you could probably use these already, if not soon, for that two major browser versions, which I think that this landed in Safari 14.2. But don't quote me. I got to check that. And in Firefox and in Chromium. The progressive enhancement story here is just a little dangerous. So I think that I would wait just a little bit longer to really use these in production, but they are very powerful. Yeah, that's a good call. I tried introducing it to a colleague's site and they were like, what happens if the browser doesn't understand them? I was like, it just doesn't work. And they were like, cool, I'm not using that. Goodbye. I really wish that it just ignored the line that put it into a layer. But it doesn't, it ignores the whole block. Again, it's just like we're talking about that parsers just kind of bite by bite. It doesn't really know. And it bits some stuff. It didn't know how to chew. And it just goes, I'm failing until the next curly bracket. But we have a lot of cool links, actually, to share with you for Cascade layers to learn about them. We want to update our course soon to include them because it's changed fundamentally how the cascade works. So it's time to get that, learn CSS up to speed. But yeah, check out the show notes for more links. I can't think outside of them now. I like I need them. They solve all sorts of weird situations that I didn't know I needed them for. Anyway, they've been so cool. And I use them all the time for demos because it's sort of my go to, but I've recently been rebuilding my personal site. And I opted not to use them because of the progressive enhancement story. I don't know. It's just if someone's in Safari 12, I still want my site to render some styles. Yeah, fair. Next is container query. So this is the next episode in our season. And this is one of those things that I am most excited to see landing in browsers in 2022 outside of the has suit of selector, which we'll talk about soon. But these are currently partially implemented in the latest Chromium and WebKit versions. And what I mean by partially is that the size queries are implemented and container query units. So you can currently query for a block inline size of an element, not a block size and use container query units, which are based on the parent, the container query, instead of the viewport units, but similar concept with the viewport and container query units. And if you're unaware of this feature, it's just it's just so nice. So container queries let you target a elements parent container when applying responsive styles and not just the entire viewport, which is what media queries can do. So this one is has been super handy. I was just mentioning that I was redesigning my blog recently and I have sections there where I have like a single column and multi column layouts, but then within those I have individual like little blog card type things. And I didn't want to have to restyle those multiple times. So container queries would be really handy here where I could just have some styles for no matter how big the parent container is, no matter where they live on a page. If they're in like a little carousel or if they're inside bar or if they're in the two column layout, one column layout, three column layout, they still look good. That's the idea. Little smart widgets like, hey, go over here and they're like, I know what to do. Yes, we'll go over here. It's like, I know what to do. I don't want to brand them smart widgets, but yes, logical components. That's that sounds fancier, doesn't it? It does. OK, so you're on your blog and you're designing with them. Tell me that here's one of my trippy. They I trip on this with container queries. I go and I give a container containment and it collapses. What's your tip? Yeah, so that one's this is one thing that I also wish works, but it doesn't if you could just have containment on like a self placing item, but you can't because you have to have some kind of size there. With that, you need to make sure that you're giving some kind of size. So one thing that I do is use aspect ratio for this, where it might take the width and then the aspect ratio for like an image or where the card or something so that the browser knows how to render its size. That's one that I kind of run into a couple of times. What I really wanted to do one time was a responsive grid that had container query cards inside of it. Yeah. And I wasn't able to do that because the block size was determined by the content and the browser is not able to know what the rendered size should be to apply the container to know what its parent size should be. And it's just like an endless loop there. It's gotten me many times and my escape hatch has always been at an extra div. I had an extra div and I'm like, hi, you aren't going to be told anything other than to be a container. You're just going to be this container. Yes. And then everything else can get some sizing. And so it's like instead of me trying to overload some container, which is just the bummer is is that's the way we think about it. They're like a display grid. OK, now be a container. And it's like, why not? You're like, oh, right. But that doesn't solve the dynamic height thing if you want to have containers. Yeah. So I just put an extra div on there. Just put an extra div around it all. It's just like an empty nothingness, except it's a container name. And then I'm like, OK, well, this thing will have the size of this container. And I'll ask it for stuff. It's not exactly the container I thought I was asking for, but it's wrapping the container I was asking for. And so it seems to do the same thing. Anyway, that's been one of my escape hatches, is additive and just make it a really lame div. I usually have a separate container anyway, because pretty much you need like a parent. You can't query itself when you're styling something. So my perspective is like, oh, I want to style this like meta content, but you can't query its own parent container. You've got to query its container and then apply the styles because you've got to look at something. You've got to look at something. And it feels like the dumber that something is. And I mean, the dumber like the less styles and complicated stuff that it needs to do, the better. So I don't know. That's my container query tip is if it's collapsing, try adding a div. And yeah. All right, what do we have next? We have a nerd. Oh, yes. OK, I've been using this one a ton. This is a staple in my tool belt. It allows me to create inclusively hidden UI. And I really like that about it. So whenever something is off screen or it's overlaid, I get to easily create focus areas and help match the visual experience to the assistive tech or keyboard experience came in handy for a carousel, comes in handy for dialogues. There's all sorts of use cases where inert is kind of cool. Yeah, this one is very much a mix of like the HTML and CSS of the CSS podcast, but we got some CSS in there, I remember. Yeah, you can target it with a selector and see it. Next, we have has, which I had mentioned a minute ago when I talked about container queries. So this is a feature that just fits right alongside of container queries in terms of enabling us to write logical adaptive components or smart widgets, as Adam just named them. And it landed in the same time in Chromium, which was super cool because you could just use them both together. So with has, you can select pretty much anywhere within a UI, including selecting a parent based on its children. So people call this the parent selector or the family selector. You could check to see if a parent selector has some children or if those children have a certain state like hover or invalid or even the number of children that it has to create quantity queries. So it's such a dynamic, useful feature. And I don't know how we survived without this selector. Yeah, it's just so useful. You can remove so much JavaScript. It's like you can you can select the parent, then select a child, then select a parent again, then select a child. And then anyway, it's very, very cool. Here, I have a question for you though, Yuna. This stuff was supposed to be impossible. Has was supposed to be impossible. Container queries were impossible. What happened in 2022 that unlocked this stuff? Why did this all of a sudden show up after all of the yelling and screaming and crying and whining that the two-year-old wait, I'm sorry, I'm talking about the community, not my children? Why though, it all of a sudden was in availability and it had been like far, far into the future. What happened? I think that there were a couple of things. One of them started in 2014 and 2015, which is a complete rearchitecture of the rendering engine inside of Blank. Rendering NG is the project that if you are interested, you could look up on YouTube. There's a great video from Chris Harrelson about rendering NG. And there's been a lot of articles about how the engineering team just completely rebuilt the engine of Chrome while you were using it over the course of a few years. And we've also been able to prioritize some of this work because now it's been possible and show the value of it to developers and kind of do some data-driven analysis to help prioritize the features of the platform that the engineering team is working on, which is another big shift and has been very cool. And a third thing is working together more closely with other browsers to bring some of this stuff to the forefront of the platform. So it's probably mostly rendering NG, but a mix of all the other things as well because other browsers also have to implement it. They do, yeah. And they also have to prioritize it and bring it to the platform. So this is why I feel like it's really a golden era for UI development. And there's been so much that we've been able to accomplish in the past few years and years to come. It's amazing. It seems like there's a performance boost in the engine, so there's less fear that HAZ would go introduce really long and a lot of people thinking about this stuff, too, and getting involved in solutioning. Yeah, for me, that's how container queries got unlocked was, right? David Barron showed up and was like, actually, I think if we if we do this one thing, right, which was like containment, we add containment onto this parent. That way we can sort of like establish it as this block. And that's why it collapses. It does this weird thing. But and then also he was suggesting, let's just do inline size first. Like we don't have to solve the entirety of container queries. Now let's incrementally get there. Like here we can do this width part, which seems to cover the majority of use cases. Let's do the width one. And so inline size got added. And and then we're going to, you know, progressively add block size and style queries and sort of build upon a safer foundation. So I think that was another thing, too, is we took a baby step instead of saying it's all or nothing. Anyway, that was another reason I thought it landed. Yeah, I mean, we also did a lot of work in the past implementing like pretty low level APIs like Houdini, but that didn't really gain as much browser support as we wanted. Right. So I think that the initiative of trying to work a little bit more high level, listening to the features that developers really need, kind of making things from the perspective of ease of use. That I think has been a really big thing, too, where it's not just about providing new capabilities. It's about making sure those capabilities make sense to use and any developer can pick them up and use them in a tool belt. I'm not I'm not hating on Houdini. Houdini is awesome. I love Houdini. I've written a lot of posts about Houdini. I think it's dope. But I think that there is a very different type of API that we're landing now versus trying to add more low level capabilities to the browser. Yeah, Houdini was all about let other people teach the browser a new trick. And these new ones are like, now we'll just build a trick in the browser and hopefully it gives you the things that you needed to do in there. They totally agree. OK, yep, has awesome. Should we talk about color? Yes, but I also want to shout out to watch, listen or watch on YouTube. But it's just a visual with some audio to it if you do the YouTube. Check out the Houdini episode, because this is one of my favorites of the season. And we did a lot of examples and walk through those to really highlight how much of a difference API make. That's true. We packed that with inspo. So if you're like, I don't know what to use Houdini for, go watch that episode and we'll just give you a ton of stuff. I don't know why all my little mock voices today sound like this. But I'm having fun sound like this. We always go southern. We're like either a southern somebody or a southern somebody. I think it's cartoons. I watch too many cartoons and they always do that. OK, so color. We had an episode all about the ways we were wrong about color or how we were too early or whatever. Anyway, there's all sorts of new stuff and I've been digging so much into color. I'm having a blast. It's a surprisingly unexplored area, which I didn't really anticipate. I was like, it's new to me. Surely it's not new to everyone else. Like, no, this stuff's a lot new to everybody. Like some of these new HD color spaces just started rolling out in like 2016. They're now in your living room. They're now in your pocket. So that wasn't really the case five years ago. So this is like hot, fresh, new territory, and there's lots of room to help the web community reach their interfaces into these hierarchical spaces. And I'm definitely on the OKLCH train. That's the main color space I'll be using in my UI, but there's other ones that I'll be using for other reasons, like OKLab could be one for my gradients. I don't know. We'll see. But I especially love DisplayP3's yellow results. I was looking at those recently and they are just actually yellow. Usually I see so many yellows and I'm like, oh, normally they're muddy. But this one has that perfect yellow vibe. So I'm really trying to hone in my yellow color palette. It seems to be one of those tricky ones. And then it's also been really nice working with perceptual lightness in OKLCH and Lab. Makes me feel much more confident in creating variants and creating color palettes because unlike HSL where I'll do the same numbers in a different hue, I don't get drastically different results when I'm in LCH or in some sort of these perceptual lightness. I get to stay consistent and predictable. And I didn't really think I was going to appreciate that as much as I do now that I've been living in it. So some cool aspects of color. Yeah. And for me, I feel like these color spaces are really just the web platform keeping up with hardware technology where I do think there's a like a piece of it does add complexity, which we need to work out. We need to figure out how to make this easier for people to use. But it is a problem when you can take a photo on your phone and you can't match a color and the flow to the background that you want to put it on, because it just doesn't exist in the gamut of the web platform that we're providing, even though your monitor can create that color value. We just don't have the availability to to say that that's the color that we want to use. So I feel like this is really like a device capabilities feature and a theming feature. Like there's a lot to it. And I feel like sometimes people look at it like, oh, why do we really need these color spaces? But why do we need better color in anything? You know, it's to have a better experience of our dynamic like color range, a more rich, vibrant browsing experience. And that's not just on your mobile device or desktop. It's on TVs. Like you're using the web on TVs and across multiple channels. So I think that this is great to see. Yeah, it's it's about more chroma, right? I'm sure you've gone to the store and been like, I would like to buy a TV and they're like, here's the UHDDR TV Mega Ultra. And you're like, what does all this mean? They're like, it can almost do all the colors that your eye can see. And you're like, that's a lot of colors. And so there's like, yeah, there's like this vibrancy thing where you've got this hardware you need to tap into. But the whole other half of it is just tools, just color tools. So you get these color spaces that just do different stuff when you use them. And so, yeah, there's a lot of it that's just in theming in palettes and variants and manipulation of color. So, yeah, it's you're getting both sides of it. Here's some more vibrancy if you would like that. But if that's not enticing to you, here's color tools. These tools are definitely going to help you get your tasks done with color, which I feel like we're doing more and more color work in our custom properties and our style sheets. And so having some tools in there, not so bad. And another thing I'm really excited about is color functions. That's the one that I'm like, oh, because I used to do a lot of SAS color theming, like dynamic color theming based on like one or two colors. I used to give workshops on this. This was like something I was stoked on. And I want to see that again. I think that with these color functions, we can really make dynamically generated themes that have contrast when needed, that apply different moods, different parts of your site. We'll just have so much more fluidity in color and really color is just such a vibe setter. My husband, he always has like the lights on in our apartment and like different colors and facing the wall. It makes such a difference for the house is big. Yes, dude, I do all the lights in the house, too. It makes a huge difference. I have little lights next to our bed. So at night, there's like these little night night lights. And yeah, it's totally vibe. I love it. Oh, everything has a slider in my house. I was like, oh, I'm putting sliders. Condem the lights. Oh, yeah. Yeah, I bet you do have the LED light bulbs that are colored. I have those. They're great. Oh, the kids have that one. Yeah, we do a little dance parties in there all the time. Nice. So that was a pretty big episode, but our next episode is very short and sweet. It was about the media query range syntax, which was a very, very nice little change in addition that allows you in media queries and container queries to write the query more concisely using less than, greater than, less than or equal to, and greater than or equal to operators. Yeah, this was quite divisive in the community. Did you see that? Some people are like, oh, this is how it always should have been. And then other people show up and they're like, oh, I totally liked it. Better how it was before. Okay, so I guess I'm not, I'm not doing the Southern voice anymore. I'm doing Napoleon Dynamite. All right, oh. That's your angry voice. I guess it's my angry voice, yeah. Oh, frickin' idiot. But yeah, this was huge for me. And maybe it's just because I've come from a lot of scripting languages, but greater than or less and make way more sense than min, height, max, height to me. It still throws me for a lift. I want those rare people who is neutral about it. Like, I preferred the new syntax, but I don't have strong feelings about it where I'm like, oh, this changes everything is so much better. I was like, this is nominally better, and I think it reads a lot more clearly, but I'm not on either camp. It's, that makes sense not to be on either. And I'm like, not strongly against the other one, but I did find like the min width and max width where it was like, I tried to plug in a USB and I was just like, oh upside down again. You know what I plug it back in. Anyway, so I don't have to do that anymore with the range. That's true, that's true. I feel like I constantly have to swap min to max width. It's like the functions too, the min function and max function. I'm like, okay, I want it to never go below this. And then it's like, ha, fool, you should have used the max function. I'm like, but I want the small, okay, whatever, I'll just flip it. Yeah, you would think that we would get this right after 10 years of plus of writing CSS all the time. Nope. Okay, so subgrid, tell me about subgrid. What did we talk about? Yeah, so subgrid is pretty cool. So this is something that is actually very common in how designers create web pages, creating like a page grid and then placing items on the grid. But that was not possible before with the way that we created grid systems. You couldn't have pass-through grids. You couldn't have children within another element. Read its parent's grid system until now slash soon slash subgrid is implemented in some browsers and it's been in Firefox for a long time. Safari 16 recently announced support in beta. And I know that Chromium is working on it. This is a feature that pretty much enables the common design use case of being able to place items within an element that is a child of another grid parent. And it is a pretty big game changer for web page alignment and uniform web layout. Totally agree. I was just showing the DevTools engineers today on my subgrid demos and I'm like, here's the features that we need to, these are like the bare minimum features and here's the great features that we can distinguish at. And this really cool conversation, super powerful feature to have subgrid. And yeah, I can't wait for it. It just kind of makes sense in all these ways. I think it's gonna make people name their lines and their areas more too, which I'm all about. And yeah, so that we're gonna have all these new keywords floating around our layouts. And it should be really fun. I don't know, it's probably great for design systems actually too. Yeah, for sure. So what's next? We have one more episode. Nesting. Oh yeah, Nestle Quick. Nestle, you know, the bird's nest. Or what was the hair, the rat's nest? That was fun. I was not expecting that, so that was fun. It was fun for me to write. I was like, I'm gonna add some spice in here. She can delete it if she wants, but I'm glad you decided to keep it. It was fun. But yeah, I can't wait for Nestle to be everywhere. I've been using it for a long time, just sort of early adopting it, trying it out, making sure that it had all the features that it needed to. It's such a nice and tactic sugar for writing styles. I mean, there's a big reason people have been embracing it with preprocessors for 10 years. It's awesome. So nesting media queries is alone a huge win because I love the co-location of adaptive styles. It's so nice to have my light color and my dark colors right next to each other. And I don't have to go hunt for an entirely new media query just to find where I'm adapting something to. It's so cool. Yeah, that's a really good use case for nesting is the adaptive styles for media queries for states like hover and focus. That's what I really would use them for a lot. Totally. And this is just such a highly requested feature because everyone loves nesting and preprocessors. So it's finally coming to CSS and I'm stoked on it. And this is really just the syntax was sort of like the last holdout here. But we're working through that and narrowing down to a resolution. So listen to the episode to hear more about the progress on that. That's my other voice. Mer, ner, ner, mer. It's good. Down. Okay, so we're done, right? This is our last season. We're not going to talk anymore. I hate the shows. It's been so unfunny. I don't want to do this anymore. Well, that depends. Are people going to give us good reviews? Yeah, do you want a season four? If you don't, then say nothing on Twitter. Oh, if you do, then tag us and tell us that you loved the season. Not comment. Don't comment. But only good things. But okay, so in 2023 though, there is definitely, I mean, we have the 2023 interop. We had 2022 interop that didn't quite wrap everything. So there's definitely more coming out next year. Things like Anchor. Is the job ever done? The job is not done. I hope it's not done. CSS may reach. Well, these aren't part of Interop per se, but they are. Yeah, these aren't part of Interop, but they are scoped for 2023. Speaking of scope, one of them is scope, which you can try in Canary now. Not only is Game Changer too, right? We have layers and scope and nesting together. That's why those demos that I was writing, I was like, oh, I am in a new language now. I am writing ES6 versus ES5 all over again. I was having a blast. Okay, what else is coming in 2023? At least for episodes too. Well, you mentioned Anchor. This is the one that I'm really excited about because it allows for you to anchor elements to each other, which is super handy when you're using this for things like tooltips. You can use it in combination with the pop-up attribute if you've been keeping up with open UI stuff too. And they go very much hand in hand. And it lets you create anchor position sets so that as your element gets into a position where it might go off screen, you could try a different position. So it stays on screen in the viewport and there's so much goodness. I really am excited about anchoring. And not just for things like tooltips and pop-ups, but also for UI elements and especially dynamic ones that move around and shift. Super, super handy, that one. And I mentioned pop-up. I strongly agree. Yeah, that one's gonna be awesome. We haven't done an episode on individual transforms. I just touched on them in a GUI challenge, but I've been writing with them. They're really handy. I felt that those were supported across all browsers now. They are shipped. This is just an episode we need to do. We just missed it. We've messed up. We missed it, yeah. It's all good, we got this. It's sort of a short one, like the new media query syntax where it's not a new browser capability, it's just a new CSS DevX capability where you can write transforms individually instead of having to write them in one function, like in one property. Yeah, I like to think about it in one string. It's almost like when you write a gradient, that's the reason app property was cool. When you're writing a gradient, it's just like one giant string, which is annoying because to you writing it, it doesn't feel like a giant string. But then yeah, you have a transform and then you've got like translate, x and rotate and do this and it's like the order matters and then you have to edit this big string and if you wanna just tweak one, you have to use custom properties and blah, blah, blah. Yeah, actually take it back. It is a new capability because you could not do these individual transforms before, you have to track everything altogether in an animation. So that is something we could not do before that they bring you and it just makes so much more sense to write them this way. It does, it's really nice for just like little things. You're like, I just wanna translate it. I'm not doing all the other funky stuff. So just let me get a short way in there and it goes, okay, it's great. Another one is style query. So this is the other part of the current CSS container query spec where the browser is able to look for not just the size of the parent selector, but also any styles. So that could be a CSS style, property value pair or a custom property value to check for some kind of value of it, which means that you could group styles and have some themes like theme highlight or theme dark or theme light just as some examples and then apply styles to any children based on that custom property value in the parent. So very, very handy to be able to do that, to be able to query for styles and not just size. Yeah, that's gonna be awesome. It's like a, you get to build these really robust switches that can switch off of your own styles. It's making me think we even more need a custom property graph because if people are gonna be, because they already are using dry switching and these sort of techniques where you have like one custom property, if it changes from a zero to a one, it has this trickling effect on all these other custom properties. And that can be really difficult to work backwards on. Like if you're reading someone else's work, but if there was a custom property graph where you could kind of see the root of many of these things and visually climb up this like tree or climb up this graph and see which root nodes are gonna be affecting all these other things, you could kind of watch the cascade too, watch it boolean flip and watch a whole other side of the graph activate. Yeah. Really, really cool. You know what, you're right. I think that that would be a lot more visually effective in DevTools than what we do now, which is just have the layers that are winning appear on top of the other layers with the other ones crossed out. Like that's what we do now, but I like this idea of this visual like tree of styles. Yeah. I've proposed it before. I'll have to go, maybe I can make a prototype. Now you're just listening to me and Adam is one of one meetings. This is kind of, yeah, well, I mean, hopefully it's more interesting than other people's meetings. Okay, well, we have one more thing on here, which is typography, we've got, so 2023 efforts are going to be including a bunch of typography stuff. And we have here text wrap balanced, which is if you've ever had a headline and it's got a couple of big words in it, like congratulations, maybe that word is creating weird line breaks because you had a max width and it's sort of line broke early or something like that. What we have here, text wrap balance is going to sort of look to see if text is wrapping and do some intrinsic, some heuristics perhaps and decide a better place to break the line so that it looks more balanced. So instead of having like a widow or an orphan, it will balance itself out so that there's as much equal balance between the two wrapped lines as possible. And that one is really exciting to me. It's gonna go on every single one of my H1, H2, H3s. I'm gonna be like, this should always be balanced. Now it was just in a workshop the other day for leading trim, which is the way for you to sort of take the, so when we have in like a letter, we have extra letting that we put on top and the bottom so that the letters are really safe and always are in view. We're trying to do this kind of text layout that's really safe. Letting trim would allow you to say, well, I don't want half letting. Half letting is what's that called? I don't want half letting. I'm gonna trim the half off the top and half off the bottom and literally had this like shrink wrapped word where this word is the height of the tallest letter. And then we can have true vertical centering inside of buttons with text and stuff like that. We won't have to do any weird pixel offsets or use flexbox just to kind of get alignment. Then also you're gonna get things like once the text is shrink wrapped there, you can have true letting. You can actually have gaps between your lines and manage these things and create baseline alignment to do all sorts of like things that you learned in typography school will be possible. Color fonts, variable font interfaces. So there's like enhancements coming to variable fonts so you don't have to manage, again, a big string. It can be really annoying being like all those little keywords and calling their function names and passing them stuff. Well, there's gonna be new interfaces that are much more formal and easier to change as browser adjustments happen and media queries and stuff like that. So cool stuff coming down. Yeah, lots of cool stuff. So hopefully we could do another season for you all talking about some of this stuff and progress on the other things that we chatted about this season. This season, I feel like it was pretty short and sweet but it was super rewarding to get to talk about all of these new tools and capabilities that are coming to the platform and it's been fun. So we hope that you are as excited as we are about the future of CSS and we hope that you enjoyed season three of the CSS podcast. Yeah, that's, I guess it's a wrap for us for now. Yeah, I'm gonna try some reverse psychology on y'all which is don't ask us any questions. We would hate to answer them on the show. Don't tweet us with the hashtag CSS podcast. Don't do it, just don't. I'm at Yuna. So I guess that I'm at Yuna on Twitter and masted on that social and Friday. Nice, you got the three letter one on masted on? Great. Oh, I guess the little less strict on username's there. Well, I'm argilink on Twitter, argylyink. Find me, ask me Q, I'll help you out. Yes. Also, if you like the show, don't give us a review on whatever podcast app you're using or don't share this with a friend or coworker because those reviews don't help other people discover our show. Which means that we could do a season four. That's all or not do a season four. Thank you so much. We're not looking forward to your questions. I will see you in the future. Bye.