Supper Club × Adam Argyle on What's New in CSS

I sure hope you're hungry.

Hoo. I'm starving.

Wash those hands, pull up a chair, and secure that feed bag, because it's time to listen to Scott Tolinski and Wes Bos attempt to use human language to converse with and pick the brains of other developers. I thought there was gonna be food, so buckle up and grab that old handle because this ride is going to get wild.

This is the Syntax supper club.

Welcome to Syntax, the podcast with the tastiest CSS treats Out there today, we've got a really fun one today. We've got Adam Argo on, which, I think you might be the 2nd person we've ever had on twice on the podcast. Is that true, Scott?

I feel like Adam's already been on twice.

Have you been out twice? I might have.

No. I don't. Okay. No. I only see him once. Okay. I just did a quick find. How how how does stuff Get added to CSS. Ah, yes. Okay. Episode.

Yeah. 274.

Adam is on here today to Talk to us about, like, literally, CSS is booming right now. There's so much that, like, If you had stopped writing CSS, like, 3 years ago and you were to, like, look at it today, it's like it's almost unrecognizable

In terms of all of the new features and syntax and everything like that, it's it's it's a good time to be a CSS developer. So thanks for coming on, Adam. Oh, 100%. Yeah. Thanks for having me. And, yeah, it looks like it reminds me of that e s five to e s six jump where, you were like, I'm looking at functions and stuff, but what are these arrows and this export Poor stuff. It just is it has transformed into something new, and it's great. Yeah. Totally.

It's too bad we can't call it, like, CSS 4 or something like that. Like, So when we had CSS 3, they put it in a big thing called CSS 3, and we got border radius and custom Fonts and all that stuff. Yeah. Remember, we didn't have customs. Shadows.

Yeah. Great.

Yeah. They went away from big releases like CSS 3, and now we just have specs Level 4, level 5, level 6. You know?

So we can't say CSS 4, but a lot of these are level 4, level 5 proposals. Right? Yes. But there is a working group, a community group that I'm a part of called the CSS 4 community group, and we're trying to come up with the next labels 4, 4, and 5, and maybe 6 and beyond because it's really helpful to be like, my educational content is CSS 4. It just always sold well, and it resonated well with people. So we're trying to figure out what those buckets are, make them, kinda crowdsourced we all agree on what those things are, and you might end up seeing a CSS 4 appear.

Oh, good. I love that. Look at that little tidbit

right after the nugget. So, like, that is what today's entire episode will be is Adam laying it on us, Little nuggets of of what's new in CSS, and we're gonna just kinda kinda riff on it.

So what's new in CSS, Adam? Oh, man. I feel like we should call them, like, CSS bonbons or something because they're little treats, you know, little Oh, I like that. Nuggets I I mean, nuggets are good, but I think of chicken nuggets. I'm I'm mean Yeah. No. I think bonbons. Here. We'll start here. Have you met Rex, Rick, or r l h yet? No. I've seen tweets, but, now I'm interested. Rick. So okay. What I and I just like it because they sound like someone's name. Rex is root x, so we've had the x unit for a long time, which represents the x height of something. Right? We have the character unit. We have all these units that are sort of like relative and fonts metric dependent, and so that's the x. Now we have Rex. We also have The IC unit, we've had it for a long time. It's like the water unit in, Japanese characters and stuff like that. Well, it's not the water unit anyway. There's, like, a cool story there, but now we have root IC, And then we have root line heights. You don't have a a unit that represents the current line height for that particular element.

Anyway, some cool new relative units. Oh, so what what's the purpose of like, why would we need these things

Sat on the root. Nice. So, yeah, a lot of these things are if you're messing with the if you if you have a user who's gone into their font settings, this always happens My parents opened up their, texting application, and they've just got the font zoomed way up. Yeah. This can happen on a browser. They can go into the browser. They can set their user settings to a higher font size. And so by using a root value, you're gonna you're gonna opt into it's just like a little hook. So these are root hooks for you to hook into that user's preference and use them in a sort of, reliable way throughout your application. Whereas if you don't have the r in front of these things, They can adapt to the current font size or the current line height or the current things that are in that particular context, whereas the root context Is anchored off of this user's base that they prefer?

That makes sense because on a couple of years ago, I said HTML font size 10 p x is fine. I don't know why people do font size 62.5%, And I could never figure it out. And then we had a lot of people say, hey, the reason why you use font size 62.5% is because people can change their Font size in the browser.

And by setting 10 p x, you basically just stomp on that. Be like, I know better than you. But by putting a percentage of Their setting, then it will scale up and down accordingly. So I guess this is taking that even further?

This is taking that even further. It's like, hey. If the if The REM wasn't good enough for you if that that that Root m was not here's some more. You know? Go have fun with some additional relative units taken. Like, the line height one is really cool for baseline alignment because now you can set the line height and then use that line height unit in your grids. So there's, like, some really clever stuff that you can do with these. I also have a demo with the gradient. A gradient has perfectly, colored lines of text because I mask the text with a gradient, and I make the size of each color stop One line height. So I can have a red line, a green line, you know, a yellow line, all with this 1 unit that's just passing in, and and scales perfectly with all the amount of text that you need. It's pretty sweet. I found your blog post about the new relative units, Rick, Rex,

And it says that that brings us up to 50 CSS length units.

Yeah. That's a It's something to talk about. Yeah.

We have a lot of well, really, the reason it really, like, combinatorially here, let's state specificity combinatorially.

It's computationally worth anyway, whatever. We have a lot of, like it came from the the dynamic viewport units is what happened was they introduced, like, 20 new units just Giving you the Mhmm. Logical and physical dynamic and small and, large import units, and we had a matrix of new Units land on us. Yep. Feels like he could make a whole course off of units in CSS now. Yeah. I think you should. Units are like a superpower too. You go to other Other systems and try to build, and you don't have all this flexibility and option in these units, and they end up be pretty cool. Yeah. I I I think People complain about CSS, but CSS is more powerful than any

editing program out there. And I went as far as I whenever I do my TikToks, I always do, like, overlays.

