CSS 4, 5, and 6! With Google’s Una and Adam

Welcome to Syntax. Today, we've got 2 amazing guests on today to talk to us all about the future of CSS, the future of the web, the future of UI.

Really excited about this one. We've been trying to get, Yuna on for for many, many years, and and today is the day. Pretty stoked to have them with today. We've got, Yuna Kravitz. She's a developer relations engineer at Google Chrome working on UI capability.

I can explain what she does in Node story, and that was at React Miami. She came and sat down at a whole bunch a a table with a whole bunch of developers, and she says, hey, everybody.

What's missing from the web? You know? Just tossing it out there.

She should bring all those little pieces of intel back to the mothership and, and improve the Wes. So I thought that was a a really cool thing that stuck out to me. So welcome, Node. Thank you so much for coming on. Oh, thank you for having me, longtime listener. I I can't believe I haven't been on yet because I really love the show. I love the work y'all do. Right on. And we've got Adam Argyle on as well. We've had Adam on once or twice before. And sorry, Adam. I forgot to ask how to introduce you.

How do we introduce you, Adam? What do you do?

Also developer relations engineer at Google on Chrome working on CSS and UI, making sure y'all got what you need.

Adam and Oona are the people where something new is in CSS, or somebody says, I wish the web did this. And almost always, one of them comes out of the woodwork and says, it's coming, or we have that already. You're just not using it properly.

Speaking about not using things properly, if you're not writing your JavaScript properly, you're gonna have errors all up in your website. And you're gonna make sure you are able to track and fix those errors, and that's why we use a tool called Sentry to find our bugs, fix our bugs. Not only that, it identifies slow routes, slow queries. One of my favorite things about Sentry is that there's a user misery score for some pages. It's like how frequently pages get hit versus how slow they are. So if you want to solve your user misery, head on over to century.ioforward/ syntax. Send in a good 2 months for free. Alright. Let's get into this CSSing.

Yes. Let's just talk real quick. Explain maybe what you folks have been working on for the last year or 2 because the web has had some crazy changes. CSS has had some huge drops in the last year or so, and I feel like, you you both have been busy. So what have you been working on? Maybe we'll give some background because Yeah. There's there's Scott to talk about. We're not even here to really talk about specific features, but

I think one thing that we're constantly seeing is that the CSS of today is really different than the CSS of 10 years ago. The things that developers have wanted for years, written blog posts about, why can't we have this, why can't we have that, a lot of them are in browsers now. And there's still this sort of misconception about what can developers use, what's available. And a big part of that is that we haven't updated the verbiage that we use to talk about CSS as a whole. There's no Vercel CSS. It's all different spec levels now. And, you know, most people aren't really keeping track of the different spec levels for every single feature. There's so many features.

So whenever you Google, like, learn CSS or, you know, CSS course, you oftentimes will see the CSS 3 as the logo, as, like, the headliner in resumes, in job descriptions.

And it just feels like there's a big disconnect now from what we can do on the web to how people have last perceived the update of CSS. And I'm talking about people who aren't, like, keeping up to date with the latest. It's very, very few developers.

It's the general audience of developers and and how they learn, how they teach too. So in that regard, I've heard a lot about the new CSS

version numbers.

So most importantly, you know, we had CSS 3 a long time ago. Now we're hearing about CSS 4, 5, 6, etcetera. What are those versions? How did they come about? Like, what's encapsulated in that, and, like, how do how do you pick what Are we framing that? Versions. Yeah. Scott and I, when CSS 3 came out, they're like, okay. No more no more numbers. That was a big job, CSS 3. You know? And then I kept saying, oh, CSS 4 feature because it it does well on a podcast and on videos and things like that even though we know it's not. But Node, well, there's talk of bringing the numbers back?

Yeah. I mean, we're we're looking to make it real. Like, we're kind of Wes got exhausted with how many blogs can say modern CSS on them and then just age really poorly. Nothing. Right? Yeah. Yeah. So it's like, oh, that was really cool. I look at it like furniture too and architecture. You're like, oh, modern architecture, and you're like, yeah, in the sixties. Yeah. You know, like, that word worked good for about 10 years. And, yes, CSS 3 is over 10 years old. CSS has drastically changed, architecturally changed, syntactically changed, feature changed. And I think the working group was good when they made that initial CSS 3 that all the levels were at 3. It was like this moment in time that was really nice. And, yeah, we saw it. It's just so catchy. And so they kind of warp like, we're just gonna let the levels move at their own pace, which has been really great. And the levels will continue to move at their own pace. But there was this, like, hunger for a CSS 4, a CSS 5, but it kinda looked like a big amount of work. And Jen Simmons, a few years ago, was like, let's rejuvenate this. Let's pour water back on this kinda dried out CSS 4 idea. We'll do the work. We'll start a working group or a community group, rather, and we'll gather people together. And maybe we can find these healthy buckets that can create the same sense of, like, categorization and modernization. And we can talk about a CSS feature being in CSS 5 or something like that. And that can help articulate when maybe it came out and also whether this is something I can use today. And we sat down as a group, unit leading this, and we've got, I don't know, 5 to 10 people in the group. We went through every single CSS feature, which was also Wow. What a learning thing. That was awesome. Of them. Yeah. We're all like we look around like, who knows what this one means? You know? And people are like, yeah. I don't know. And so we had to categorize all those. And I think the working group, the CSS working group, like, happy to give that job away. They're like, yeah. There's a lot of work trying to categorize these things and sum them up. So you do it, and we'll we'll look at what you did and tell you if it's good or bad. And at this point, we've got an RFC. We've deliberated. We've asked people. We've interviewed, and we've come up with these CSS 3, CSS 4, CSS 5, and CSS next buckets. CSS 4 is 2013 to 2018, and CSS 5, 2019 to 24. Those are kinda rough. There's a little wiggle a few wigglers that go in and out. And we're hoping that, yeah, this really helps people just consider

Wes did this thing come out, and do I need to learn it, and stuff like that. So that's Yeah. You you mentioned going through all the different properties. And I wanna say, Wes and I just did our episode on we we tried to list all of the display properties, and we discovered display flow route. And both of us were like, woah.

What what is this? We've never seen this. So it's it's crazy when you actually get through it, all the little things that you just don't even think about. You did briefly mention that there's, like the specs are at different levels.

So do the individual spec levels connect at all to the CSS level? You know, like, grid layout level 1, level 2, whatever. Do those things connect at all? Or is it just like CSS 4 is this generation of features?

