Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Nerding out about CSS with Adam Argyle
0 Plays2 seconds ago
CSS Wrapped 2024: https://chrome.dev/css-wrapped-2024/
Adam's carousel gallery (requires Chrome Canary): https://css-carousel-gallery.netlify.app/
Adam's website: https://nerdy.dev/
Follow Adam on Bluesky: https://bsky.app/profile/nerdy.dev
In this engaging conversation, Kevin and Adam Argyle delve into the exciting new features of CSS for 2024, discussing innovations such as scroll-driven animations, anchor positioning, and field sizing. They explore the challenges developers face with browser changes and the importance of a stable developer experience. The discussion also touches on the future of CSS, upcoming features, and the complexities of browser support and adoption. Adam shares insights from his work with the Chrome DevRel team, emphasizing the need for thoughtful implementation and user-focused design in web development.
Recommended
Transcript
Introduction to Journal Musings
00:00:00
Speaker
Hello, my friend and friends, and welcome to my podcast, Journal Musings. My name is Kevin, and in this podcast, I generally talk about whatever is front of mind for me in any given week, usually in some way that's related to front-end development.
Conversation with Adam Argyle on CSS 2024
00:00:12
Speaker
But this week is a little bit different because I've got a really fun conversation that I had with Adam Argyle that I'm going to be sharing with you. During this conversation, first of all, we recorded it pre-holiday season when I wasn't fighting a cold, so my voice will sound a little bit better once we jump into the content itself.
Exploring Adam's Favorite CSS Features
00:00:27
Speaker
But during it, we talk about first of all, Adam's favorite new CSS features from 2024 that sort of evolves into just a discussion about a a lot of really cool things that have landed over time. and Then we sort of move into more pain points and issues where Adam actually shares some of the things and problems he's been having with anchor positioning.
00:00:45
Speaker
and just how there's first of all a lot like an insane amount of new stuff that is happening and there's actually a whole bunch now that might be out actually by the time this podcast lands because he was talking about early January for the next big thing in Chrome where there was a ton of new CSS things coming and how you know it was exciting and talk a little bit about that but then also about how browsers have changed a little bit with how they're shipping features and how that can actually cause some problems like some you know there's sometimes the features now shipping and then it's changing even though it's considered like this is what it will be and then it's like oh look we've changed the syntax ah so we talked about a bit of the pain of that as well
00:01:23
Speaker
and why that happens and everything and that actually leads us into part of a bigger discussion into the type of work that Adam's doing with the Chrome DevRel team along with Brahmas and Yuna and there's a whole bunch
CSS Features in Chrome and Browser Strategies
00:01:34
Speaker
of other stuff too. It was a really really fun conversation that I had with him. I will give you a very quick word of warning before we dive into it that if you're listening to this on a pod catcher and not watching on YouTube There is one bit where I'm actually opening up the browser as Adam talks about carousel things, and he does a really good job of explaining what he's talking about. and If you can't see it, I really don't think it's going to impact anything, but he might be like, oh yeah, and you can see that there or something like that. So just so you know, that will happen for a little bit, but it's just a very small bit of our
Deep Dive into CSS 2024 Features
00:02:01
Speaker
conversation. And I'll put links to everything that we're talking about in the show notes. So if you want to check them out as we're going through it or afterwards, that option is there.
00:02:09
Speaker
And with that way too long of an introduction out of the way, let's dive into it. where ah We're going to drive right in where I've brought up the CSS wrapped 2024 page that has a list of all the new features that Chrome added. and We'll use that to help inspire and kick off our discussion about all the new features that have landed in 2024.
00:02:26
Speaker
And of everyone, I know you're one of the people that gets very excited by all the new CSS stuff coming. And there was a lot of really good stuff in here that there were 17 features. ah If you were going to call out like your favorite ones that were but came out this year, is there any that for you really were like, yes, that's like this changes the game. or And this could be like, this changes the game for everybody. Or this is just something I'm going to use all the time, even if nobody else cares. like It was really exciting for me.
00:02:54
Speaker
Oh, I'm definitely a good person for this guy. I mean, you can see it just on my own website, you know nerdy dot.dev, where I've got view transitions and scroll-driven animations, and they're progressively enhanced. So if you come from a browser that those aren't there, it's no big deal. um So I find myself using a lot of this stuff right away. There are certain features that were less exciting than others, but Okay, so in terms of what ah what what of the 17 features are the best?
Quirky CSS Behaviors and New Usage Patterns
00:03:18
Speaker
It's so hard to prioritize them, but I mean, scroll-driven animations, um i love I love them so much. I use them all the time, and they go really well with ScrollSnap, so you know I'm a ScrollSnap connoisseur, um and so now I love that I've got scroll-driven animations that can sort of bring life into the interaction. The ScrollSnap events, even though that's JavaScript, um those have been really handy. And then view transitions.
00:03:41
Speaker
I use those all the time, too. You get quick, really nice-looking animations for like demos and stuff with just wrapping a simple DOM modification with a function, and all of a sudden you get these pseudos. It's really cool stuff. um For DX, i mean is nesting ah some of the updates to nesting are in there, so it took out some of the hardship. The light-dark function, I use the crap out of when I'm playing around these days.
00:04:05
Speaker
um I love that one. Oh, yeah. So smooth, so quick. But I also like color scheme, you know, so it's like ah um I'm tied into that world. um Paint order seems to be resonating with a lot of people, which is funny. um I mean, it looks good. You definitely want the second version of of yeah because the first one looks so broken. Yeah. But yeah we've lived so long without it, so it's like, whatever. I don't know. Yeah, I think it's one of those things that people didn't use a lot of stroke on text anyway so the paint order never really came in but now maybe we'll see it more because we can fix it we'll see what happens I remember the first time happens I mean ages ago when the first time I did something for a stroke on text and it was just you know you could even see some of the characters the way it like
00:04:55
Speaker
You know, I don't can't say it was the R like part of the R was like completely disconnected like the leg on it or whatever had like a stroke Around just the leg or like
Public Interest and Unexpected CSS Features
00:05:04
Speaker
or something. You're just like what's going on? I don't understand how this font was created and so um Yeah, I think I find it interesting with a few of them just because like, when I was looking through the list, I was like, some of these are things that I think, like, obviously, with scroll different animations, like, it's so easy to just be like, look at this, it looks amazing. And like, it's so cool. and It's opening up.
00:05:29
Speaker
um Whereas obviously things like say, at property, like we've had it for a bit now, but it's finally get you know across and in the in the different browsers, but like it's not fancy. It doesn't change something immediately, but it just opens up like, oh, we can do all these other things now that we couldn't do before. And it ends up becoming useful, but ah yeah, so it's it's interesting. And i'm I'm always curious to see which one's actually like in the public.
Backdrop Inheritance and Anchor Positioning
00:05:54
Speaker
gain the attention compared to the the the regular ones um because sometimes I think it's the ones we don't expect sometimes that people sort of start using day to day that you're like oh that's the one that you ended up becoming well known okay cool yep happens all the time we're like oh you're gonna go with that that's cool um but I gotta take it and run we're like glad you found a ah part of this thing to be excited about Yeah. Uh, I know that some aren't as exciting though, like backdrop inheritance. You're like, ew, uh, that's the thing we got. You gave that to me. What did you even give me? You're like, well, really I'm making it so that when you do set something, you don't have to go. Anyway, just don't worry about it. This one's just, just don't even worry about it. It's a fix. Yeah.
00:06:41
Speaker
I know for me anchor positioning is one of the ones I think is going to take off just because it's such a pain point for people good. Yeah. Yeah. Although it's tricky as hell. I was okay. I've been, I've been an anchor in carousel land for like a couple of weeks and anchoring. is I do, do love anchoring, but I'm also frustrated more at anchoring than I ever have been with almost any CSS. And before anchoring, my hardest one to get ahold of was view timelines. So. Scroll driven animations had not, they did not click easily for me. They took me, I wrote multiple articles, multiple demos, and still ah sometimes it'll get me. But anchoring is a little different um because it has the IMCB, the immediate initial, the immediate containing block or whatever.
00:07:28
Speaker
and which is invisible. You can't see it. It's totally there ah but nothing is good at telling you what it is and it can collapse on you just like when you put containment on a container all of a sudden it doesn't have any height and width anymore um and then you don't know why. you Also the centering keywords can get you into scenarios that you don't. It is littered with complex edge cases, but it's also so easy at first, you're just like a couple of properties and you got yourself a beautifully positioned thing. um So it's just classic CSS, easy to get started, impossible to master, wildly capable, ah but with numerous foot guns. Yes, anchor is amazing. and Yeah, and I do think it's going to be one of those, um ah yeah, Because i somebody brought me into a thread on Blue Sky, I think, where they were saying, how come it's not working with Flexbox? And so I was like, oh, I'm curious, because maybe it doesn't. And it it had nothing to do with Flexbox. It was just the way they'd organized it. And they they were using a position relative somewhere, and I think
00:08:34
Speaker
whatever it was, I'm like, Oh, you just need to do this instead. And then it works. And they're like, Oh, okay. That like, and because we've been so trained with positioning up until now, like there's habits to break and different ways that it's working. So it depends if you're using anchoring or not using anchoring, how these things are
CSS Demos and Innovations
00:08:50
Speaker
related to one another. And yeah, it's going to be, there's going to be some articles written where people are upset.
00:08:56
Speaker
the The thing isn't working I think yeah, oh the but the amount of the bugs that people are going to pour is crazy I so like one thing with anchor positioning that caught me off-guard the other day and literally I'm like literally every day something catches me wildly off-guard with anchoring but this one was I Thought I could be done with position relative. I was like, oh, I don't need relative anymore I just anchor stuff to the things and I had a bug where I Had a scroll as a carousel scroll or where there's like a little um a watch check mark Actually, you want to go to the demo. Do you have canary? I want to see anything fancy yeah okay ah so if you scroll to the left a little bit back towards season one or even just click season one
00:09:36
Speaker
Yeah. So seeing the top right, each of those boxes, there's a little check mark yeah yeah to indicate that they've been watched by you. Uh, those are all anchored there. And I was like, cool. I'll just anchor those into the corner. So obviously check mark is a child of that card. And, um, since it's a horizontal scroller and those things are anchored, I was getting all this horizontal overflow on the page. And I was like, where did all this overflow come from? And it turns out all the little anchored.
00:09:59
Speaker
things when they scrolled off screen were still like demanding space from something. And so I had to go put position relative on the card to contain the anchored elements, wild bounds that it was building. really step big Yeah, that's weird.
00:10:17
Speaker
that someone was just asking me something about something where they were getting and like they didn't mention they were using anchoring but they were getting like extra space overflow from something I'm like it doesn't make any sense so every one of those was creating is it because they were living in the grid and so it was making extra It wasn't making columns. It was then using more like... Yeah, it was like ah they were unbounded. It was like they were unfettered, anchored elements inside a scroller and it was just... they're They're containing boxes that they needed to do this and were building up some sort of space and dimensions that then caused a bunch
CSS Carousels and Interactions Without JavaScript
00:10:54
Speaker
of...
00:10:54
Speaker
shenanigans and i was like here i am just thinking i'm going to instantly oh there's keywords for anchoring to the top right yeah i sure enough i anchored it there right away but it took me for art do anything else uh this demo is uh really fun though so those season titles are generated by css they don't have an html element also if you use the arrow keys they operate like ah arrows because they are a marker ah created for the first item in a series ah for each chapter so it's like each chapter is 10 episodes yeah the first one gets a class on it and then i generate markers for this scroller based on those classes
00:11:38
Speaker
ah And the browser says, okay, well then here's those elements and then I can anchor them to the top left. I can style them however I want. I can put content inside of those markers. Anyway, it's really cool stuff. How does the keyboard interaction work?
00:11:54
Speaker
They are so they're yeah so they're generated by the browser, and they emulate a radio group. um And here, click the any of the other demos on the left there. They'll have dots instead of titles. So that one kind of is acting like tabs. Here's one. OK, big old hero slider. I don't think this one has dots in it. So that one's just marker buttons. So also those buttons generated by the browser. Those buttons generated by the browser. And though that one instead of dots, I did squares because people like to do that.
00:12:23
Speaker
um ah So there's also scroll state animations there. So the scroll triggered when that element becomes snapped, it triggers through a CSS a scroll state query, which then triggers a staggered reveal of all the items inside the hub. So yeah, no JavaScript on this entire site, not, not a lick anywhere. And you'll see some pretty cool interactions. yeah Um, yeah, I'm gonna have to poke around in here a little bit.
00:12:48
Speaker
Well, good luck because dev tools, it does not really represent those since they're generated. They're very funky. And so the tip is if you do go looking, scroll to, so select the carousel and dev tools, scroll down to the very bottom of the styles pane where you'll see the pseudo elements. And there you can dink around with the style. Yes. Right. Yeah. Yeah. That's interesting. It's a little tricky. Yeah.
00:13:09
Speaker
but But yeah, I'm building this site out to kind of showcase that these new, so it's like basically three CSS features, um including anchoring and then including scroll state queries, but it's three carousel features that are going to allow me to build any carousel that I ever see accessibly.
00:13:25
Speaker
Um, and it's just, just CSS. It's kind of fun. Just got to know how to use scroll snap. It looks like you have a lot of ideas that haven't been built yet. I have a lot of ideas that haven't been built yet. I have quite a backlog. I think I just added the 3d one like last night. I was like, Oh, I can just add a view timeline. Oh, it's the first one where I did a view timeline in one of the care cells. Cause the other ones had been scroll triggered. This one's scroll linked. Um, and yeah, so yeah, it manages that there it is scroll.
00:13:54
Speaker
ah Again the scrolls triggered animations It's kind of like a cover flowy type effect and it's only a few lines of the styles That's a bug right there where the pagination isn't smoothly going there. Yeah, I think it's something I did with the 3d. It's making it nuts Oh here. Okay. Here's the most wild one go to the paged example Maybe it says pages or paged pages. Yes Okay. This one, the browser, since it's generating dots, it generates dots. So grab the resize handle on the bottom right and watch the dots change. Just does it on its own.
00:14:29
Speaker
So yeah I'm using CSS columns. That's not a grid layout. It's a columns layout. And for each column that gets made, I can target it and make it a scroll snap target. And each column can get a marker generated for it. So that's why we see dots made for the dynamic resizable amount of items that could fit in there per page. This is like wildly powerful. Um, and yeah, just, just CSS. That's really cool.
00:15:00
Speaker
Nice. So impressed. Yeah. that's a that's a cool That's a cool one. Carousel stuff is great. That's really awesome. Of course, people ask, do we need more carousels?
00:15:13
Speaker
Yeah, they keep saying that and then I went on netflix the other day and that was the only widget It was yeah three different types of carousels and i was like this entire experience is careels So people can whine about them all day and then they'll sit down on their couch and interact with them without even thinking I think it's different when you're on like if it's saying a quote-unquote app experience versus like a website where all of a sudden you have like I think when people think carousel, they think of the the hero carousel on some yeah like i put a marketing website. And not necessarily the other one. So like if you're on your TV or you're on your phone, especially with touch, like side scrolling is so normal.
00:15:54
Speaker
um yeah whereas you So i think yeah I think part of it's about the the name carousel gets a little bit of a Stigma to it when it's the and the way the person the the way the interactions actually happening isn't always that traditional thing or we're not necessarily you know hiding the content somewhere we're just It depends on what the content is and it's why is the person interacting with it and everything else that comes with it?
Practical Use Cases for CSS Field Sizing
00:16:20
Speaker
Yep. I think, yeah, we've got a bad taste in our mouths from those auto-playing humongous sliders that were at the top of web pages for a while. Yeah. Yeah. Um, since you're really good at coming up with cool use cases for things, I need to know what the use cases for field sizing.
00:16:35
Speaker
Oh, there's multiple. Okay, so um one of the main ones for me is the traditional select element. It was always the width of the widest element. And even with JavaScript, you couldn't accurately make it fit. Okay, the use case for me in that scenario is let's say you have a paragraph.
00:16:50
Speaker
The paragraph has a couple of interactive words in it, like a ah genre of movies. So you're like, I would like to see horror movies. And when it's where it says horror, wasn't a select element. And that select element, I wanted it to appear so I'd get rid of the borders and everything. So it fit right in. It's like a normal word in the sentence. But until field sizing, I couldn't shrink the width of that to the width of what was selected. And so it always created this obnoxious space when it's in line. um And so that's one really handy thing. And then And the other one is the text area, being able to auto-grow to whatever you're typing in it without any JavaScript is also really awesome. So that would be, yeah, so yeah. So the width grows and the height grows. And the height grows, right? Yeah. Yeah. So yeah, on GitHub, you know, that was like ah they had a whole JavaScript, ah complicated JavaScript set up to handle that in the comments area and they got to rip it out and replace it with one CSS property.
00:17:47
Speaker
It's pretty common these days, people ripping up ah chunks of JS for a little bit of CSS. Yes, it's becoming more common yet. Is there anything else in here that I wanted to specifically talk about?
00:18:00
Speaker
Because the field sizing one, yeah. I was looking at it at first, and I was like, but I do, especially with the selects, and i keep I kept seeing that as an option. I'm like, but why would I want it to fit the text inside? But what you said makes a lot of sense, so. Yeah, it can it's also like when you have a really long option in there that's next to short ones, that it gets also really obnoxious. um Oh, even on my website, nerdy dot.dev and mobile, in the top left, I have a dropdown menu.
00:18:29
Speaker
And that's to, so where you had like blog and notes, these filters, those turn into a select element in the mobile menu. And that select element, I need it to fit in the nav and look pretty. There you go. I want the arrow to sit to the right of the word. Simple enough, right? No, not if not without field sizing. Without field sizing, I have to guesstimate how many characters, and it's always wrong, which means either the word is cut off and the arrow is sitting there or the arrow is really far away.
00:18:55
Speaker
but Field sizing the arrows always perfectly sat next to the word.
New CSS Enhancements and Navigation Elements
00:18:58
Speaker
Yeah, that's a good example um The ah the other thing too about the side nav there it's using Interplate size. Oh, not this ah not on dirty dev put on the CSS wrapped one Yep, that expando collapse. ah So that's dogfooding all sorts of stuff. So not a not only is there school driven animations ah highlighting them and It's using interpolate size so that way you can animate open and close. That's why you see it. yep Yeah, because that's just a summary details And then it's also using starting style. It's also using the new details content pseudo element And so it's like a lot of those first few things in that list are being used on the page You're on in a progressively enhancing way Which is kind of cool
00:19:42
Speaker
Yeah, it is the, yeah, the styleable details and the exclusive Korean. That's why only one is open at a time. Yeah. And that's such a, like when, when that got added, it was like, Oh, that's, that was easy. There's nothing, you know, for those people, for anyone who doesn't know, you just give them all the same. You have the details, give them all the same name and then only one of them will be open at a time. So it's yeah. Yeah. Um,
00:20:12
Speaker
um Actually, I also wanted to ask how you decided to, um, Nate, like components made sense for the ones that are in developer experience. I was surprised that the popover API was in here. I guess it's something that doesn't directly yeah impact the user. It's more about how we develop that thing. Um, but like, or like, I guess like, I was just like, Oh, I'm surprised the popover and the the starting style weren't thrown in interaction. Not that it's a big deal, but I was just curious if you had any insights.
00:20:43
Speaker
ah I have some so a lot of those groupings were done by me um And they were different groupings to begin with and as we kept building the site I kept changing them We also ripped out by the way like seven features that didn't get added um Because they're gonna they didn't make it in 2024. They're gonna make it in January 1 of 2025 Which which by the way 2025 January is Expect like a one of the biggest drops of CSS stuff in a while. So Do we have any excited for that?
00:21:12
Speaker
Yeah, the select element, customizable select is dropping, the carousel work is dropping, text box trim is dropping. And I think there's one more, um ah maybe advanced attribute. You know how you could right now you can't ah take a data attribute and concatenate it with something else in CSS? Soon you'll be able to.
00:21:36
Speaker
um So yeah, January is going to be pretty hot. Cool. Yeah. But speaking of things that like will probably sort of go under the radar, but end up getting wide use. I think that the text box trim stuff is going to just be like part of the normal. We'll use that all the time without thinking about it too much.
00:21:55
Speaker
Yeah, it's just such a quality of life. Like, oh, I can just fix all of these alignment issues that I've been suffering. Seriously, all my buttons, all my tags. There's so many different use cases that are really nice. Just yeah magic numbering the different padding top and bottom on a button. be History. Yeah, I can't wait till that's history. People are like, why did you do two REM, one REM? And you're like, well, I'm back in my day. um But to answer the question, I think developer experiences ended up being kind of a catch all.
00:22:21
Speaker
um And it was just like, if it wasn't user facing, like a user doesn't know if it's a pop over or not. Like they don't, they don't really care. um So that that was kind of the reasoning there.
Evolving CSS Nesting Practices
00:22:32
Speaker
It's like, this is more for developers. It's easier for us to put things there. We now have a space for these overlay experiences. It's just like, it's easier on developers. Users will get things like accessibility out of it. And there's lots of great games for users in it too, but users aren't asking for popovers. Would you add a popover in this? They might say like, add an animation to this, ah you know, component or whatever, but yeah. Yeah.
00:22:57
Speaker
Yeah. And funny since, uh, we're on the developer experience when actually with the, the changes to nesting that were made. So if people don't know it was, so when nesting first came out or the, and okay, I'll ask cause I remember any at.
00:23:15
Speaker
rules were her hoisted or reverse. This is the other way around. Any normal rules would go up above. Any nesting. yeah Any nesting. So if you had any at rules in there, you're, even if it wasn't like a media query in the middle, the rule underneath it would end up, no, the rule in the media query would win because it would get put down at the bottom.
00:23:39
Speaker
Right. The order of things would change. of things would change from appearance. And so, yeah, if you were, if you were counting on the fact that it, it I wrote it after the media query, it should be this. Yeah, that wouldn't, that wouldn't be true, um but it wouldn't be true. And it is now was, was it originally done the other way for technical reasons? And then it's just, there was a solution that came up or was it a decision that was made that then got, you know, people were like, this isn't how we actually write CSS. We want you to change it.
00:24:08
Speaker
this was like really This was a really early um idea in the nesting syntax, talking with Tab about it. I'm pretty sure Tab just did what Sass did. um And also ah one of the technical limitations was the CSS om, and that's why this is called CSS om nested declarations, is all of the nesting has to get represented in um a tree or an an object.
00:24:29
Speaker
and um To have these sort of ephemeral nested groupings that like, if you think about it, right? You had some styles, then some nesting, and then some not nesting. It's just like, how are they going to represent that in an object? Um, and so essentially what they do is they wrap it in an and.
00:24:47
Speaker
That's the hot key. And so um once they just were like, well, we'll just do this on behalf of users. That way their visual order can make sense. It's kind of like when you write a nested app media query and then you don't specify what's your nesting again. It just sort of inherits with the and in there. You're just doing the same thing there.
00:25:04
Speaker
It was, um, requested at the beginning that it should work the way that it does now, but the limitation was there. They were like, basically it got brushed aside early on because people don't do that. People don't do that. That's not there. Five other people don't do that. And then all of a sudden, like even Alan Stearns, who's like one of the main folks on the CSS working group, goes and scrubs the Adobe SAS ah style sheets. He's like,
00:25:28
Speaker
Oh, people do that. He's like, it's not even in there just a couple of times. Like it's all over this. Um, and they wanted to correct it. And so, uh, it's nice that they corrected. I liked that they've been doing more changes too. Like another one has been, uh, the inability previously to nest pseudo elements with pseudo states. Yes. Uh, that's also fixed. So those will be able to work as you expected. Yeah. Oh, that's good.
00:25:54
Speaker
Yeah. And that was's coming out that one came out because carousel and select both needed it where you've got these pseudo elements that are new and special with lots of new pseudo states and people are nesting. They're like, Oh, I'm going to nest my way. And then all of a sudden they're like, Hey, this doesn't work. Uh, it's, it was dumb that it didn't work and now to work.
00:26:11
Speaker
Oh, that's awesome. That's good. Cause that was just like, yeah, that one thing we were like, why isn't it was frustrating when that wouldn't work. Yeah. And it's ah interesting when you were you were saying like comparing the nesting in the native CSS to how it worked in SAS.
00:26:26
Speaker
And I think there's like the mental shift there a little bit, because like in SAS, you know, it's compiled to something else. So it makes sense that they pull it out and then have to build something. And I never questioned it when it was there. but when it And I used SAS for a decade or you know a long time now anyway. And it was never a thing that I thought about. It was just like, that's how it works. And then as soon as it was in native CSS, I'm like, this is stupid. Why is it working this way?
00:26:52
Speaker
So yeah, that's that's interesting that um that it changed a little bit or whatever.
Balancing Browser Feature Shipping with Stability
00:26:59
Speaker
The matched now sort of, or how this is working, they they updated it to more how people expect it to be working. Yeah. It's taken out all those little splinters and making it easy.
00:27:13
Speaker
It is one of those things. I guess I don't really hear about it. the The main thing I hear about is when I talk about something that doesn't have perfect browser support. People are like, oh, I can't use that thing because the browser support or whatever. But you probably hear it more when it comes to like.
00:27:28
Speaker
we're seeing now things like nesting and scroll-driven animations and these other things that are making it into the browser past like the initial thing, right? Because at first it's behind a flag in Canary and then eventually it's just in Canary and people are playing with it. And then eventually it finally, everyone agrees on the specs done. It makes it into the browsers. And then there's tweaks happening still like with that. And it seemed to be like,
00:27:54
Speaker
Yeah, that seems to be happening a lot. and art Do you hear people getting annoyed with that? Or is it more like it's good that we're going through these iterations now? You know, is it good that it's still a little bit fluid even once it's shipped, just because then we can make sure we're like, oh, it's really early days, we can fix these problems, and then they'll be good going forward. Like, what do you yeah what do you hear from people?
00:28:18
Speaker
This is definitely a topic um and the devil team has been requesting we ship less fast and because ah like I'm I'm a I'm the one hammering on this a lot where I'm like, I don't think it's cool that we're acting like a JavaScript framework.
00:28:35
Speaker
we're not and people can wait they should be getting something stable and good we shouldn't be experimenting on them ah in these iterations that's that's not cool especially because we can't dedicate things like there's a lot of reasons to not ah move so fast um and there's like pushback that's like incremental updates. They're like, these are just incremental updates. um you know and we'll We'll incrementally update things later until we have the like select elements, a good one. They're like, we'll ship select without select multiple support out the gate. I'm like, that's not cool. You should have a solution for multiple... Because you can't... Once you've sat down and seen the complexities of what multiple is going to do, that you're going to have wished that you made some different decisions on previous things, but you're not going to be able to nudge them because
00:29:21
Speaker
They're in stone and the browser forever. So there's a lot of us that are calling for a slowdown um though, I don't think it'll really happen. I think they're being more conscious about it. Like the the whole anchor stuff getting needing renamed and we're like, oh, and Chrome one, two and eight to one 30, whatever you have to not do that. And then afterwards you can just do this new thing. Aren't you, aren't you happy? And it's like, no, no one is happy with that.
00:29:43
Speaker
We do not want to read him. We don't want early adopters are feeling more pain now than they ever had before. And that's not cool. I don't like that at all. yeah Um, so is that just more of a question of leaving it behind a flag for longer? And cause I think part of the reason it gets changed is feedback from people probably. Like I know the new yeah anchoring things to me make a lot more like all the names. I'm like, Oh, this makes more sense than the old ones. Cause just the consistency behind them.
00:30:12
Speaker
And is it just that there's not an, like if it's behind a flag, the whole point there is let's try this out, use it. It hasn't shipped yet. Nothing's official, but then there's just not enough people playing with it. So you're not getting the feedback that's required.
00:30:26
Speaker
Yep. Yeah, there's too much that gets learned once it ships. The naming of the anchor once that was brought up by Apple folks, that wasn't from usage. Well, it sort of was. It's like, people are going to center on the top a lot. And it was like, cool. So you do anchor bottom minus 50% of the anchors width or whatever. And they were like, yeah, we know that you made it. So it was possible, but shouldn't it be easier?
00:30:49
Speaker
And so that I was like, oh yeah, just add some names for these common patterns that people are going to do. That was an easy one to change. But changing from inset area to position area, you're like, people shouldn't have to deal with that. That noise should just, that should have been history. Like I don't think that was a good rename. Should have just been inset area. Who cares? um But then we have, yeah, so we cause a lot of churn with people, which decreases adoption. It makes people more timid to get into something because, hey, maybe it it's in one or two browsers, but they've changed things before. Uh, I want to wait to to get into it. Um, and then the rate of new things that are happening is a lot. So it's like.
00:31:29
Speaker
Some people are feeling overwhelmed that they can't keep up Simultaneously we're shipping so fast people can't keep up and we're making them rework things because but it conversely if we were shipping too slow people complain that it's too slow and that shipping too fast actually creates this perception of like a really healthy platform and even though it's annoying to you, you're like, well, at least it's not dead or dying. you know It's alive and kicking. You're like, crap, I can't even keep up. keep up It's sprinting faster than me. this is So there's a lot of tensions that pull ah this stuff in different directions from and leadership teams and and then engineers wanting to ship things to people that are don't have greenfield projects. so they can't There's a lot of people that are like, I'm in a five-year code base. We don't adopt anything.
00:32:18
Speaker
We just don't This is a beast. No one wants to touch it. We do everything we can to like not touch anything We're not gonna refactor our dialogue to use the dialogue element. No, do you know how many dialogues are in our app? It's like we're not gonna do it um so yeah, it's this is a very tough and A conversation topic that's very forefront of our minds is we wanted to reduce how much noise we put in there. Like we didn't want to put experimental features in CSS wrapped. Actually we wanted to, but we felt that it would do a disservice to folks who are already feeling overwhelmed to feel more overwhelmed.
00:32:49
Speaker
um And we didn't also, I didn't want to go right about customizable select or or CSS carousel things when stuff is getting changed to the name all the time. And I'm like, I don't like leaving a wake of old names of things behind, at least not on web.dev. I'll tweet about them all day. I'm like, hey, this stuff's coming. Here's its current name. and That's temporary, but.
Barriers to Adopting New CSS Features
00:33:09
Speaker
Yeah, it's a good question though, dude. I ran into that problem with the anchor positioning article on, I don't know if it was web dot.dev or the Chrome for developers blog. One of the two of them. That's also confusing, isn't it? yeah with the difference yes No, I don't. Yeah, no one does except the authors who manage those those publications. Bramus has been trying to unite them He's like people don't know they don't care but they know that when one shows up on here It's anyway, so get back to your story. Sorry. Yeah. No, it was I think it was ah one of Yuna's early articles on on it and it was using the older syntax and I was trying something and it wasn't working I'm just like
00:33:48
Speaker
What I know I'm doing this right. I'm so frustrated. Then I find I'm like, oh, okay. All right. And even now VSCode still auto completes to the old syntax too. Yeah. like that tools at some point was it Yeah. Seriously. That's what I mean. It's like, we pump it out too early and, um, it creates noise for a long time. So it's like, uh,
00:34:09
Speaker
We don't have to move that fast. it It is. Yeah, it is. And it's one of those things definitely that I think depending on who like you're saying like you're hearing some side saying you need to ship faster or more like let's keep it going. We need to show what's you know that it is there's progress being made.
00:34:26
Speaker
um I see the other side what you're saying people are just like I can't keep up with everything that's going on like it's it's insane and Sort of you know finding that balance and then also like for a lot of people That are just working all day long like even if they sort of keep their a pulse on things It's like okay, that's cool But I know I can't use it right away because I need to wait for browser to support to be better And then so even if you're just using like the baseline ah the wide support where does it wide Widely available widely available. That's it like The amount of time you have to wait before that happens. You've forgotten about it think You don't know that like so it's you know Not only keeping up with things but then keeping up with browser support of those things and and everything else it It is a lot of people Express to me of like, how do you keep up
Focus Areas and Future Plans in CSS
00:35:14
Speaker
with it? I'm like, I did I try my best. and It's it's hard ah and then even I was when I was i talked to Brahmis and A week ago two weeks ago and I remember what the topic was that we mentioned but he's just like oh I've been so into ah the view transitions and this other thing like I don't even know how that works like this is what I've been focused on and then like it's I think an important thing to remember is that even the people that are in Really involved in it have their focus areas and know some parts of it better than others
00:35:44
Speaker
100%. Oh man, you have you just described so many different things that I tell my managers or people around me too. that Your adoption story that you summarized, that's almost like word for word for what I sound like. because people Because my managers or people up ah you know at the Chrome leadership team are like, hey, why isn't sub-grid more adopted or whatever?
00:36:03
Speaker
Um, and I basically tell them a story just like, you know, I'm like, well, they heard about it. And then they looked at the browser support and said, sweet, can't use it. Then they maybe you heard about it again later. And they're like, sweet, still can't use it. And then they're like, Oh, is it wildly available now? Has it been out in browsers for two years? I don't even have a project that I need that on right now. So the timing is not good. And then magically this one moment comes together. It's like, Oh, it's like, I'm ready the features ready. We're ready. Oh, we could finally implement somewhere and usually it's a greenfield project because people don't tend to refactor old work and so yeah adoption is tough because ah There's a lot of factors and some of them are even social um Like you could don't get time to explore at your job. Some people don't get the opportunity to tinker ah so there's no room for that and
00:36:51
Speaker
Anyway, yes, very hot topic. And yeah, even the people that are supposed to know this stuff all the time, we miss it ah constantly. And I ask for help on stuff. What do you most focus on? What you're saying? Obviously, you're doing a lot with the carousel stuff.
00:37:07
Speaker
um You were super involved with scroll driven animations, scroll snap stuff. I guess now, is there anything that you're sort of top of the list going on for you or is it still mostly in those things?
00:37:22
Speaker
Yeah, my focus area is so like the Chrome DevRel team is Yuna, Bramus and I. Bramus focuses on view transitions and scroll driven animations, ah more of a performance tuned um animation side of things where he'll dig into the browser um implementation details and just sort of like work those things out.
00:37:40
Speaker
I'm generally the typography, color, and scroll, ah scroll, snap, or scroll interaction person. And Yuna is kind of like our team lead. She does a lot of like planning, organizing. ah She's previously led a lot of the select work as well as the CSS next working groups. so but I mean, she's been gone for a while. She's going to come back and be like, what is everything? i't there's so much new and we're like yeah there is sorry about that um like select so much of the stuff in the select work that she was focused on has got renamed again for like the sixth time that one has gone through so much thrashing striving me nuts i'm like please in january don't release something that we have to rename pieces of i just really don't want to do that to people
00:38:21
Speaker
um So yeah, those have been my focus, but next year my focus is gonna be carousel, almost the whole year, um as well as ah supporting select. I think that's like, with select, we still, I still, no one has made a select element and that uses all these new features that is mobile and tablet and desktop ready with animations and all the whiz bangs. And I've got one that's like really full featured on desktop.
00:38:48
Speaker
And it's already like it, almost 200 lines of code and some complex requirements in the markup. And I'm just like, the the things that people are going to be building with this is going to be wild. And it's going to take a lot of code, but it will be all CSS. And it's going to be really neat at the end, but get ready. It's going to be a long video you put out, Kevin, that talks about the select element. The carousel stuff should be should be pretty quick. You'd be like, hey, let's add buttons to a scroller.
00:39:15
Speaker
five lines of CSS leader. We've got buttons. Now let's style them. Here's the fun part. But select is like, who's heavy? it's heavy stuff I guess there was a reason that we haven't had a proper one for so long because it's not a not such an easy nut to crack. But it's also it's good that it's feature rich and we're not getting like this half baked little thing that's like, oh, I can do something with it, but I still have other use cases outside of this. You know, that's not what we need
Conclusion and Thank You
00:39:44
Speaker
right now. Yeah.
00:39:47
Speaker
Awesome. Well, I appreciate your time in chatting with me. We've been talking for a while now, so I don't want to take up your entire afternoon. No worries. this is This is the fun part. This was very enjoyable. Yeah, thanks. oh I really enjoyed it. i Yeah, thank you for for nerding it with CSS and for all of the the work that you put into stuff like CSS wrapped and letting everybody else know about all the cool stuff and all the demos and everything else that you're constantly building that are super inspirational. And there we have it. Once again, a huge thank you to Adam for his time in having this conversation with me. I really enjoyed it. And if there was anything we talked about along the way or just all of you want to follow Adam and the stuff he's up to and all the cool demos and other things that he's constantly sharing, links to everything once again are in the show notes down below to everything he's doing and all the different things we talked about along the way here. And thank you very much for listening as well. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.