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

in resumes,

I think one thing that we're constantly

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 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

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

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

version numbers.

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,

in job descriptions.

of CSS. And I'm talking about people who aren't, like, keeping 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

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

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,

was waiting for Firefox to implement CSS has, and now it's in in there. And

And Yeah. Yeah. It's a time for them to say, ah, everybody wants like, CSS has was one of them. You know? hour, and some of the, like, mind blowing

being stuck or not. Right? Or or JS there other types of scroll states?

going to be Who did you do that with? With Chris Donaraj.

like just you know, the the class.

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 where all the links are to all the things. Like, I'm una, but una Scott I m.

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.

Safari has always had this weird bug where if you mix blend mode with luminosity

yeah. It's like

And maybe CSS 4, 5, and 6 will help people discover these things, Node. It reached baseline in I remember it was February 14, So what is the interim story? Yeah. Totally.

It's in the fall that this opens to raise awareness.

So first, I have a container. In this case, it's a d t element inside of a so, like, just for those,

teams or in the working groups. Like, it they're really attentive to people commenting. So Eunice at, I Wes at 5 months. It's 4, then it was 6. So

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.

too much for, like

well known existing features that have interoperability 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.

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.

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.

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

issues, like a lot of Wes features, for example, typography

So okay. Wes, look. It's Is that different from style queries? the future of CSS, the future of the web, the future of UI.

can actually use these things. And I think the one 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,

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

every head would turn either in the browser, 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

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

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.

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

opt into that very early on, where you're like, I would like to build this component

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.

you care about, like, the width of the the container. Right? So scroll state is a new type of container query that will

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.

the hard part is not necessarily

are landing,

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

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.

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

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

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

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

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.

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.

on 2 elements that are not side by side, then it it doesn't work. Right? Is is that a time

you know, take the surveys, do the state of CSS, state of HTML, you know, voice your thoughts ESLint interop,

call Wes you can open an issue on a feature that you think is really important to the platform.

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

Safari to

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,

CSS has probably a 100% for next year.

really helps.

So how do we bridge that gap? How do we make people aware of things like view transitions and container queries when

Yeah. I think that

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

thing up to date with the latest. It's very, very few developers.

with a container query.

dialogue at React Miami. She came and sat down at a whole bunch a a table with a whole bunch of developers,

features. But I yeah. I think that that's a good opportunity

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 it's just hard because there is this line to balance where,

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

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

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 of an element that can be raised to the top layer and can exist sort of outside the rest of the scope of the

And I think that this is an awesome opportunity.

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 There's also this initiative called Interop, and that, has an open

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 c, 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.

But that is how Interop started. Like, it started with display none out actually And it's not immediate for most teams because of browser support. So how do we help people adopt this? And

scrolled state, meaning that if it is

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 And that's where, like, the core of the is this available on which browser, like, data is pulled from 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,

Is interop a time for me

and, like, eke it out? Is that what that this is for?

we well, we had 97.3

and web platform capabilities that's just growing.

I I don't know why I use color mix. It's probably a bad example.

on 2024, myself with resize observer, and I hit an infinite loop. And I realized

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,

to get a public

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

what is that for? 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,

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.

to use, like, maybe the browser vendors don't necessarily know that. You know?

Yes. A state query is here at container scroll state stuck top.

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

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

You want, compact, IBM. Oh, yes. I remember.

when it's stuck. So I set transition background, transition box shadow, and then nested inside of there because nesting rules

sort of road map for

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 Yes. There's other scroll states. And so here's snap queries.

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

I had that with,

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 if you want to use a feature

almost most times, I could think about using a media query. A container query makes more sense. Your componentizing

respond in issues.

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.

Yeah. I had it I had it on my calendar for I had, like, a video ready to go for, like, 3 months, 40,000 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.

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,

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.

Gosh. Boom. It snaps. So it's basically like scroll observers turned into declarative easy container queries,

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

Boom. It snaps.

Yeah. But if there's if there's Node where we're, like, all dying already. You're just not using it properly.

that is the most useful Uh-oh. So it it'll be like selected option dot longhanddisplay discussion early on and constantly to make sure that we're shipping the right thing. And so

support this type of thing its currently Everybody

there's no way to represent those features in design tools.

There's some 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 focuses.

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.

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.

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

for me to say, like, hey. I would love for

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?

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

is the MX Master features, and that

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

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?

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.

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

I was gonna ask you that. How did you get at una on Twitter and una dot I m

I also love my Blue Yeti mic. Like, I've had probably 4 different mics in the past 2023. It was Valentine's Day. We did, like, a little We should be in the March. Valentine.

That is awesome. We which for most cases, it doesn't matter. But I think if you're like, I'm constantly every video I do, I have

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

My website is at una.im

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

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

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

so 9 years. Yeah. And this I always go back to the Blue Yeti.

Yeah.

wow. There's an insurance company in Omaha that has

mouse

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

domain name? Do you have any crazy stories, or was it just available?

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

of CSS Podcast.

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

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

It just works.

fun and digestible.

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.

3, 4, 5, 6, 7,

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, 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,