I I always make, like, a overlay in in Figma or something like that and export it and then put on top of the video. And that way, it has a nice thumbnail. I was just building them. I was like, this is really frustrating that I had to, like, redesign it every single time. So I just built it in CSS. I use container Queries and you can calculate the font size of how big it should be and where it fits. You can tilt and you can do literally you have you have control over Everything in CSS now. And then I just dump that into Canvas with HTML to Canvas, and it it's amazing that It's it was easier for me to write it in CSS than to do it in a editing program, and I can automate it now. Yeah. Seriously, the layout engine alone of CSS is we have grid and flexbox. It's not like we just have 1. The world is amazing right now for for the web. We get to be weird, But also, like, confident, and we have all these rad features.

Yeah. Life is good. Speaking of rads,

or grads, you have this new website, gradient dot style, which really showcases, what CSS gradients can do as well as the color spaces. You tell us about both the website as well as, like, what CSS features is it leveraging?

Yes.

SvelteKit, TypeScript, and Open Props Building that site, I had a blast.

Always loved some Svelte. It's just a joy to work inside of. I'm sure there's ways for me to make it better, but, you know, it's all good. The idea was, like, I was early adopting all these color spaces, making gradients, finding bugs for the browser, developers, and I was like, well, if I just make a tool, I can simultaneously really dig into the spec and implement something that gives everybody the power that they that they're gonna have, And then teach them about all these kinda cool features of gradients that people don't know are there, like transition hints. And then now we have color spaces, and you have color interpolation. So going the long way or the short way on Gradient and all this sort of, like, cool stuff. I just packaged it up into something that should feel pretty familiar, and it helps you build that CSS, then you can just Visually create something and then grab the code and go. I just love making grab and go code tools. I love making design tools.

And also nothing had really visualized color stops for radial gradients and conic gradients, and I wanted to do that. I wanted to be one of the first people there. You get the you get a brand new color picker that has all the CSS spec color, spaces available in there. You have the new gradient syntax available for you, and you can build it all visually.

It was just a little passion project.

Yeah. This thing is super wild, to use. I mean, in in terms of, like, It it hearkens back to, like, the the old day of having fun little in browser tools. I remember little tools like this. Do you remember, like, Sprite Cow or anything like that. Right? Just little tools that you had in your browser to visualize these types of features in in CSS.

But this this one is very slick.

How long did it take you to make this, by the way? This feels like it. This feels like it could've taken a while. It did not take that. I think the early prototype was just a couple of nights. The hardest part has been layering in the visuals for, Like, I just added last week, radial gradient color stops.

And so now you see the size of the radial gradient, you see the the position of it, And you can also now see the color stops along it and the transition hints, and, I'll do Konik soon. It was actually really fun. My kids would go to sleep, And it's, like, quiet time or whatever, and so he'd sit down and read a book, and I'd grab a pencil and paper, and I would sketch out how I was gonna do these overlays. And so Soon, I'll share all my sketches. It's been you know, I I like to do, like, 4 like, ahead of time thinking. I think that really helped me sit down and, like, know exactly what I was gonna do, but, Yeah. Thanks, man. Thanks for the compliments on that. I really appreciate it. It it's honestly amazing. Like It's a better gradient tool than Figma has. Yeah. Every editor needs this. You know? I hope so. I hope it inspires every design tool to get out of the 19 nineties because we're still making gradients like it's 1999. I don't know why. Yeah. Chrome effect gradient.

Just add the chrome effect gradient from Photoshop from in the nineties.

I I hope that at one point you add I remember there's this website, like, Color Lovers, where people would, like, curate color swatches together.

Sometimes people are so good at making gradients.

And I often like, I'm like, I just need a quick gradient, but I want it to look sick, You know, and, like, I just want to go. And you have, like, 6 or 7 premade ones there. But I want to find, like, some designer who, like, knows their stuff, That's made a bunch of really nice crates, and then download them to PNG or something like that so I could throw them in my videos. Oh, that'd be sweet. Open Props has a pack of There's 30 of them in there for you. You just try them on. Gradient 1, gradient 2, gradient 3. You're like, I don't like it. Don't like it. Oh, I like that one. Yeah. I have used,

the open brought gradients in that exact fashion. I was like, oh, I need something quick and easy for my background. Let me just pick one of the, the defaults. And I like that you added grain to those as well. Oh, yeah. I got a great noise. Grainy is, like, in, really in. Yeah. Noise. Noise. Love it. Noise.

How do you do the the noise? That a SVG filter? It's an SVG filter I put in a prop for you. Yep. So you don't have to deal with the escaping and all that garbage. I give you, like, 3 of them, and it's it's, like, 3 amounts of of noise, and you just get to apply them and then apply a filter on top, that kind of helps you tackle the merging of these things and getting the gradient Like the green effect that you're looking for. Yeah.

So, yeah, gradients in CSS major glow up. And with color spaces, they're starting to look super smooth.

Very, very smooth, buttery. Everything just looks fantastic. So if you're out there and you're like, oh, I've I've done everything there is to do with gradients. Check out this tool. I have a link to it in the show notes and really start playing around with it. I think your mind will be blown on what's possible here. Thanks a bunch. I made a joke the other day on Blue that I was like, okay. Every site that is in sRGB using old school gradients and old school colors is gonna be like a VHS

compared to these new ones Or you're a DVD or maybe even like a Blu ray. You know? And just like, we're gonna go to sites and be like, it feels a little desaturated here, and it's because we're eventually gonna get used to these High dynamic range,

colors being in our devices everywhere. Yeah. And look at you adding a little HDR toggle on these too so you can visualize that out there. If you don't know what he's talking about right now, head up to the the site. Click on the, palette example. It's like a pink Gradient 1, you could just click the HDR button, and it's very clear what the difference is toggling them on and off. It's one of those things I can't unsee. You're like, oh, snap. I thought my gradients were beautiful, and now I'm like, oh, they're not. They're muddy or whatever. Yeah.

Can I ask about Style queries? So we've done a couple of shows on container queries, which you can basically style A container based on how big it is instead of the viewport.

And then style queries has come along, and there's it's basically you and Oona who have stuff out there on what they are. Can you explain what style queries are and how they relate to container queries? Yeah. So the 1st version of style queries that has shipped right now is the ability for you to query

a custom property's value just like you would the viewport.