They did connect at one point. So when CSS 3 was labeled, I believe almost all the levels or something close to it was at 3. There was this unison of version. But then we saw individual specs get extra features, like color's a good one. Color has gone up 3 levels over the past, like, 5 years or so. I mean, you all know that. You've been covering the color features on this pod. You're doing a great job. And, yeah, it just sort of didn't work out over time to continue trying to keep them all at the same level.

Too many ducks, you know, some aging faster than other ducks. Okay. This metaphor is getting weird.

But, yeah, at this point Node, they don't they can all move independently. So at one point, they tried to move simultaneously, and now they move asynchronous. Hey. This is a good example of asynchronous and synchronous, you Node? Oh, yeah. There's also a lot of specs. Also, I don't know. I lost my camera. Don't get an Opel camera. That's

my real life lesson. Sanity SICK pick. It's the unsick pick. It's it's my nonsick pick. Constantly have issues with this camera. Anyway, I think that another interesting thing is a lot of these spec levels have various levels of support within them too. So you might have, like, a level 2 spec that has features that get shipped 5 years after some of the initial features in that spec get shipped. So I think that that's another challenge that we had to face when we were looking at all of these CSS features, like, where they would fit into CSS levels. It's, like, breakout a couple of specs. I think one good example is grid with subgrid. That came so much later than the initial, you know, grid implementation did in most browsers. So how do you think about the categorization of that? And we had a lot of different inputs to do the initial categorization, which is included in the RFC.

And those would include implementation was one of them, but it wasn't one of the main features. A lot of it was when did the spec get finished or was was in discussion. I I know that we have this list somewhere. I'm looking for it right now. The and there's a categorization doc too if you're interested.

Well, I sent you a link to the RFC. It has both an explanation of why and what and the groups. You can see grid there in CSS 4, and that is grid as we know it. And sub grid is in there too, so not in CSS 3. And there were some, like, weird ones like ESLint clamp that have been spec'd from forever ago, but they just now Yarn getting implementation interest.

And so, yeah, we're trying to balance all of these different factors into something meaningful for people.

That's awesome. And I'm just looking at it real really quickly. CSS 5 has container queries, big ones, scroll driven animations. We just did a little explainer episode on the animation parts of that, the math function, logical properties, which is ESLint and block.

JS the idea here that someone like Chrome is going to be CSS 5 compatible, or is it just, like, so that we can sort of talk about,

like, can I use CSS 5 yet? Or what's the idea by putting them in all these buckets just so it's easier to talk about? I think there's a few different reasons. One of them is also to differentiate features that have been around for a long time. Like, when we talk about CSS 4, we're we're sort of bucketing a lot of features that have really wide browser support. In CSS 5, some of these are newer features to, like, help bucket that and that journey, the evolution of CSS. A lot of the time Wes talk about these, like, eras of CSS or evolutions where we have these features that enable new features in the future that required a couple of capabilities in the past to be implemented first. So it tells the story there. I also wanna know that this is currently an unofficial categorization, so it's not like there's a community this this is a community group. It's, Scott of given a thumbs up by the CSS Working Group, but it's not like this is the official way to talk about CSS from people who are writing the specs. It's a way to help teach it, to help talk about it when we're looking at jobs and expectations for roles. Mhmm. And there's also this baseline initiative that we should talk about too, which is all about browser support. Like, the focus of that is, is this available in the browser? So when we are thinking about helping people know if this feature is stable or not, baseline is the better definition there, where within these CSS levels, you'll have features at different baseline years within them. So you could have features that aren't even supported anywhere potentially in CSS 4, but they respect along with these other features and implemented in maybe, like, 1 or 2 browsers, where you'd have to wait until it's in every browser for baseline. But what we would hope to do is eventually get something like CSS 4 to be fully baseline compliant. So they they kinda, like, go hand in hand, but they're slightly different focuses.

Yeah. One of the big differences is that this effort is all about CSS, and CSS is in the center. Whereas if you think about baseline or can I use, the browsers Yarn in the center? Implementation Sanity and feature completeness are the focuses of those. And this one is all about CSS. CSS's evolution, its own progression as it's gone through features in ages and grown up and got these new things. And so I think that's the another main thing here is the focus is the language.

And that that includes things like that are still in spec because, like, I'm guilty of this, and I think a lot of people are guilty of it JS there's a new spec that that people are talking about. Chrome implements it because they wanna test it out. And then all of a sudden,

freaking Safari hasn't implemented this thing yet. What's going on? And it's not even it's not even done yet. Like, they're they're still working on it. Is that? I'm sure that bugs the the crap out of you guys. Do do you do you see that a lot? I think for us, we really strive for cross browser support because Yeah. We no. Our focus is the web platform. If something is just in 1 browser, people can't even use it. So I think, like, a big focus of even the baseline initiatives like Interop is to kind of make sure that there is a shared vision for the web for developers, like, for the sake of actual users of these technologies.

So it's something that we really we we get sad when things are not yet available cross browser. Like, we really hope that things get shipped quickly. Nobody wants to use polyfills.

Chrome only is not a phrase that we like. Yeah. We don't like this. And so it's like, I'm constantly like, someone's like, oh, it's Chrome only. I'm like, oh, it's Chrome first. You gotta remember, this is a web standard. Just because this browser has it first does not mean that it's gonna be the only one. Just give some things time. And so no. It's you and I work for Chrome. We love Chrome. Seriously, it's been an incredible journey and job. But at the same time, we're more concerned with a healthy web platform than we are Chrome looking super rad. We're happy that Chrome JS is constantly asking us what to do next. Like, this has been really fun is that we have a lot of influence about what's been added recently. That's awesome to see a focus on UI and CSS because we felt it would had been forgotten for so long. But no. We don't like it when something works in 1 browser and doesn't in the other. I you know, I like progressive enhancement. Y'all do too. I saw that episode Wes done on your retorts, everybody pushing back. But, man, I have a lot of interviews with people, and they just are like, I can't do progressive enhancement. My boss doesn't know what that means. Yeah. So if it doesn't work on their machine, they don't know this layering on of features.

Sanity doesn't bug us a lot, but we prefer when it's in every browser. Yeah. It's way more fun that way. Yeah. I know. It's it's it's weird because you guys are in a tough situation where if you're adding a ton of stuff to Chrome that's pushing the web forward, people are going to accuse Google of wanting to, I don't know, take over the platform or something in that regard. I've I got asked about that at, was it that Amsterdam JS nation? I Scott asked about that on stage. Like, how do you feel about Chrome taking over browser APIs? I don't. I'm they aren't. What do you mean? And so, like, you're in a tough position. You're either pushing it forward and having that kind of criticism or nobody's pushing it forward or you know, it feels like somebody's gotta gotta move it. Right? I think that that's exactly

it where everybody wants the web platform to move forward.