Well, alright. Thanks again, guys.

One gear, like, 1 piece of gear they've had for a long time now

Mine did fail me.

We're happy to have both of you on.

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.

years of hard work that other people have done.

But you took Node.

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.

developers, was, like, 12 seconds or 24 seconds of the 1 hour just to show you how

IBM.

and pumped up for

That's very cool.

and they have, like, 2,000 shares and all these people saying, oh, I need this feature. Like, that's so nice.

the GitHub Node, I actually just got, I believe,

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

CSS versions.

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, patterns. Could you also do, like like, off screen or, like, cover 50%

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

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

So we go very deep into topics that other shows do not or even blog posts don't, 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,

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.

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 but what we're doing here is triggering it as soon as it's stuck.

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

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.

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

9 years, 10 years. Mhmm. I started a podcast in 2015, Exactly. So, like, sick pick for me is gear that you don't have to worry about.

We're we're happy with that. Wes you put together these, like, minute and a half long videos on Twitter,

silent, over

I should have thought more about sick pick, but I had my anti sick pick, my not sick pick, which is show us what you're building.

I so

Wes do short seasons, like 12 episodes.

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 to say, hey.

MX Master 3 mouse. I feel like it's a really popular one.

Oh, good. I always like when there's new features that come out. Sometimes I feel like I'm getting all the, like,

Wes. I

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.

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

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.

or syntax f m on Instagram.

breathe this stuff like we do. Yeah. 100%. So Well, 100%.

Another note too is

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

the work that will support

of this is just a flag and, like, the shorthand of what the

drop down select where you can filter and select multiple items and put images inside of them and,

So that this is an example of just for a lot of features. Like, I think that should be built into, like, the semantics of the HTML and that, in select, which, if you use size right now for select,

type of element. But, the Open UI community group, So when those things Node,

it's not even that. It also is older browsers that users might still be

Man, I'm so excited about this feature. Like, it's Right? Thinking of all the things that you can build with this

it shows you an inline

list of options, which, is also out of scope for customizable select.

So we talked a little bit about Yuna's

put little icons inside of your drop down warp choose what the arrow looks like or

a ton of stuff that would be hard otherwise because the popover could live somewhere else in the page from Mhmm. Document.

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, How does that all work? It's all based on BrowserCompat all of the coming

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.

Canadian dollars.

where now unsupported browsers can still get the text content from the options inside of the select.

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,

I had this tweet from, like, 2017 cross browser support of platform features.

I guess, which CSS are they fitting into?

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

because you can trim the text boxes.

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?

on. It takes a while. Even if something hits baseline Node available, that doesn't mean that's your browser support matrix.

styling drop downs. That's, like, the one thing that

absolutely everything I want. And now we're starting to see with pnpm Vercel anchor and and hope hopefully Vercel And it's such a it's such a feature where, like, you kinda

where there's so many accessibility implications that need to be taken into account. Wes right now,

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.

interaction.

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

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?

And then there's also this feature called anchor positioning,

And this will trim all the excess cruft off the text box node on the top and bottom, which allows you to also,

what does it take to actually use the feature? always the prototype. Right? Sometimes it is, but not always. The hard part is getting consensus

features

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 this is what the browser vendors are doing. Because

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.

currency JS, sort of this currency selector for those listening. But then when you open the drop down, it provides more context.

So this really provides a solution.

Interesting.

yep.

And then just some really cool examples too. You can start to line up text in multiple directions It is duplicating it. Yep. Wow.

the, like, the 0 JavaScript needed for a lot of this stuff to make really nice UIs is key.

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

Like, I think Una had a talk at Google IO,

So right now, there's a prototype in Chrome Canary with experimental web platform features turned on. It is currently in So it's it's, like, so much fun to play with API. Oh, that's how you're doing that? You And that is out of scope for this

have perfect alignment in, like, a subgrid.

was enabling something like a popover Wes you have this functionality 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.

just feels like such a big gap from the platform before something is rendered to the page, 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

which lets you actually reflect the content of the option that is selected, the the selected

just with HTML and CSS,

and then the symbol.

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

all of the new like, the popover stuff, the detail stuff, the,

which works with the what working group and CSS working group, is going to probably focus on that So it has the longhand name of it, like United States dollar instead of USD

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.

What's really cool about selected option is that the preview

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, and to not be stalled.

the DOM element or or duplicating the DOM element?

and give you the tools to actually

which was, I think, close to an

next after this. Like, how do we solve that problem? Select multiple. Right now, they're like Multiple.

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.

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

I can start TypeScript. It'll fuzzy complete like, I just did it. I popped it open. I TypeScript

very soon is that

that will now enable

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.

Yeah. Exactly.

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

Cool.

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,

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,

use symbols along with some text to help users parse the the items in the drop down. So that set of features

use a grid of of possible options, like full control

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

I think for me right now, I've very I've been in select land

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.

a select you can look at the code, and it's really just oh, did you add some JavaScript to it?

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

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, WCAG

that we're now shipping and providing these primitives to developers.

the new animating, allow discrete,

I might have been playing with view transitions.

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