So you can toggle an entire card. You can tire toggle an entire layout. You you I mean, we use custom properties all the time to hold state, And now you can query the state and not and you don't have to do a bunch of those hacks that you were doing before, like dry switching and stuff like that. You can just Reference the current value of a custom property and toggle an entire set of new styles. Just like if the container's big or small, you can say it's this container's custom property state x or y and do something new. It will eventually be more than this though, where you can literally say, well, what's the color of the text? If the if the text is black, then I want a background of white, and you can so those are the be the style queries there. And then coming after that is State queries, which was just on topic this morning, and the state queries are the ability for you to say, is an element stuck? Is an element Oh. Currently being overflowed. Like, is there a scroll bar present? Is it snapped? Is this element snapped? You know, stuff like that. So state queries,

are also part of style queries. It's it's so wild that we it took us forever to get past just media queries.

We recently got container queries, and it's like floodgates are open, style queries, state queries. The The, options here for for this stuff is really taking off. It it's like exponential here. What an unbelievable

Turn for CSS. So for another example of style queries, like, let's say I had, like a card and I had, like, a state where it was closed and a state where it was open.

I could just have a dash dash Status colon open.

And then and then I can say when this thing has a property of open, Then apply all of these styles?

That is correct. That is correct. That's wild. Sorry. You could Also do a whole theming system this way too, Wes. Instead of adding a class, you could have a theme value as your your CSS

Property. A media query could change a custom property, and then all your components query the custom property to determine if they're light or dark mode. Yeah. Yeah. And then beyond light or dark mode, like, you have,

in in one example here, like, a rainbow mode or a bookish mode or a pink mode. Gotta love this stuff. This is good stuff. And even, like, even if you were in react, you could just inline

a style attribute and put the open or closed value as a property, and then it would snap to so instead of adding a class, you could just add a property to it, and then you don't have to deal with all the weirdness of selecting Let the browser give it has it. Yep.

That is wild.

Wild. Oh, cool. I haven't gotten into this stuff a lot more. What's the status of style query specifically? Style queries, last I checked, it's in Chrome, I think Safari is working on it.

Yeah. It's definitely on the newer side of things. So, yeah, not near the stable, Very good yet. Yeah. Interesting.

Yeah. It's not in anything. If you want to look it up on Can I Use, it's called CSS container style queries, which is Different parts to it? And also we had a show on, like, moving from SaaS, and that that kind of is

Mixins? You know? Like, you just apply a specific thing. You can't I guess you can't pass that argument, though. There there's people working on Mixins right now. Tab is Working on mix ins, trying to figure out a spec for them. Oh. Yeah. Will they be actually called mix ins? Is there something do we do we know what they'll be referred to as? I mean, we're We're currently calling them mix ins as we talk about them, but I'm not sure if that's how they'll Yeah. Wind up in the end. You know? That's cool. So we recently also got

trig trig functions, which we've mentioned a little bit about here.

And, us non math folks, can you Maybe explain what some cool use cases for, like, a trick function might be inside of CSS. Yeah. So I got, like, layouts and rings. So if you wanna do a

you know, a radio layout, it makes it pretty easy. You got sine and cosine and this ability to sort of, like, shoot out from a center, but also still be vertically aligned. You got, like, icons around a a radio button. Like, what's a speed dial? You can make a speed dial with those really easy. If you wanted to do a layout that's not just in a line from left to right, but in a wave, Like a sine wave, you can do that. You can have things arc and curve, and so they can kind of help your layout break out of this x, y, very linear robot. You know, I move up and down, left and right, and it can give it some arcs and some movements.

So, yeah, there's opportunities like that. And animation. Right? So now you can animate along a curve And just get that more, like, Disney principles in there.

Yeah. Good stuff. Disney principles, for those of you who don't know, I'll post a link, but Disney had A series of principles for animation, in terms of how to give things life. It's like squish and bounce and those types of things. There there's a really good GIF that shows all of them or GIF depending on who you are. I'll make sure I have a link to that that in the show notes here because it's it's really one of those things that if you're not into animation, You might not really truly understand just how to give your animations a little bit more life. A lot of times people just throw, like, A linear easing on this thing, and it looks like garbage and they don't know why. Yep. Think about Wile E. Coyote.

Right before Wile E runs away, his arms go up, And then he busts away. Right? And that's called anticipation.

Yeah. So it's really good stuff to know. It can really take your Your interaction's next level for sure. Sick. Let's talk about this live transitions. So you

I I think this has been around for a while, but you just launched this website, Live dash transitions.pages.dev.

Certainly, hit up my show notes. But definitely check it out. Yeah. It is Super. I sent it to y'all. I was like, have your mind blown with this.

I love it when you do that, by the way. We'll occasionally get DMs from Adam that are just like, guys, check this out. And every single time, I'm like, oh, man. This is so neat. Little tasty Tea treats in our inbox. Glad those are appreciated. I'm like, this is annoying. I don't know. I'm gonna send it too many ways. It's too cool. It's significantly not annoying. Yeah. Red.

So page transitions.

So we we have a 2 different there's like a there's like a category of new things coming out, and they all have Transition in their name, and they have view in their name. So we have view transitions, which was previously shared element transitions, and then we have, view timeline.

And view timeline is the new scrolling animation stuff. So we'll start with view transitions, which has 2 different things. The first one is you can basically do flip in the browser. You've got a grid layout. You change the grid layout. You change the order. You remove 2 elements or whatever. In JavaScript, you can say, document dot create transition, view transition. It'll take a snapshot of that grid before you make your DOM modifications, then you mutate the DOM, And your function ends and it takes a snapshot of the final state and will do the work to animate between those states for you. And it's got all these little tips and tricks in there, like, you can, label each grid item so that it morphs to the new location.

It is slick stuff. So that's, view transitions, but it also has a multi page version where literally from page a to page b, 2 entirely different HTML pages. They have a meta tag that says we opt into, transitions, and then the browser will say, okay. Well, let me look at the diff between this one and that one, And it will allow you to animate the elements or just animate the whole page transition.

It's got all sorts of really cool options in there, and so, yeah, you got multi page and single page Morphing, you know, smart, dumb manipulation, stateful ready animation stuff going on in there, and it's really cool. So that link that I sent you, Wes, was, That's somebody just doing some really rad work with that view transition API, making a single page application just feel,