Someone's gotta do the stuff. Like, someone's got a lot of time too, these browser vendors will look at each other's implementations to help implement it in their own version, which is great. That's how open source should work. But it usually takes somebody to prototype it, get feedback from the community, figure out if it's the right solution, figure out what the spec is. And all of these are open standards. It's not like Chrome or any other browser goes and works in secret and then ships something and then doesn't tell anyone until they're shipping it. There's a lot of documentation about this work about that's why we're constantly asking, like, does this work for you? Does this feature actually solve your needs? We're doing studies all the time and trying to figure out what are pain points that we can resolve.

So it's just hard because there is this line to balance where, ultimately, we wanna focus on doing good.

We want the web platform to move forward and to not be stalled.

And I feel like someone's gotta do it. Yeah. Right? Yeah. No kidding. Yeah. It's hard to be first too, to be honest. Like, it's more work. It's kinda smart sometimes that Safari chills wait waits for something to get solved. They can go look at our open source code. They can look at our updates to the specs.

They get to come in when things have kind of settled a little bit. I'm also so happy when Firefox or Safari come out with something first. I'm like, this is so nice.

Yeah. It's not a very feature too. Like, I Safari was pretty early in a lot of the color space work. Yeah. Masonry. That's a differentiator for them, right, where they have devices where they need HD color, and that's something that they want. You know? So there are these incentives, and I think it's really good to have that kind of diversity.

You know? Yeah. They sparked the conversation on Masonry, and then there was a response from Rachel Andrew on the Chrome team about an alternative approach to Masonry.

So it's really healthy to have these discussions. And I think sometimes I wish there was even more of that, like, when we were working on, like, anchor positioning and now with Slack. Like, there needs to be frequent discussion early on and constantly to make sure that we're shipping the right thing. And so it's just hard when there's a lot of features landing too, and every Yeah. Every team has different priorities.

I have a quick aside here about a feature that just landed in Firefox.

Starting style just landed in Firefox, I think, well, what, like, a week or 2 ago or this week or something. Last week. Last week. Yeah. And I really want to use it, but it feels like the only use cases for it are with allow discrete. This is just a personal question.

Is there any use cases for starting style without allow discrete that, I'm not aware of? It pretty much just tells the browser what the styles are supposed to be before an element is rendered on the page.

So you're probably often using it with things like animating in from display none or cut or visibility hidden.

So in that case, you do need Node lot of TypeScript if you want something to animate on a key frame time line or in a transition at 50% instead of at 0%. So they do go hand in hand most of the time. I can't really think of a use case in which you'd need Yeah. Styles before something is rendered to the page, and you wouldn't want to animate it in a Yeah. I was, like, celebrating when that arrived. And I was like, but wait a second. Oh, no. Yeah. That one also I I wrote the landing post for, like, hey. This is in baseline Node. But that's only for entry effects also. There's still a few features missing for exit effects for those types of elements and, like, some examples Yarn dialogues or popovers that might animate into the top layer or any element that's animating from display none.

But this gives you the ability to animate it in. We're still missing the ability to animate display none out in, I believe, in both Safari and Firefox at this time. And then also, animating overlay is not yet available in those browsers too. So there's still 2 missing features for the exit part of that effect.

I think sometimes with these browsers, it's okay. We need to get this thing in. Like, we need like, Contain was like that. Like, when Contain hit the browsers, there wasn't a ton we could do.

But then once it was there, everyone's like, alright. Now we can build container queries, and now we can build a whole bunch of this other stuff. So sometimes a lot of the hard work goes into this ground where it's not all that exciting, but then they can build upon it for new stuff.

Yeah. Containment is a big one. I'm still getting questions about, like, oh, why can't I target the parent of the container query?

It's because it wouldn't work then. You have these infinite loops. Oh, man. That must be so frustrating because, like, people just like, I I want to do this, and I've certainly, I want to do that as Wes. But there's these infinite loops. Like, another thing I've wanted to do is be able to target elements in a specific grid row. So once once they loop on to the 2nd line and I wrote that functionality myself with resize observer, and I hit an infinite loop. And I realized this is what the browser vendors are doing. Because or once it's big, it gets looped on to the next line, which makes it smaller, which makes it small enough to fit. So it goes back to the 1st line, which makes it bigger, which makes it go down to the 2nd line, which makes it small. And it's just I had to write like a just just render twice and then stop.

I was like, the browser vendors must. This is so hard to figure out. Node of our engineers right now is working on state queries. So, like,

how do you query when you're in a specific state, like, if you're in a stuck position, things like that. That's gonna be a thing? It's Oh, yeah.

Yeah. We just talked about that. Like We just talked about how you can kinda hack it with, the scroll driven animations.

Sorry. Go ahead. I'm so sorry. Yeah. Yeah. Well well exactly. So that's what, you know, the goal JS, to solve problems without requiring hacks that are Yeah. Perform it and cause issues. So one of the queries that we got a lot of requests for was JS something overflowing into the next ESLint? Like, with Flexbox too. So, like, your example, but also with Flex. Like, is there another line where it's gone into, you know, say, 2 lines, 3 lines, whatever? I don't think that's possible at this point from my conversations with our engineers to implement because of that problem. Because you can have things like stretching and it's a lot of calculations to determine that. And and there's a lot of features too that, like, initially landed with restrictions, like even text wrap balance, like the feature that lets you balance text to 50%. It was initially capped

at, I Wes at 5 months. It's 4, then it was 6. So at Safari, I thought. Optimizations. Yeah. Yeah.

Wow. But you gotta think about, like, the performance of some of these features too, and R and D is, like, keenly thinking about that when they're building this stuff. That's crazy.

The baseline stuff is is also really interesting. I like having it in in the documentation because it kinda just shows you if you can use it or not. When it initially came out, I was like, I want this for my videos. Like, I want either an API or just, like, a downloadable PNG because every video I do, I have 48 seconds to explain the whole feature, and then every Bos every single reply is, what's the browser support? And it's like, first of all, look it up.

And second of all, like, I'm not spending Pnpm it for a second. Come on. Yeah. Yeah. But I wish that there was, like, a a downloadable PNG I could put in my videos and just, whoop, slide it in, I think that'd be that'd be really cool just to show the current browser support. Or even just an embeddable that we could make our own PNGs from. I think there is Node. There's a web component

there's a web component, and they're working on an API. That's okay. That's what I The hard part is you're gonna have to know the ID of the of the feature, and that can be a little tricky to to get. So you can go to MDN, and you can find the ID on the page. I've got, like, a little JavaScript bookmarklet that does it.