Oh, that's cool. So here's the symbol, and then she's got it set to display none down here. This is at container, scroll dash state, open up your parenthesis,

there are definitely some accessibility kinda like asterisk here. Like, you can't put to do the initial categorization, which is included in the RFC.

which just shipped in Chrome, and I'm seeing a lot of commits from other browsers too. I think that's a hugely So 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's a data list, and it does that by default. So

slash better

And then these are these 2 primitives

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, 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 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.

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.

But it can't do x, y, and z, so let me go get a React component that does

where you can connect a select option to a select and use it outside of the select element.

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

Wes I was like, it's 2017. Why can we still not style drop downs? Yeah. It's just of that So it's something that we really

customizable select 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.

So there's no select multiple. There's also currently not the ability to use the size attribute and for MDN, And

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

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

or MDN? Like, I sometimes on the show, Scott and I will be doing a feature,

We want the web platform to move forward 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.

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.

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 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

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

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,

in CSS 4, but they respect along with these other features and implemented in maybe, like, 1 or 2 browsers, Definitely. I I think we're constantly thinking about

this kinda makes it easier to have an answer.

where it's not all that exciting, but then they can build upon it for new stuff.

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

Deno.

Yeah. One of the big differences is that

frequent

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 not watch for the size of the container to change, but for if you care so much, please care 6 months earlier. Right.

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 Because the more demos we have, the easier it is to showcase, like, hey. Developers find this really valuable.

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

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, groupings Sanity and feature completeness

requests for 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.

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.

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

grid row. So once once they loop on to the 2nd line and I wrote that functionality

Starting style

that can facilitate conversation,

And second of all, like, I'm not spending Pnpm it for a second. Come on. Yeah. Yeah. But

But this gives you the ability to animate it in. We're still missing the ability to animate

but I I believe they're trying to It shouldn't have to be used for accessibility

restrictions, like even text wrap balance,

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

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?

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, For those of you who aren't watching right now, if you if you actually wanna see what's going on,

to determine that. And and there's a lot of features too that, like, initially landed with 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.

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

most of the time. I can't really think of a use case in which you'd need Yeah. Styles

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,

They get to come in when things have kind of unison of version. But then we saw individual specs get extra features, like color's a good one. Color has gone up 3 levels And so, yeah, we're trying to balance all of these different factors into something meaningful for people.

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

like, anchor positioning and now with Slack. Like, there needs to be

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 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,

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

calculations

at 50% instead of at 0%. So they do go hand in hand

the scroll driven animations.

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.

at Safari, I thought. Optimizations. Yeah. Yeah.

for baseline, for the widgets.

The hard part is you're gonna have to know the ID of the 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,

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.

within them. So you could have features that aren't even supported anywhere potentially where everybody wants the web platform to move forward.

for the exit part of that effect.

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.

or is it just, like, so that we can sort of talk about,

kind of make sure

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?

data, which is, like, the MDN BCD is to build things with it.

that there is a shared vision for the web for developers, like, for the sake of actual users of these technologies.

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.

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, interop 3. Oh, yeah. So, apparently, the s is

Is the data from ESLint, does that come from Can I Use

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

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.

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

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.

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.

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?

ultimately, we wanna focus on doing good.

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.

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?

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.

it

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 why is it named this? Oh, why is it x, y, and z? And it's like,

was JS something overflowing into the next ESLint? Like, with Flexbox too. So, like, your example,

studies all the time and trying to figure out what are pain points that we can resolve.

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, some of the

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 like the feature that lets you balance text to 50%. It was initially capped it's just hard when there's a lot of features landing too, and every Yeah. Every team has different priorities.

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.

Wes, what do you think? You wanna talk about some of the next stuff?

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

I think that it used to be separate for CanIUse

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

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.

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,

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 compliant. So they they kinda, like, go hand in hand, but they're slightly different

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

that can create the same sense of, like, categorization

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 and we discovered display flow route. And both of us were like, woah.

and we'll gather people together. And maybe we can find these healthy buckets 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,

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

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,

They did connect at one point. So when CSS 3 was labeled,

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,

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,

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? 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.

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.

I believe almost all the levels or something close to it was at 3. There was this

CSS

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.

and modernization. And we can talk about a CSS feature being in CSS 5 or something like that. And that can help articulate

4 is this generation of features?

So do the individual spec levels

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

to

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

Syntax. Today, we've got 2 amazing guests on today to talk to us all about some of it was just like,

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 traffic

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.

syntax. Send in a good 2 months for free. Alright. Let's get into this CSSing.

Really excited about this one. We've been trying to get,

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

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/

and she says, hey, everybody.

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

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.

and that was container queries, big ones, scroll driven animations. We just did a little explainer episode on the animation parts of that, the math function,

in Node story,

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 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.

I can explain what she does Yeah. We just talked about that. Like We just talked about how you can kinda hack it with,

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.

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.

That's awesome. And I'm just looking at it real really quickly. CSS 5 has

logical properties, which is ESLint and block.

JS the idea here that someone like Chrome is going to be CSS 5 compatible, How do we introduce you, Adam? What do you do?

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

And those would include