buttery and alive is really cool. If you're out there and you wanna see some stuff, this is it. This is this is, like, my favorite link that I've seen in a while because this takes us so close to Native development. Like, native app development, one of the things they've always had on us was, oh, these we click a thing and then we get these Nice little page transitions or or morphs or anything like that. And morphs have been possible with you know, you have framer motion. You have Svelte, you can do flip animations with. But, yeah, as somebody who's used all of that stuff, React Overdrive, they never felt Great. And it always felt like especially if you were loading a deep HTML too. Right? Yeah. And none of they they would yeah. What they would do is they'd have the element in there twice, Then they would swap between them and do a crossfade. They would, do that flip animation for you, and it was always, like, iffy. It was never Great. They were doable. We use them. But, you know, to have this in the browser, let the browser do it for you. Let the browser optimize it. I don't wanna be in charge of any of this stuff.

Wow. We should say that this stuff gracefully degrades beautifully. Like, it Yes. It's just like 1 page to another page, and it's an anchor link. You click on it, and it will transition from one to another. And if the browser does not support that, guess what it is? It's just a regular Page it's not even a page reload. It's like if you're using push state or some router that just changes from one to another, then it just Jumps to what it was normally. So you can you can just add add this in and you get these beautiful

Transitions. Just to be assessing. Yeah. You can put behind reduced motion, but, yeah, like, imagine everyone, you've got page 1 with a circle at the top of the page. Page 2, circle at the bottom of the page. The, there's a link in the middle that says go to page 2, and then when you're on page 2, you can go back to page 1. You can tell it to, create a view transition name. You can give a name to that circle so that on page 1 and page 2, it has the same name. And when it looks at the 2nd page after you click the link, it'll be like, oh, that circles at the bottom. And so when you click the page, it'll go the circle just travels from the top to the bottom. And you just literally did page navigation, but it does not feel like it.

It is so magical, and it is just an upgrade. It's a CSS upgrade. If the if they don't have support for the CSS, it's all good. You just get a regular page load. And you're not shipping JavaScript You're not shipping JavaScript. Like yeah. The best of all worlds there. Why can we do this, but we don't have Height auto animations.

Well, I mean, we kinda do with grid now. Right? You can animate from grid, height track, and 0. So, like, there's there's some good tricks out there now, but, yeah, height 0 oh, that's a fresh height auto is the frustrating part. It's not height zero. Plus, I also have, like, some beef. I think most people don't actually wanna animate height because that could cause, like, text reflow and stuff. Think what they wanna do is clip most of the time or mask. Yes. Clip. Yeah. Mask. Yeah. Anyway, that's a side rant.

It's it's almost always just for accordions too or or something that needs to expand vertically In that sort of way. Right? Oh, yeah. That stuff is awesome. So then there was also view transitions. So if you think about a scrolling animation,

there's 2 phases to this API and feature also. The first one is Literally attaching to scroll. So you've got, like, you're at the top of a scroll or you scroll down to the bottom and imagine a read bar tells you how far you've you've read. And when you get to the very bottom of the scroll or the read bar is full, you scroll back over the The read bars back to empty or whatever. That's a scrolling animation. You can totally do that, but now we also have This ability to know when an element itself is entering the viewport and exiting the viewport, and this gives you on scroll Linked animations to the state of something's viewport, intersection without writing an intersection observer. You have a CSS only method of connecting something to scroll and animating its presence, and it's just like it's entering the stage and exiting the stage, and you get all these opportunities to to animate. It's really rad. What a wild world we're living in. Has you know, Like, text wrap balance is super rad. This one is, some really cool demos on this one. Just another one of those just like easy upgrades. You got headers, h 1, h 2, h 2, you got block quote.

Give it tax wrap balance.

I put it on some slides. I'm making some slides right now. I'm like, oh, all my headlines are gonna be balanced in here with just one line of CSS. Gotta love that. That's amazing. I did a little, TikTok

TikTok TikTok tip on it. TikTok. And Basically, you just put Kexip balance on it, and the browser will say, alright, we got this many characters. Let's let's even them out between the 2.

And what's interesting about the spec is that the browser is in charge of figuring out

what looks best. And there's some other stuff, text wrap, like What are the other ones? Yeah. So Pretty's in the up upcoming here. So Pretty is so what balance does is it tries to create a harmonious block out of it. And it will leave things hanging on the end. And it's anyway, whatever. What Pretty does is ensures that there are no orphans or widows. So a lot of people were like, hey. Text Wrap Balance. It made an orphan. And you're like, well, that's just kinda it's a different it's a different algorithm choice, and so that's what Text Wrap Pretty is gonna do so you can put text wrap pretty on your paragraphs so you don't get any orphans or widows, and then put text wrap balance on your headers, and then you get a nice balance header block. It's cool stuff. Cheese.

Yeah. I never heard of pretty. So what's the status of pretty? Is that is that something that's just, like, Future No. It's gonna check on right now. Yo.

Cool. Yeah. The end shoot good balance is, like, on pretty right now, and I'm I'm in docs with them trying to figure it out. Yep. Really? So who came up with the name pretty for that? That's a really fun name. I don't know. I think it's because I have no idea. I mean, it's gonna look pretty because it has no Orphans or widows? Actually, I don't know. Yeah.

No. That's sweet. So people are probably listening to this right now and say, oh, it's awesome, but we'll never be able to use them. But Firefox, But all these things maybe I can ask your opinion on this type of thing because I feel a little bit of concern as well.

So Safari been been kicking ass lately.

They've been shipping everything.

Everybody's been like, oh, Safari's the new IE, but Tim Apple got an email about people tweeting about that, I think. So it seems like they've been been kicking ass. Mozilla, on the other hand, they had a big, big layoffs. I saw The other day, like, people don't realize that Mozilla's main source of income is through Google Ads. Like Google actually supports Most of what Mozilla does, and I fear with the upcoming AI people doing less Google searches and like that, I fear that Mozilla will unless they can find some other way to make money, I fear that that will just continue to go downhill.

Which sucks because I'm I'm a full time Firefox user for, like, 5 years straight. Do you have any thoughts on, like, what that will happen given the caveat that you work for Google? Yeah. Well and I'm down to be like, a lot of this stuff is just lesser known, but I don't think it's a secret. Like, one of them is Google pays engineering teams to help features get into Firefox And Safari. And Safari. Literally, Google is putting its own money on the table saying, we want all the browsers to have these features. It's a it's a standard.