So if you want that, let me know, and I'll I'll hand it to you. Oh, yeah. I would love that. Yes. It would be great to even have on our website if we're or for for syntax. If we're talking about features in the show, yeah, that would be endlessly helpful. I'll send you the web component too. There's this really nice branding that they've created around baseline newly available and baseline widely available features. It's like this little icon with a check or an x if it's not yet cross browser,

which you could totally use. I think that the graphics are available in the repo. Interesting.

We'll find some links, and we'll send those to you. Yeah. Yes. Yes. The reason why I didn't oh, interesting. Yeah. On the baseline website, it was like on your website, but then there's no button. It's like, where to find baseline? MDN, can I use on your website? But there's no call to action, no links. So I was just like, okay. It just makes me waiting on it. So, oh, cool to hear that there's actually something available for that. That's, that's pretty dope. I think that that's the idea, at least, like, everyone being able to use these terms, these graphics to help describe feature availability,

then we can all sort of be on the same page about Yeah. Exactly that question, talking about browser support.

It just makes it a little bit easier because I do think that you're right. That's the first question that people ask, and rightfully so.

And this kinda makes it easier to have an answer.

Is the data from ESLint, does that come from Can I Use or MDN? Like, I sometimes on the show, Scott and I will be doing a feature, and it it'll be like, oh, it's not available. And then we'll go, oh, but MDN says it is, and can I use says it isn't, and but I thought that they had the same dataset? How does that all work? It's all based on BrowserCompat

data, which is, like, the MDN BCD Deno.

And that's where, like, the core of the is this available on which browser, like, data is pulled from for baseline, for the widgets.

I think that it used to be separate for CanIUse and for MDN, but I I believe they're trying to

combine that. So there's, like, a single source of truth. I don't know what the status is. Seems like What was the we hit 1 with Scott animations today that was out of sync. But it's it's it's rare, but it does happen occasionally only because we're I feel like Wes and I probably check this stuff more than most people because we're always talking about it. So, you guys had mentioned that within this RFC for the CSS versions that this is, like, not official official or anything, do you see a world where this becomes official official? Is that, like, is that the path?

That's the next step we're at right now. So we're still gathering feedback, making sure that we're not massively messing this up. And then that's that that was the point of the RFC was to kind of make it public early and often. But I have another PR under the approval of the CSS working group to add a page to the CSS working group docs to have a basically, it looks like a spec that talks about these new levels, and it will speak to the old levels, which, have an entry and have a a page you can go visit. They explain how they were leveling and why they stopped leveling CSS as it was. And then this new document's gonna land, and it's gonna say, hey. That old one is now obsolete in the way that it ended. It has now been resumed, and groupings that can facilitate conversation,

help you make marketing materials, kinda give people a good hint at the content that you're gonna be talking about in CSS. So, yeah, the goal is to make it and they're waiting for us. And we've got a couple of little things that we're gonna work out in CSS working group meetings with all everybody there. But yeah. Definitely. Oh, that's sick. Cool. Well, that and that's exciting to hear that it's not just like a a hope. It it's like a a plan. I think this will be really helpful even you Node, I mean, as as much as it is just like a learning or a category and things like that, I I do think it's important to have these these categories and to be able to teach this stuff. I can see exactly how Wes and I would benefit from being able to talk about this stuff in that regard. Node we wanna talk a little bit more about the what what's coming in some of maybe the the next stuff? Or or do we wanna Wes, what do you think? You wanna talk about some of the next stuff?

Let's talk, yeah, let's talk a little bit about the features because there's there's so much fun stuff.

Like, I think Una had a talk at Google IO, which was, I think, close to an hour, and some of the, like, mind blowing features was, like, 12 seconds or 24 seconds of the 1 hour just to show you how compact, and how much new stuff has sorta hit the web. So I'm just curious. Like, which of these features are you most excited about, and, I guess, which CSS are they fitting into?

I think for me right now, I've very I've been in select land styling drop downs. That's, like, the one thing that I had this tweet from, like, 2017 Wes I was like, it's 2017. Why can we still not style drop downs? Yeah. It's just the little things should not be this Yarn, and it frustrates me to no end that it's such a complex task to build this kind of functionality natively, where there's so many accessibility implications that need to be taken into account. Wes right now, we're saying, alright. That's the developer's problem. Figure it out. The browsers should be the ones who are providing those defaults. So there was a lot of work that had to be done to get us to the point where we could now ship some more of these select features, and that was enabling something like a popover Wes you have this functionality of an element that can be raised to the top layer and can exist sort of outside the rest of the scope of the You also get a bunch of great functionality with that, like like dismiss if you want to, click away to dismiss, focus management if you're tab navigating, a ton of stuff that would be hard otherwise because the popover could live somewhere else in the page from Mhmm. Document.

And then there's also this feature called anchor positioning, which just shipped in Chrome, and I'm seeing a lot of commits from other browsers too. I think that's a hugely impactful feature that lets you create these layered UIs that are connected to each other even across the top layer in the rest of the page. You can position things, reposition them based on available space in the viewport.

And then these are these 2 primitives that will now enable the work that will support customizable select and give you the tools to actually put little icons inside of your drop down warp choose what the arrow looks like or use symbols along with some text to help users parse the the items in the drop down. So that set of features just feels like such a big gap from the platform that we're now shipping and providing these primitives to developers.

So if our listeners have not heard of of this work, we've we've touched upon a a few times. I think in the past, it used to be called select list, and that was sort of pulled back, and now it's just select. What this is is this is not being able to change the color of the drop down arrow. This is literally being able to build your own custom drop down select where you can filter and select multiple items and put images inside of them and, use a grid of of possible options, like full control over how it is rendered. Put your own divs inside of a select, and it will be rendered. And this is gonna be amazing because it's a a lot of times with, like, browser primitives the older browser primitives, you go, oh, yeah. That's cool, But it can't do x, y, and z, so let me go get a React component that does absolutely everything I want. And now we're starting to see with pnpm Vercel anchor and and hope hopefully Vercel very soon is that these are the primitives, and we are gonna be building on top of these because they can do everything. Is is that a fair a fair approach to this? I've been watching it for a while.

Yeah. And you mentioned too that it was select ESLint, now select. One of the really great benefits of reusing the select element is the backwards compatibility story, where now unsupported browsers can still get the text content from the options inside of the select.

So you can enter in this new customizable experience with the current resolution is using a property called appearance and the value of base Vercel, and that's the input mode that you need to now say, alright. I have full control over the content and styling of the select.

But browsers that are unsupported will just show the text content in the options, so you still get a default experience that works, that enables the user, like, click things. Oh, because at the end of the day, it's just select an option.

Right? Mhmm. What's great about all these new CSS features, even going into view transitions or, like, Wes and I was talking about with Scott German animations earlier today, is that it feels like the progressive enhancement story for all of them is that it it works just without the enhancement. Like, that's awesome. That that feels so much different than what we used to have to do with, you know, all the different vendor prefixes and all the craziness that we had in the past. So, is that, like, a big part of the focus when you're designing a new feature? JS how does this work, for people who don't have this feature?

Definitely. I I think we're constantly thinking about what does it take to actually use the feature? And it's not immediate for most teams because of browser support. So how do we help people adopt this? And it's not even that. It also is older browsers that users might still be on. It takes a while. Even if something hits baseline Node available, that doesn't mean that's your browser support matrix.

So what is the interim story? Yeah. Totally.

Where are we at with Select right now? Like, how far do you have I Wes, you you maybe don't know, but how far away are we from using it in the browser?

So right now, there's a prototype in Chrome Canary with experimental web platform features turned on. It is currently in WCAG stage 2. So this is like an HTML primarily feature, so it's a little bit different in terms of the process and the leveling. Oh, yeah. That's what I just built.

So that this is an example of just a select you can look at the code, and it's really just oh, did you add some JavaScript to it?

I might have been playing with view transitions.

And an engineer the other day, he was like, can Wes? We're just trying some experiments. See, I forked yours and was trying to add some some stuff.

Oh, nice. Yeah. If you look in here, like, there's a bunch of new features too. There's a new feature called selected option, which lets you actually reflect the content of the option that is selected, the the selected

item. Bound to the option. Yeah. It's like a slot.

Yeah. Exactly.

For those of you who aren't watching right now, if you if you actually wanna see what's going on, watch this on YouTube. Adam has pulled up a, a Node pen that's showing this off. It's pretty amazing. We'll also make sure that link is available in the show notes for you. But, yeah, it it's impressive, and it feels like something that we've needed for a long time. Yeah.

It it doesn't require any scripting. It's just HTML and CSS.

What's really cool about selected option is that the preview of this is just a flag and, like, the shorthand of what the currency JS, sort of this currency selector for those listening. But then when you open the drop down, it provides more context.

So it has the longhand name of it, like United States dollar instead of USD and then the symbol.

And you could have all that just display none in the selected option.

So it's it's, like, so much fun to play with API. Oh, that's how you're doing that? You

Adam, can you show the CSS for the selected option? Let's do it. Yeah. Let's dig in with dev tools here.

Uh-oh. So it it'll be like selected option dot longhanddisplay Node, you know, the the class.

Oh, that's cool. So here's the symbol, and then she's got it set to display none down here. This yep.

So she's targeting the selected option, looking for specific children, and be like, nuh-uh. I don't want you in the selected option view. I just want you in the drop down. So the drop down gets to contain all the goods and the juice, and then the presentation of it can be customized. And the the browser is just mirroring

the DOM element or or duplicating the DOM element?

It is duplicating it. Yep. Wow.

Man, I'm so excited about this feature. Like, it's Right? Thinking of all the things that you can build with this just with HTML and CSS, all of the new like, the popover stuff, the detail stuff, the, the new animating, allow discrete, the, like, the 0 JavaScript needed for a lot of this stuff to make really nice UIs is key.

Yeah. It's really all about just separating logic and styling too. Like, some people ask me, like, why do you not want people to use any JavaScript? And it's not about that at all. JavaScript should be used for logic. It should be used for, you know, state changes. It should be used for actual, like, content and for, like, pulling in data. It shouldn't be used for styling. That's how I I feel like right now it's been used as a crutch because we didn't have these capabilities.

It shouldn't have to be used for accessibility for a lot of features. Like, I think that should be built into, like, the semantics of the HTML and that, interaction.

So this really provides a solution.

Another note too is there are definitely some accessibility kinda like asterisk here. Like, you can't put interactive content inside of a select. So you shouldn't use select and then have another button or action that you can do inside of that, because that breaks you out of, like, the accessible default state of being able to choose an option that has a specific value. We're also currently talking about, like, using selected option like a label, where you can connect a select option to a select and use it outside of the select element.

Cool.

I think that'd be awesome. Because you can create, like, combo box kinda like buttons Wes you could have something that's not interactive next to the button that opens Vercel, or you could have it reflected somewhere else in your UI Wes you have the content that you Vercel in that drop down be reflected in, like, a summary at the end of the page, something like that. Anyway, this is just an idea that's on even need, like, a a state management library for for some light stuff. What what about filtering it? Like, if you had a really long list and you wanted to type in,

Canadian dollars.

It's a data list, and it does that by default. So I can start TypeScript. It'll fuzzy complete like, I just did it. I popped it open. I TypeScript c,

and it chooses it. Oh, but what if what if you wanna filter a list from 50 things down to 5 things?

I think that you're thinking about a combo box, which is a combination of 2 elements. 1 is an pnpm, and 1 is a select.

And that is out of scope for this type of element. But, the Open UI community group, which works with the what working group and CSS working group, is going to probably focus on that next after this. Like, how do we solve that problem? Select multiple. Right now, they're like Multiple.

It we just don't Node, and so it's not gonna be in there at all. Oh, okay. Yeah.

Interesting.

So there's no select multiple. There's also currently not the ability to use the size attribute in select, which, if you use size right now for select, it shows you an inline drop down where you don't have to click the button to open it, and the size is the height. It's like the option size height, of that list of options, which, is also out of scope for customizable select.

Oh, yeah. Yeah. I see what that is. It's like a a list of multi select.

So we talked a little bit about Yuna's

new exciting things or, like, things that you're excited about, Yuna. But, Adam, what are you excited about?

Oh, man. I'm excited about, so we have carousel work getting done. If you've ever made a carousel, you got next and previous buttons. You got pagination along the bottom. The browser's about to generate that stuff for you. Really? Accessible. It'll be in the right tab index order. It's gonna be a focus trap. It's gonna do all that stuff for you. In fact, we're even working on inerting the items that aren't in view. There's, like, a lot of really cool work that's going into that. So carousel is a big effort. So while Yoona's on the select element, I'm currently assigned to the eventually, the carousel element, but we'll start out as a set of CSS features. I've got a whole bunch of demos up here. I'd love to show you one of them that this is okay. People are like, centering and CSS is hard. And I'm like, oh, it's about to get harder slash better with the text box trim feature. Oh, yeah. Oh, yeah. So text box trim. Here, let's find a good demo that really showcase that these are all my little things I'm trying. Okay. So, like, here's a good example. You got a you got a button, and you use display flex, and you set it to place item center, and you're like, uh-huh. Perfectly center. And you walk away, and your designer shows up. They go, it's not in center. And And you're like, yeah. It is. And they go, don't make me whip out a ruler. And they whip out a ruler, and it's 8 pixels on top and 7 pixels on bottom. And they're measuring to the letter Yes. Right, not to the box that the text is in. And you start to shake your fist. Well, here's the answer. The answer is right here. So the 1 on top, not centered. The bottom one's centered. I added text box trim and text box edge cap alphabetic.