We wanna we in order for us to have Interop this year, we want everyone to feel excited about these features. We will help y'all, and so that's like Igalia. If you've heard of Igalia, they get hired to do this work across these other engines, and so they're almost like mercenaries for hire. They're like, we hack on every browser, and we add features, you know, just like give us some dough, and we'll go nuts. And so and Google gives them dough. And, yeah, Google gives Mozilla Money for being that search, as well. They're doing a a steady job. They still ship a lot of feature. This Firefox I'm talking about now, they still ship a lot of features.

And sometimes there's an advantage to waiting a little bit. Like, yeah, look at Safari just came out. It's like a 150 new features in the latest version of Safari, and you're like, dang. Y'all are really kicking it up, but also they waited a little bit for everything to get sturdy and stable. All the unit tests and all the, you know, web platform tests are all there so they can go start to hack on it with confidence. Like, oh, I've got a 150 test to pass. If I pass a 150 test, I got the feature done, and it can kinda help them accelerate in that sort of rate. Does it burn you a little bit when people like I saw me going around. It's like, here's all the browsers, and they're all Chrome, and then there's Firefox, and people are using that as an opportunity to dunk on Chrome. Like, personally, on a personal level, does that burn you a little bit? Because, like, to me, I I get a little defensive about that, but, like, yeah, but they're the ones really pushing stuff. I yeah. I'm not, I don't it doesn't it doesn't get under my skin at all. If anything, like, I love Arc. I've been on Arc is killer. I've been using that Pretty much exclusively for anything personal all day every day. And so that one's obviously Chromium under the hood, and I'm really happy to see new skins show up on top of A solid engine. I'm like, well, it's kind of unless we get to a single engine world, which Google is helping ensure it doesn't happen by paying other companies to keep their engines up to date, That would be what scares me as if, like, the engine really, is the only one. But maybe we would find ourselves in a new world that we'd actually like a lot better so that we have to Interop is out of our hair, and we're now into sort of, like, integrating with all these kind of cool unique browser features that users are trying new browsers for new reasons,

and that could cause a new evolution of just how we browse the web. I don't know. Yeah. And that's also a good point because if you look at Arc, they're not worried about the engine.

They're adding

User facing features at a an astounding clip and to the point where, like, they were able to do things that the other browsers aren't able to do because that's all they're worried about. All they're worried about is adding cool little what if we did this? Oh, okay. Let's just ship it really quick. And that's what makes Arc such a delight to use. Right? Yep. Surprise and delight, they've got it all over that app. It's great. How much time do we have? I feel like we should do a speed round for a second here. Yeah. Let's let's do a speed round. Alright. So we got HAZ. That one's pretty stable. It's in it's it's not in Firefox stable yet, but they, they've gotta be close. They've been hacking on that, so get ready to have HAZ everywhere. And that one is Massively superpower.

It's like every pseudo state that's in the entire CSS thing just became a hook for you From CSS to make anything else on the page change, it is super rad. We have nth child here with the of syntax, and this one is like a I've always wanted this sort of feature for a long time. Like, I've got a list of, homepage cards, and it's like some of them are featured, some of them Our, you know, music playlist, they all have, like, a different category, and I wanted to find the third one of a category, and I wanted to use nth child syntax for it. So you'd be like, okay. Well, dot featured Enter child 3, and then it'd be like the 3rd element in the DOM would get selected, and you're like, hey. That's not what I asked for.

And so this syntax allows you to say of this category. So you could say the nth child three of dot featured, and now it would reduce the list down to the featured ones and then apply the nth Child selector, and that's pretty neat. I didn't know I needed that. I would've done that with JavaScript. Yeah. That's awesome. Oh, yeah. I I often find myself I'm like, I wanna select these things. And then given what I found, I wanna find the 3rd one within my selection, and that does not exist until Now that's nice. Until now. Yeah. That one's awesome. Cascade layers, I've been really liking these. They feel really daunting at first, And they kind of have a a big impact in your architectural decisions, so it's a good place to start. But there are some rad features about them. Like, here's a good use case I had just yesterday with cascade layers. I'm making a new astro project.

It's gonna be like a new slide framework thing that uses these page transitions, and it's super cool. Already I should show you a demo. Like, every pay Every page click is goes to a new page, and I've got clip path animations.

I've got fade ins, slides in. I can do anything I want, across pages with this new API. Anyway, it was, really exciting. But with cascade layers, I imported a reset and a bunch of other files, And I put the reset into its own layer called, like, design dot reset. And then later in my style sheet after I've done all these other imports and all these dependencies come in, I can Target that reset layer and supply a couple overrides, so I don't have to meticulously order my my styles here. I can just Hook into that layer from anywhere at any time later in the application and provide a little override, and so it just takes this weight of Having a a very linear index dot CSS file that you're meticulously managing the override powers of all these things in the cascade, It gives you buckets. You're like, no. Here's my 3 buckets of all my styles, and later I'll tuck 1 into that bucket, and I'll put 1 into that bucket, and it just becomes a really smooth way to section out styles and create overrides and variants. So if you wanna do, like, card variants or variants on custom properties, It's got a lot of cool features right there, but,

yeah, cascade layers. Love that. Oh, can I can I ask about, CSS nesting? We did a whole Joe on CSS Nesting, and people are overwhelmingly happy about the spec, except when you nest an Element selector, you have to put the ampersand in front of it, and it always gets me. And you said they they've been thinking about or how to get around that.

Where's that at right now? Yeah. So there was a a lot of discussion about that in the CSS working group. A couple of the engineers on the Browser were like, I don't know. We're looking to have to do some experiments. We're not really sure if we can do it or not. And then, you know, just like classic this has happened, I'm sure, in your agency or consultancy life. You're like, gonna be really hard. Hold on. Let's go research, and then you go home and you're like, oh, crap. I solved it in, like, 5 minutes.