And this will trim all the excess cruft off the text box node on the top and bottom, which allows you to also, have perfect alignment in, like, a subgrid.

Let's see if I've got it. Yeah. Here's another to the top Node. That's the annoying junk. Right? You're like, I wanted that box to align with the top of my header. How do I do that? Negative margins or some funky line height tricks. On the bottom, no tricks. I just trim the text box edge off the top and the bottom there.

And then just some really cool examples too. You can start to line up text in multiple directions because you can trim the text boxes.

So there's just this one is gonna make centering next level. It's gonna be even better, even easier, as well as just, like, alignments with other text items. And so I'm super pumped on that one.

I know y'all have talked a little bit about, like, the snap changing and snap change events. There JS just some really cool stuff happening there.

State query I could show you a couple state queries. Do you wanna see some state queries? Yeah. Would love to. What's,

what is that for? So okay. Wes, look. It's Is that different from style queries? Yes. A state query is here at container scroll state stuck top.

So first, I have a container. In this case, it's a d t element inside of a so, like, just for those, listening, we've got a a list of bands, other hip hop bands. Maybe you'll know a few. And then they've got a header on them that's like a letter that matches up to the beginning letter of the artist. So you've got a grouped list view, and they're grouped by their first letter. So at first, we had a, then we have b. And what happens is is when you scroll down, those letters stick to the top. Right? You wanna know kinda what category you're in. Even if you scroll past the b's, you wanna know you're still in the b's.

So on that d t element inside of a d l, we've got container type, scroll state. So that's some stuff you never seen before. Here it it here first, everybody.

Wow. Anyway and then position sticky. Right? Obviously. And then we get inset block Scott, so it sticks on the top in a Latin language. So with that, we can then set our header element, which is inside of that d t, which is the thing I wanna transition. I wanna give it a shadow, and I wanna change its color when it's stuck. So I set transition background, transition box shadow, and then nested inside of there because nesting rules is at container, scroll dash state, open up your parenthesis, stuck colon top end parenthesis. And in there, I can set a new color and add a box shadow. And you can see as I scroll, as it becomes stuck, boom. And it's triggered. It's not scroll linked. So, right, we could do a lot of this with, like, scroll driven animation, but what we're doing here is triggering it as soon as it's stuck.

And that's just as simple it is as it is. And those are the stuck queries. We've also got a couple of other, queries. Let's see. Wait. So the hold on. I I I wanna look at this a little bit, miss. So container type is normally

going to be In ESLint size. Yeah. In line size, which is Or use the word size if you want pane. Yeah.

You want, you care about, like, the width of the the container. Right? So scroll state is a new type of container query that will not watch for the size of the container to change, but for its currently scrolled state, meaning that if it is being stuck or not. Right? Or or JS there other types of scroll states?

Yes. There's other scroll states. And so here's snap queries.

Let's see. Does this Node use it? Yeah. So look at this. We Scott a card. Its container type is scroll state, and then I've got a container type.

Well, it's checking for support. Let me just bring this out. And we've got scroll state snapped in line. So with CSS, you can know if something JS snapped.

Boom. It snaps.

Gosh. Boom. It snaps. So it's basically like scroll observers turned into declarative easy container queries, and and we're not stopping here. So we're starting with scroll state, but the plan is to do other type of state queries with similar syntax and similar,

patterns. Could you also do, like like, off screen or, like, cover 50%

50% off screen? One that I want. Yeah. In view and out of view are definitely slated, at least in the CSS working group issue of, like, a top 4 use cases.

Oh, yeah. What's the status of these? Is are these are we looking at 4 years down the line, or or what what are we looking at?

Well, our engineer prototyped it pretty quick. He, we met in Amsterdam last year, and he was like, I think I got something, and then, like, showed up, like, 2 days later with it on his mobile phone. And then the it's getting much more official, so the spec has gone through some churn. We've seen it presented. We've seen it approved. We're seeing the syntax slightly change, and we have this prototype in Chrome Canary. So if you go into can that's on just regular canary. I've got the web experiments turned on, and you too y'all can try these out, in there now. I I mean, until they're inter okay. So, like, side story, I keep talking to lots of people about support. They get this question, when can I use it? And people go through this phase of sounds cool. Can't use it. There's no browser support. And then they're like Concept. Right? And then the next one's like, oh, it's in Chrome. Sounds cool. Can't use it. Oh, it's in baseline. Sounds cool. Can't use it. Right? Like, so oh, now it's in ESLint. Safe to use everywhere.

Sounds cool. Can't use it. And then all of a sudden, they'll be like, I'm starting a new project. Where's all the demos? I'm ready. Give me code. Give me code. I need to copy stuff. I don't wanna copy your code. Right? And so it's like, they're gonna go find y'all's demos from early adopting. They'll go find some articles. But so, yeah, this is pretty early in that phase. There's

just prototypes, and it's kinda unknown. I don't know. 1 year, 2 year, maybe less. It's funny when you asked, like, okay. So what's the status of this? Because the hard part is not necessarily always the prototype. Right? Sometimes it is, but not always. The hard part is getting consensus in the working groups, getting also other browsers to prioritize these features. Because as we talked about, that's key in making it so that developers can actually use these things. And I think the one thing that is the most useful if you want to use a feature is to build things with it.

Because the more demos we have, the easier it is to showcase, like, hey. Developers find this really valuable.

Look at all these use cases. Even just, like, building things with it to provide feedback. Like, right now is the time to provide feedback for a lot of these features before they get shipped to Stable.

That's where you really can have a say in the web platform. I don't think people realize this. Yeah. I agree. Yeah. Totally. Yeah. People act like it's a black box, and it's a Google is is controlling this black box Node. And you guys too much for, like

like just asking for feedback desperately. Like, we we want to hear your thoughts on these features.

I had that with, some of the dialogue modally opened dialogue. I was had a couple Wes, like, why can't can't why can't we do this? Why why can't we do x, y, and z? And some of it was just like, oh, like, someone brought that up, but it wasn't not a big enough fuss was was made about it. And then as soon as it hits everybody starting to build stuff, we go, oh, like, maybe we should've paid a little bit more attention to to that type of thing, because it's gotta go through thousands of developers and all the different use cases of how I would like to build something. So we hear that all the time too. People are just like, why is it named this? Oh, why is it x, y, and z? And it's like, if you care so much, please care 6 months earlier. Right.

There's also this initiative called Interop, and that, has an open call Wes you can open an issue on a feature that you think is really important to the platform.

There's some boundaries around it. Like, there needs to be a platform test. Like, usually, it's features that are implemented in some browsers already, but it helps to get a public sort of road map for cross browser support of platform features.

And I think that this is an awesome opportunity.

It's in the fall that this opens for the next year, But that's a really great opportunity to, like, voice your interest in the feature as well because you can also plus one things.

So when those things are landing, you know, take the surveys, do the state of CSS, state of HTML, you know, voice your thoughts ESLint interop, actually respond in issues.

All of the CSS working group issues are open. The what working group also has a Deno, and when there's discussion about these features, and then just try out the thing and show us what you're building.

Is interop a time for me to say, hey.

Safari has always had this weird bug where if you mix blend mode with luminosity on 2 elements that are not side by side, then it it doesn't work. Right? Is is that a time for me to say, like, hey. I would love for Safari to support this type of thing and, like, eke it out? Is that what that this is for?

I think that it's always a good time to bring that up if it is, like, a specific browser bug.

But that is how Interop started. Like, it started with well known existing features that have interoperability issues, like a lot of Wes features, for example, typography features. But I yeah. I think that that's a good opportunity to raise awareness.

It's it's always a good time to do that. Yeah. But then if there's, like, specific features that are missing, like, oh, with, I don't know, color mix, this capability isn't supported by all browsers, and I want it to be I I don't know why I use color mix. It's probably a bad example.

But you're talking about Scott of interrupt issues with color mix. It's okay.

Yeah. But if there's if there's Node where we're, like, all dying to use, like, maybe the browser vendors don't necessarily know that. You know? And Yeah. Yeah. It's a time for them to say, ah, everybody wants like, CSS has was one of them. You know? Everybody was waiting for Firefox to implement CSS has, and now it's in in there. And we well, we had 97.3 interop on 2024, CSS has probably a 100% for next year.

Yeah. You know how people on Twitch like raid? They're just like, alright, everybody. Go raid that next channel. Y'all can go raid issues in in Buganizer or in Chrome's thing or in CSS working group. You seriously could go show up. If if 50 or more people showed up and warp just, like, blasting an issue and being like, we want this, every head would turn either in the browser, teams or in the working groups. Like, it they're really attentive to people commenting. So Eunice really giving y'all a big hint here, which is if you want it, you can go ask it and specially build for it. Build with it. That's another thing JS we'll prototype something. You're like, oh, Adam showed some scroll state stuff. That's cool. And then you just go home and never use it. If you build some stuff and put it on Twitter, they're gonna see it. They're gonna be made alert that, like, holy crap. People are using it. They're building with it. They're hungry to know you're using these things, like container queries. I know you've seen our post. We're, like, using container queries, and everyone's like, no. And we're like, but you asked for it for so much time.

It's here. Why aren't you using it? Because everyone our managers are like, hey, Adam Eunuch. You said everyone wanted container queries. And I'm like, what they do? They do. And they're like, we're looking at usage numbers. It's a business. And we're like, so is GRID. So is GRID. You Node, we're, like, trying to defend ourselves. Like, it's just gonna take time.

And, anyway, if y'all use it, you can really influence the browser vendors and the the choices they're making.

Interesting. Is container queries really does have low uptake right now?

I think that the challenge GitHub container queries like, when we talk about progressive enhancement, it's not one of those features that you can easily progressively enhance with. Yeah. It's a little bit of you kind of have to go all in on it. You can progressively enhance with it. It just Yeah. Phil Walton just shared an article

with a web component and an intersection observer as a fallback or whatever. Yep. Right. It's just do you really wanna use intersection observer for Or maybe it's resize observer. It's resize observer. Yeah.

And it's such a it's such a feature where, like, you kinda opt into that very early on, where you're like, I would like to build this component with a container query.

Yeah. I think that it's one of those features that there's so many people asking for it, so many blog posts, so many. Like, this is the Node missing feature from the web platform. Mhmm. And it's just been really interesting to see the actual usage of it in production. It still feels like people are a little bit hesitant because of browser support, even though it's in

all modern browsers for a while now. Let's let's check the Yeah. The can I use of it? We used it on the Syntax site, and we we dropped that site, what, last March or something. So we we've been using it in production for a long time. Half. Yeah. Yeah. Long, long time. And and Yeah. Yeah. To me personally yeah. It's like almost most times, I could think about using a media query. A container query makes more sense. Your componentizing your whole application, it makes more sense for that state to live in the component. So I yeah. I'm surprised to hear that usage isn't isn't that high, but I get why.

Node. It reached baseline in I remember it was February 14, 2023. It was Valentine's Day. We did, like, a little We should be in the March. Valentine.

Yeah. I had it I had it on my calendar for I had, like, a video ready to go for, like, 3 months, and I was like, I'm waiting for it to drop. Yeah. It's a good time to say. Again, browser support matrices are often more than 2 years, so maybe soon.

And maybe CSS 4, 5, and 6 will help people discover these things,

know, because they haven't checked in for a while. They don't know what's going on in the language. All of a sudden, they hear there's these different levels, and they're scrolling through what's CSS 4, what's CSF 5, and they see container queries. And they go, holy cow. I remember asking for that 10 years ago. Here it is. When it solves your problem, it really,

really helps.

But oftentimes, it JS. Like, you gotta build it in from the start. That's how you think.

And it also helps you differentiate between, you know, component driven design and things like page level macro design, which is the direction that design has gone into more component ties, like micro optimization features for layout. And container queries does that for you. But I think there is still quite a bit of delay. And, like, Adam and I have also talked about this gap between design tools and web platform capabilities that's just growing.

So how do we bridge that gap? How do we make people aware of things like view transitions and container queries when there's no way to represent those features in design tools.

Yeah. Totally. Well, I think that is a a a good way to bring it all back around to the start considering where we're at time wise right now.

So, yeah, here's hoping these, these new version numbers, they come in, and we can talk about them in a more organized manner. We didn't get even get to the CSS logo stuff. I just wanna say I do want a logo for CSS. Adam, I liked what you shared on Twitter the other day. I don't know who made those. Was it you or someone else? They were famous. Elements. Yeah. They did a great job. Yeah. Yep. Cool. Let's get a logo for CSS y'all. Okay.

Let's get into the part of the show where we talk about sick picks and shameless plugs. Did both of you come with a sick pick for us today? A sick pick can be anything that you're enjoying right now.