And that's kinda what happened with these engineers is they They were like, okay. Let's let's make a couple attempts at experimenting with this, and they found that, when it sees that and and then it finds a div, for example, The parser is gonna be like, I don't know what to do. There's invalid syntax here. And so what they did was they go, okay. Well, it crashed at the div after the end. How about we just restart it? And then they just restart the parser, and the parser goes, oh, look a div, and it, like, continues reading and just finishes the work, And they're like, oh, snap. We solved it by turning it on again. It's kinda like when you kick you kick your GitHub action. You know, you're like, just try it again.

And so now you're gonna be able to nest

a a div or an input and all these, like, elements without the requirement of and because they they've They found out how to do it in the parser. So And what what was the initial issue of why they couldn't do that? Because sometimes people look at the syntax, and they're like, like, why can't they just Like, this is an awful syntax. Of course. Like Yeah. There's always, like, so much more behind it that people don't see. So what was the problem with not being able to nest a Straight up HML selector inside? It needed a sigil. It needed some sort of symbol to delineate that it wasn't just a custom element or just, like, It was ambiguous. Selecting. Yeah. They needed something to disambiguate the

parsing. They they just kind of dragged their feet not knowing how to solve it, and then a a solution was Presented by the engineers, which was really nice. Amazing. I wonder why it is that SAS could do that then. You know? Why could SAS They, I think, have just taken upon themselves a lot of Baggage from that choice. I think that was the other reason that they were trying to avoid it is that, Tab, who was one of the main spec editors, worked a lot with SAS, Knew a lot of the SaaS sort of, like, complexities underneath the hood of sort of like the weight that they've been maintaining all this year, and, they were just like, let's try to avoid that baggage and ended up finding a clever way around it. So, you know Cool. You will still need to use and, though, when you, like, nest to hover because if you just do, like, div Mhmm. And then colon hover, it'll add a space there. And so you're gonna have to do and colon hover so that it knows you're not doing a descendant selector, that You're literally attaching that hover to the context that you're nesting in. I think that's how Sass works too. Yeah. That that's how I write Sass too. Yeah. But that's that's kinda what I would like to to write. So I'm so happy with all the

the hardest part of CSS nesting is figuring out

what the post CSS config is. Every time I install it, I'm just like, wait, What is this all again? Post CSS nesting and post CSS nested, and you're like, oh, please don't do this to me, everybody.

Yeah. 1. I always forget what the post CSS Config file name is called because there's, like, 11 different options, and I'm getting better at it. Common JS? Is it in ES? You're like, oh, dude. I hate all this stuff. Yeah. Oh, so okay. So

Animate discrete properties. Is this this is like animating display none? Yes. When you animate display none, what happens? Does everything just, like,

Just blow up? Like, that's wild to me. So glad you asked because this one I feel is is named a little tricky. It's like, you can animate, display none. What's it gonna What does that even mean? Yeah. What what is how does that yeah. Well, like, it's not an so what it should be called is, you're basically just delaying the flip.

Right. So if you right now, if you try to do an animation that, like, goes to display none or display block or something, you you can't really time it with other animations. You can't make it flip to display None after a fade out unless you have key frames that go to 99% and then 100% is a display none or whatever. You have to really hand hold it. And what this allows you to do is specify, I want to flip to display none after 0.3 seconds. So I'm gonna have a 0.3 second fade out, And at the end of 0.3 seconds, you're gonna flip the bit on this display, and that way you have the opportunity to so the the way that this would work is then you say From JavaScript, like, let's say you're closing a dialogue or something, you can just set display none on it, or set, you know, a class on it that's gonna eventually set display none on it. And what it'll do is it'll fade out first And wait for that delay that you placed, and then flip your discreet animation to display none. And so it's sort of like a deferred Bit flip as opposed to you're not interpellating between none and block. You know? Like, that doesn't make sense. What would it do? Just add a b and l, I don't know. I wanna see a k over time. I don't even know what it would do. Yeah. And so instead, you're just delaying this discreet flip. Yeah. The name of this episode, an alternate title, should just be Stuff that we used to do in JavaScript because that's really what a lot of this stuff is. And then that's great. We'll have to ship less code to do the same stuff. What's up But this linear function, I see linear as a function. What is that? Yeah. So that one's in Firefox. It's in Chrome right now. There's a tool that's gonna be coming out from somebody that you know, over the next couple weeks. I'm not gonna announce it for them. I'm gonna let them do it. It's gonna be great. Linear is an opportunity for a case. We have, like, easing curves.

And linear is a way for you to describe a very complex, ease function that is, for lack of a better word, linear between all the points, but it allows you to specify multiple points.

And the idea is is by specifying many points, you can create a really robust, like, bounce or a spring effect by using these really discrete linear transitions over time. And so this is what the tools can help you visual visualize. You can imagine, like, a bounce curve.

I'm doing the gesture with my hand. It's not very helpful for everyone else on there, but, like, you can imagine a bounce curve that's, like, overarching and coming back in and then eventually settles.

You can describe that with the linear function. You can specify many points in it, and then just use that as the easing function in an animation, and it will go And do the whole balance as you described. So it's not a it's not a like, a physics tool. It's more like, by By having multiple opportunities to create multiple moments in the easing, you can simulate a robust, bounce or or Spring effect. Yeah. All in CSS. Yeah. Interesting.

Yeah. Essentially, there's gonna be a custom property that you're gonna use.

It you're not gonna write it right. Write those. Yeah. You're not gonna write these. You're just gonna be, like, alright, I want it, like, open props is definitely gonna have these. It would be, like, spring 1, spring 2, spring 3. They're, like, different amounts of spring, And you'll just apply them as you're easing,

and you'll go that'll be it. Yeah. Yeah. Reminds me of After Effects. It's a lot like After Effects. Yep. We also have the media query range syntax, which this is a personal favorite of mine Yeah. Replacing the, the hard to decipher media query syntax that we have been used to, but, you know, I've never been a huge fan of it with greater than or equals, signs to be able to say if the width And the width or height, those are keywords. Right? Yeah. What kind of keywords

can be placed in there? I think it's just those 2.

Just those 2? Cool. Yeah. Yeah. I don't know what else you would use there. But Maybe inline and block, but I don't think they added those. Oh, yeah. Yeah.

Interesting.

Let's talk about subgrid everywhere. What's up with subgrid everywhere? Yeah. So I wrote everywhere because Chrome's last on this one.