I did. But, I mean, I can start with a dad joke. My sick pick of the day was a booger.

Oh. Just kidding. I mean, no one said that. Right? No one's done that yet? No one's done that. No. Node. Yes. Done that.

Sweet. Okay. I got the dad joke about the sick pick. I mean, it is sick, and I picked it. Right? It's not making me happy, though. Oh, my sick pick is the Teenage Engineering k o two.

I've just been having so much fun with that thing just, like, sitting down with my kids and making beats. Hey. There's Nice. Scott Scott Node. My kids have all sorts of phrases on there, like Yarn, you Node, and then I'll just be like, alright. Cool. Let's turn your fart into a song and just I I also love watching my 6 year old make beats. I'm like, dude, he knows how to use a this is cool.

My kids go nuts on it too. They have so much fun. Or if we just get a loop going and they're they're just messing around, hitting the triggers and stuff like that, yes. Awesome.

That's very cool.

I should have thought more about sick pick, but I had my anti sick pick, my not sick pick, which is

The opal care. Emraht? Yes. Don't get the opal care.

I I mean, I just constantly have issues with the thing. But I will say and this is, like, not a new thing.

One gear, like, 1 piece of gear they've had for a long time now is the MX Master mouse MX Master 3 mouse. I feel like it's a really popular one.

I love this thing. Like, it's never failed me. Yes.

Exactly. So, like, sick pick for me is gear that you don't have to worry about.

It just works.

Mine did fail me.

But you took Node.

Wes After it's I tried to fix it after 6 years. It's the best. I it's such a good mouse, isn't it? And I didn't even realize the s means silent, and it's quiet, the clicks.

My old one, it was not silent. It was very clicky. Oh, that's thing I learned. I didn't even know. I think I have a I did not. Mine's not a three s. I guess mine's loud. What is yours? Here.

What number is yours? A two s? No. MX Master 3.

3. Oh, yeah. So, apparently, the s is silent, which for most cases, it doesn't matter. But I think if you're like, I'm constantly clicking and and selecting text while I'm listening to you guys, and Randy is just like, what the hell? Our editor's like, what the hell is he doing? Like, all I hear is

I also love my Blue Yeti mic. Like, I've had probably 4 different mics in the past 9 years, 10 years. Mhmm. I started a podcast in 2015, so 9 years. Yeah. And this I always go back to the Blue Yeti.

Yeah. And for the pricing campaign day. Right? Yeah. Tools day. Yeah.

Who did you do that with? With Chris Donaraj.

Shout out. That was and you were working where were you working at that time? IBM.

IBM. Oh, yes. I remember.

That was fun. We did listener. Yeah. We did a lot of episodes around. Like, that was when Amber was a thing. And Mhmm. It was like grunt versus gulp. Yes. Yeah. Yeah. That was the whole start of my YouTube channel, gulp. Nice. Yeah. Sick. What about Shameless Plugs? Anything you guys would like to plug?

We've got a podcast together called The CSS Podcast.

You should definitely check it out. We kind of make the computer science aspects of CSS fun and digestible.

So we go very deep into topics that other shows do not or even blog posts don't, and we kinda make it all relatable. We usually have a a giggle or a joke somewhere in there. I'm definitely way too dorky. But I think it's fun, and they're pretty short most of the time, except the anchor episode we just did the other day. Some of them are short of others. Yeah. We started it by just going through the CSS specs and, like, talking about them in a more human

way. But now we're sort of moving on to, like, new features that are coming to the platform. So, this is season 5 of CSS Podcast.

Wes do short seasons, like 12 episodes.

It's been a lot of fun. That's a good one. Yeah. Check that out. And you can always follow us online.

My website is at una.im where all the links are to all the things. Like, I'm una, but una Scott I m.

I was gonna ask you that. How did you get at una on Twitter and una dot I m domain name? Do you have any crazy stories, or was it just available? You paid somebody, internally at Twitter? Because that was back in the day, we had chat rooms where there was a couple Twitter employees, and they would they would hook you up. That's why some of the people in programming have such good handles.

Yeah.

I so the GitHub Node, I actually just got, I believe, and then on CodePen too. But the Twitter one, it was a I knew someone at Twitter. They had a policy back in the day where if somebody was inactive for, I believe it was 3 Yarn, if they hadn't logged in for 3 years, then they would remove the account if you requested it. So that's how I got Younod on Twitter.

That is awesome. We want so bad to get syntax on everything because we're like I was told they don't do that anymore. No. They don't. And even even somebody sniped our syntax on Instagram or syntax f m on Instagram.

And Yeah. Turds. Node it's syntax underscore. Out there. It might be gone now. Yeah. Yeah. Because everybody talks about syntax f m as in, like, that's part of the name. It's like, no. That's the only handle

we can get for everything. So f m. Yeah. Yeah. But the same thing JS all these companies have get in front of it. You know? Everyone calls it True. Get. Cool. Cool. Cool. Well, thank you so much for coming on. This was very enlightening. Very excited about all the CSS 3, 4, 5, 6, 7, all of the coming CSS versions.

Wes. I

love it. I appreciate all the the knowledge drop today.

Yes. Thank you so much. Thanks for having us. This has been a lot of fun. I didn't like, I feel like I didn't know where this would go. Oh, yeah. Well, anytime anytime you wanna chat about anything, you're more than welcome.

We're happy to have both of you on.

And we appreciate you all too. There's we get to quote your episodes. We get to show that people are talking about these features. We get to point to your site. Seriously, y'all are doing really awesome work that's super helpful for us to to validate the things that we said people want. And you guys are getting on this show going, check out this rad thing I just did.

We're we're happy with that. Wes you put together these, like, minute and a half long videos on Twitter, and they have, like, 2,000 shares and all these people saying, oh, I need this feature. Like, that's so nice.

Oh, good. I always like when there's new features that come out. Sometimes I feel like I'm getting all the, like, traffic and pumped up for years of hard work that other people have done.

You know? And I just made a a a 1 minute video on it, but it's, I I love diving into this new stuff and and being able to share it. The more the merrier. You know? Yeah. You you've got this audience that probably isn't following JS closely, like, the UI stuff JS the people who follow us. So Yes. Yeah. You're sharing it. I think a lot about just, like, the regular developer. You know? Like, there's there's so many aspects. There's the there's there's people that list that that read the spec. There's people that listen to syntax, people that follow on Twitter. And then, like, you go to a conference and you realize, wow. There's an insurance company in Omaha that has 40,000 developers, and a lot of them don't necessarily know about this stuff. So you gotta gotta get it to the regular people as well that don't breathe this stuff like we do. Yeah. 100%. So Well, 100%.

Well, alright. Thanks again, guys.