We've been getting assistance from Microsoft on this. They they took a couple breaks, but they're, really on fire again recently about Gonna be releasing this soon. They're at the final tail end of it, and we'll have subgrid everywhere. So those will be across because it's in Firefox. It's in Safari.

The only caveat is that, our engineers have have said that they fully did the subgrid spec, And they wrote a whole bunch more tests to make sure that they built a good implementation, and all of those tests have invalidated some of Firefox's and Safari's Quality or interop or whatever.

So they raised the water by adding a bunch of tests, but it's also gonna make more work on Safari and Firefox To to finish their sub because, right, Firefox has had subgrid for, like, 4 years or something or longer, and so we'll we'll all get to that same high tide here soon. But, Yep. So good. It's coming out wild

because there's too many things.

Adam brought us to a a list that is, like, impossible to get through because there's too many great things. So Scroll end is a new JavaScript function.

It's a I don't know if you've ever written your own, but you had to write a time out that was being continually it was really annoying to write, and it was always late. It was a delayed scroll end, and so now you have an actual scroll end event, and it fires right in time, and it's just what you need. There's also scroll start. That just got announced as being prototyped by Chrome the other day. Scroll start is, if you've ever every time you load a Spotify playlist or you load, like, iTunes Can you see the playlist header and you got all your tracks underneath there? And then you're like, oh, wait. I wanna search. And so you scroll back up and you're like, hey. They Started my scroll down a little bit, and they were hiding a scroll bar at the top. That's kinda neat. And so that meant that scroll started about 50 pixels down. It didn't start at 0. You also have carousels that don't start at the 1st item. They start in the middle. And so scroll start is away from CSS to say, I would like, when this layout renders, As long as, you know, nothing else has interrupted scroll, start the scroll position at this element or start the scroll position at this length at, like, a 100 pixels.

And so then on the 1st pass, you don't have to have JavaScript because what usually we do now is JavaScript shows up late to the party. It's like, hey. I'm here. And they're all like, dude. Layout's done. We're the house is painted, and he's like, yeah. But I want this to start here. And you're like, dude, you're moving the couch, and we should've you should've just been here when the party was going on. So, anyway, scroll start is getting CSS into that party so that the scroll position can be set on initial layout, and it's not this, like, delayed jinky moment. I I have a question about the Right. Media query range syntax as well is will we be able to use variables in this syntax as well, or can we? No. I am No. Not yet.

Yep. Is that something that will ever be available? Like, I want to target, like, maybe I have, like, a medium A media query that's like a medium device. You know? I stick that value in a in a CSS variable.

Is that ever gonna be doable?

Maybe I oh, and, you know, like, Scott is in on the custom media, which is a spec, and and that's sort of like instead of you having variables in the custom, In the media query, you just make the whole custom or you make the whole media query a custom property Oh, yeah. And then you reference it in entirety.

I'm not sure if we'll get something like that because it I I think they're just worried about thrashing and things changing and causing lots of cyclical loose and stuff. So And I gotta tell you, Wes, You know what I've done in my code base? Oh, I'll have to I'll have to lay in on it sometime. Is, e and v variables for this.

Right here, the range syntax. So get this. I have my me I have my breakpoint set as ENV variables. I use the ENV variables as Media query variables or whatever you just described them as using the range syntax, and then they use those for my actual media queries.

Life is good. Life is good. Life is comfortable. We did a show on those. I can't believe I I forgot about that. But yeah. So that's that's a solution if you wanna be able to Stick them in one place. What, like, what other use cases are for e and v variables? Do you have any other? Well, there's like so, yeah, there's e and v with post c Post CSS, which will kind of like just it does a replace. It's like a reg actual place. But there's also we have the EMV variables for inset, like on Ios and stuff. A lot of the initial use cases for environment variables were supposed to be the browser saying, hey. I've got a status bar, and it's this big. Hey. I've got, You know, things that are really hard for you to decipher or values that are difficult for you to know that come in dynamically from the browser window.

But those have sort of died off. I'm not really sure what's happened with a lot of those, but I thought we would get more of them at some point. Like, I'd love to know how big the scroll bar is. You know, like, on Windows, it's 18 pixels wide or whatever. And on Ios, it's, you know, really thin, and so it's, like, it'd be nice to know the size of that. Give it to me in an environment variable, but, well, let's talk about animation composition.

Let's do it. So this one's like I imagine you've got a a circle on the screen and you click it and it shrinks, so you scale it down on click. But let's say also when you hover oh, crap. I'm gonna have to figure out this demo. I'm trying to make a metaphor here. Anyway, the idea is that you can combine 2 different key frame animations Together so they're like, oh, here's the idea. I I remembered. Okay. So imagine that circle is pulsing in the screen almost like it's breathing.

Right? But when you hover, you wanna interrupt that breathing animation and scale it up so that it becomes really large. But what's But it continues to breathe or stops breathing? To breathe. Yeah. That's precisely it. And it's not that it it does continue to breathe or you can make it stop breathing, but it's that when you interrupt it, it's from where it currently is in those key frames To someone new. So it's a lot like what we would get with transitions. Right? Transitions are very interruptible. It's really nice. You hover on something, you let go. Hover again, you let go, and it just, like, He's really good at knowing that information.

With key frames, usually one would interrupt and overwrite the other. With composition add, You're avail you're, you give the browser an opportunity to sort of merge them together and do something smart about interrupting it with key frames. So it's kind of bringing of the powers you had with transforms and transitions well, not transforms, transitions to,

key frame animations. Allowing them to be, really, You can build micro animations and combine them, compose them into being, all sorts of more usable things. Again, reminds me totally of After Effects, which, I I come from an after effects world, so all this stuff has me salivating.

Used to be able to, like, really you'd compose Compose, compose, and after effects, and that's, like, one of the key techniques to building really good animation. So

Yowza. Yowza. Oh, man. That's neat. I did not know about that. It's really cool. I have a demo somewhere I could share it with you, but also in terms of because I'm an after effects head too, dude. I did So much of it in college.

Also because I did a ton of flash, and then I was like, oh, next level. I can go to after effect. Motion blur is a proposal I made a couple years ago, And it might be getting attention again soon, but that would be nice to just be like, okay. In the motion on this, have some blur. You know? Browser figured out based on the speed it's going. Blur it a little bit. That would be cool because you always click that button in After Effects. What's that, recut? Or no. What was that? There was a React library for doing animation

remotion, And their solution to motion blur works, but it was like to duplicate the element a whole bunch, blur it, which it looked it looks fine, but, like, Man, I bet that I bet that would make them really happy if you just have, like, a CSS property. Did that work on the shader instead of in JS or yeah. For sure.

So we did a show on, the Open UI elements. A couple actually, I don't even think it's out at the time of recording, but We are talking about like, oh, it sucks that so many of these inputs and drop downs and whatnot are so limited in how we can style them. And we often have to resort to, like, hacks just to make them work, and then you have to deal with accessibility of that. So you have a select menu.

HTML element might be coming down the pipe? Yes. So that's you can try it out in Chrome right now. They're undergoing tons and tons of, like, spec iteration right now trying to figure out the best way to do it. In fact, if you all have opinions about slots, they're in a current, conversation. They're They're worried because they're gonna introduce slots for the 1st time in an element where you'd say, like, this, slot equals Button slot equals, the the list of, options in a select menu.

And they're like, do we wanna expose, You know, slots to people will be the 1st time, and they're kinda worried it's gonna blow people's minds, even though it's been a platform primitive for a long time. But, yeah, select menu. That's gonna come with all of the accessibility that you'd expect, the keyboard, interactions that you'd expect, but the ability for you to kind of Swap in your own elements to have the role of the list box, to have the role of the button that invokes the pop up, and then, And then, yeah, have full control over the appearance of those options, have full control over the selected state of those options.

It's really cool stuff.

Right before the show, Scott and I were talking about this idea of a headless UI Where you often have, like, a react component that gives you all the functionality, all the event listeners, all of the current active class application, but doesn't give you any of the HTML. You bring your own HTML, and then you just put the props and everything inside of that.

So that seems like it's kind of similar is we'll be able to bring our own for these drop downs? Yes. Wow.

That's sweet.

That's cool. Oh, it's like that. Handing it's like handing you all the primitives that you need to go build the components, that you want them to look and behave for your brand.

So it's a nice little meld there. Love it. Slot. And I didn't realize slots were coming as well, so this is the first time Well, slots are in web components, Wes. Yes. Yeah. But, like, we It hasn't been straight up

in in H9 outages yet. Right? Like, a lot of people are used to using them in, like, a framework. Totally. Yeah. Yeah. You've got, like, the select element with the option elements. Sort of like a light DOM slot mechanism, and this would be a much stronger

well, it's also shadow DOM is gonna be in this one too, so yep. Sick. Cool. Well, we're we're hitting the time limit even though it feels like we we have so many more things to talk about.

Do you want to get into your sick Picks today,

things that you think are sick. Oh, you know I do. And it's summertime. I'm feeling the breeze on my hairy legs. Oh, sorry. That's probably a visual no one wants Steve, I'm riding the Onewheel right now. I'm back on the wheel. If you haven't ridden 1 before, if you like to feel a fresh powder and wind in your you know, the hair on your Top of your head, grab a Onewheel. It's no tickets required when you go to the lift. You know? You just get to find a park and ride it wherever you want. It turns your entire environment into a rideable space. It's the most superhuman I've ever felt. Check out a Onewheel. It is super rad. Did you have a, like, a learning experience with them? I saw some people like Adam Savage said that, like, he fell off of his whole bunch when he was first learning. Did you did you have, like, a little bit of a a tussle when you were first learning? I didn't have any Biffs in the 1st couple days, but I did have, you know, it was like a little shaky for me, which is annoying because there's, like, other people I've given. They're like, hey. Let me try it, and they hop on it, and they just, like, cruise around. I'm like, dude, that's rude. It took me a lot more time to get good at that than you, you little punk, but what you do is you just get on it and go down the road. Just go go down the road. After half a mile, you'll be like, oh, I totally get it. It's when you try to stick in your driveway and go real slow, or if you're, like, in the hallway of, like, a college or something like that, and you're trying to be really gentle and it's just gonna you're It's not fun. You gotta take it somewhere, go over some grass, and just feel the the vibe of it. It has a you have to have a relationship with it. It talks through your feet, and so you gotta Mhmm. Be with it. It's kinda cold. It's like a mountain where you gotta lean with the mountain. If you lean against the mountain, you're gonna struggle the whole snowboard, And so you gotta trust the board, and the board will do a lot of work for you. And that's kinda why it feels like you're floating is it's it's got all this intelligence baked in. Yeah. Sick. I remember the, like, US government was trying to make them, like, recall every single one wheel.

And everybody said, no. Like, just, Like, learn to ride it, I guess. Or like good. Yeah. A good loser. Yeah. It was, like, ironic too because, like, they yeah. They've sold so many of them, and, it's had, like, the least amount of injuries and deaths Compared to, like, all these other electric vehicles, but they were they were coming out of it hard. And I think it's because one wheel as a company is making money, and they're like, oh, look. A Target It's, selling well. We should but, yeah, I it's the it's the safest EV I've ever been on. In in for for some context, it's Really dreamy. It's like riding an iPhone electric skateboard.

That's awesome.

That's sweet. I I wanna get one. What about Shameless plugs, things that you would like to plug. We have filled

this document with links to blog posts and stuff. But what what what would you like? Oh, I'm I'm so glad you all Brought up gradient dot style. Definitely go check that out and try to make a new beautiful gradient. Google IO is coming out. I'll have a talk there and all of my team, and there's gonna be all The CSS stuff is gonna be on there, so check out Google IO. And my website, nerdy.dev, I got an RSS feed. It looks like Twitter. It's sort of like my own indie social network. Maybe I'll stop Start pulling in my app protocol content, you know, in my own site. We'll see.

A little blue sky reference there. You can find me on blue sky at nerdy.dev,

And another shameless plug. I'm on Twitter at Argyle inc. Perfect. Well, thanks so much, Adam. It's been a a pleasure as always. This is fantastic. My mind is thoroughly blown once again, so thank you so much. Course. Happy to be here. Alright. Thanks again. Peace.

Head

on over to syntax.fm for a full archive of all of our shows.

And don't forget to subscribe in your podcast player or drop a review if you like this show.