State of CSS 2025 - VIDEO EDIT
===

Paige: [00:00:00] Hi, and welcome to Pod Rocket, a web development podcast brought to you by Log Rocket. Log. Rocket provides AI first session, replay, and analytics, which surface the UX and technical issues impacting user experiences. Start understanding where your users are struggling by trying it for free@logrocket.com.

~Hey everybody. ~I am your host today, Paige Needing House, and we have two special guests on the podcast. Today we have Adam Argyle, a design engineer at Shopify, and we have Kevin Powell, a CSS evangelist, here to talk about the state of CSS in 2025. Welcome to the podcast guys.

Adam: It's a

Kevin: Thank pleasure to be here. Thank you.

Adam: You stole my word. I'm just kidding.

Paige: So, I mean, CSS has really been, it seems like having a couple of really good years. There are so many new things that are coming out, new functions, new frameworks, new techniques even. So let's, let's just talk about what is happening this [00:01:00] year with CSS in particular. Um. The state of CSS uh, survey came out recently and it kind of provides a good jumping off point.

So let's talk about, you know, why does CSS seem to have remained almost irreplaceable in terms of the front end stack? We have lots of abstractions with JavaScript frameworks and even, you know, new ways to do HTML or JSX or things like that. But CSS just kind of seems to keep hanging on no matter what. 

Adam: CSS is, I, I, it's so funny. It's the reigning champ. Like, why, why can't it be, uh. You know, overtaken by something tailwind kind of, maybe you could think of it like it is, but it's not. It's a subset of, it's using CSS, it's not replacing it in any way at all.

In fact, it's having a hard time keeping up because classes used to feel like. Sort of this very powerful way to contain styles. But oh, and then now we have at starting style, uh, we have, um, [00:02:00] all, we have all sorts of things to sort of con change, um, just the state of, of your styles and that things that query other things in order to return a value.

We have functions coming, we have mixings coming, so, um. It is, I think it's sort of raining in, in terms of like as the champ because there are so many edge cases. It's handling that people that try to build their own tooling or build their own solutions, um, can't quite grip all of them. And if you can't grip all of 'em, it leaves a huge set of people that going, well, you know, I'm not just gonna use up to 2010 CSS.

Like, all this new stuff is really, really valuable to my users and it's easy for me to put in a style sheet. Um. So I think that's like this weird combination of we do think of styles very declaratively even though we have functions and mixings. Um, but that, that strategy of just having these willy-nilly styles, it's just the same thing if, um, you, you bring in functions from lo dash, that's basically what tailwind is for styles.[00:03:00] 

So you could prepackage a lot of things and then you compose. And I think people like composition. CSS is basically composition out of the box, uh, with a whole bunch of features to make composition even more powerful. And at this point I'm gonna.

Kevin: Yeah. I think, I think the other part of it is it's just really good at what it does with everything, and it's just getting better. Like Adam's saying, there's all these new features coming and while you know people have. Always been trying to solve some of the problems with CSS, but there's like some of those problems that people are trying to solve.

Like the global scope of it is one of the biggest features that just works really well for at least, like, I know sometimes it can get in the way depending on what you're doing, but at like just a base level of like set some styles up and then you're, you know, the base styles for your site. Just go through everything and your looks good and you don't need to over complicate things or.

You know, it just, it, it works. And so I, I think that is a big feature of it is like, at a basic level, while I know there's people that have complaints and, and issues [00:04:00] with certain ways that some things are done, I think overall it, it solves the problem really well. Uh, and now we're just getting new features and other things coming in that make.

More particular things, easier to solve as well. So it just keeps improving and getting better. And like Adam said, now there's so many new features coming that it's hard for these other things that are trying, you know, like Tailwind and other stuff to. Incorporate all of that. 'cause they're coming at such a fast pace and they're also going a little bit out of the scope of how those tools work.

Like starting style, you can't, how would that work if you're just doing it with a class or, you know, it's not here yet, but we have like environment variables coming that you probably can't do with a class. 'cause that's like at a higher level and like there's new things that I think. Won't be able to, or at least not in a simple way, be solved with these.

So then all of a sudden you're limiting what you can actually accomplish when the native language can do more.

Paige: Yeah, and it's, it's funny because Tailwind seems to have gained so much steam over the [00:05:00] past few years, but now when you look at the things that Tailwind is pushing out in terms of its new releases, it's supporting more CSS features or making it easier to incorporate. Real traditional CSS into it. So yeah, it's uh, it's almost like they're reversing course a little bit.

Adam: Have to, it's the language feels like it's in the future right now. Um, and it's, and it's consuming other parts of the application's roles. And that's, uh, you know, so a lot of people are like, oh, I'll do JavaScript. You're like, why now? It's just a couple lines of CSS. And they're like, it is. You're like, well, it, I mean, it could, it could have always been that way.

You know, like you just like to grab the reins and control things, but now we can just let the browser do it. So we're it's, it is, it's like ahead of every framework. CSS right now, I'm just gonna say is like this weird blanket statement that it is ahead. Maybe even by like a year or two of all these frameworks, it's gonna take other huge frameworks.

A lot of thinking to start to incorporate what CSS is just like, wow, look at that. Mm. Look [00:06:00] at Shing over here. You're just like, what do we do? You're like, I don't know, you just gotta keep watching and try it out as it comes out. I don't know. Um, but yeah, the future thing feels weird to me where I'm like looking at frameworks like they can't keep up or they're not even equipped in a state to, to handle the new stuff.

And it's, I don't know where we're gonna go from here, 

Paige: Well, that's actually a really good segue. It seems like people still misunderstand a lot about what CSS can do at which leads them, I guess, to try and replace it with JavaScript frameworks or drop in poly fills, or just do random stuff that they think. They, they, they're incapable of doing with CSS straight up.

Kevin: Yeah, I saw a blue sky post the other day that was something like, you know, for everybody who complains about CSS being a hard language, just, or that it doesn't, it's not intuitive or whatever it is that they just haven't learned, actually learned it and don't understand how it works. Um, and I think that's a big part of it is, is.

People have not, they, they've [00:07:00] tried to make it something different. Uh, and not a little bit like I was saying before about like the global nature of it. And there's all these authoring styles or the frameworks that come in to try and limit that when there are times where maybe you do, um, you or you can run into issues.

But if you learn, you know, why does it do that in the first place? And think about it a bit and how much easier that actually can make your life. And a lot of like the real fundamentals. That are with CSS that are different from other programming languages, that they're different for a reason. It's not because it was a badly designed language where they, they were like, oh, let's just try something different.

They made for something that was created before layouts were even a thing on the web. They made a lot of really smart decisions early on. There might have been a few mistakes here or there, but I mean, it happens. Overall, I think they, they put a really strong foundation, um, that that works really well.

And the main issue is a lot of the time people just not understanding how the language is meant to be written or how it actually works under the hood a little bit. Uh, 'cause there's, you know, the [00:08:00] browser's doing a lot of stuff and we're hooking into these APIs that the browser has and doing all these things with it.

~Um, yeah.~

Adam: ~It's like.~

Paige: ~So do, oh, go ahead, Adam.~

Adam: ~Sorry. It was like, uh, ~he's reminding me that when you're writing JavaScript and other programming languages, it's often a lot about you as the developer, right? It's like me, I want this and I want you to take these 10 files and then do this. You know? And it's like, and you're giving demands and requests.

Um, or they're not requests. And that's kind of where CSS is a lot different. The CSS is like, Hey, I care about the user. And you're like, I want the width to be this. And it's like, Nope. And you're like, well, what the heck? I wrote with 50% and it's not what I want. And you're like, well, it's not about you. You know, there's a lot of things that factor here.

Uh, you should probably, yeah.

Kevin: Yeah, no, just saying that like, it also sounds weird 'cause it's a hundred percent right, but it, that's building off of it being a declarative language where it feels like you're telling it what to do. Like I'm saying the color should be blue or the width should be 50% and then it doesn't do that thing that you'd within, you know, 10 characters told it to do [00:09:00] something.

And then when it doesn't do exactly what you said, people get frustrated. But it's dealing with so many variables and constraints that we have no idea about that you can't write it that way. Yeah.

Paige: Well then you just throw important on the back of it and hope that that fixes it ~so well, this actually, that's a really good, uh, a lead in.~ It seems like the, the Twitter wars of yesteryear where everybody's like CSS is in a programming language might finally be shifting. Do you think that that is true and that people are starting to come around to the fact that CSS is indeed like a first class language?

Adam: I don't think anything's changed. I think the language is a pure, uh, is full of pure functions. It's a typed language. It's the only typed language we have that runs types in the browser. Uh, it has. Hundreds of aspects of a coding language. And still I don't see that that needle shifting at all. But amongst the people I talk to, it's still to them the same thing it's ever been.

Um, even with if [00:10:00] statements at, if it could do, if statements, it's been touring complete way before it had ifs. Y'all like, I don't even know touring complete matters to you, but I, so I'm got on a high horse 'cause I've been like fighting in this for a while. Um. Just trying to show all the, uh, parallels between like what CSS and JavaScript can do.

Like JavaScript. You, you, you have an array and you iterate it on array and you map a bunch of changes to it. That's what a selector does. You write a selector, it finds all the items, it maps them and applies the, you know, like what, what's so different about you doing it in JavaScript and you feeling that it's, but, and then again, I hear people, uh, comparing it to, it's not about programming languages.

It's about, it's not a scripting language. It's, uh, sure it's programming, whatever Adam. Yeah. It has functions and if, and mixings and whatever. Uh, but it's still not a scripting language. And I'm like, what do you even care? I'm like, what do you get outta this conversation? Um, but you, so that's why the Twitter wars were always fun to watch 'cause you're like, I don't understand these arguments.

Um, anyway, what, what do you think, Kevin, do you feel like it's moving [00:11:00] the needle?

Kevin: Um, I, I think most of the people that I see saying like that are more on, like it is a programming language, are the ones who are already sort of, they're just more vocal about it now. You know, as some of these new features are coming, the people that already, like CSS, um, I'm a little bit with you though, like I just, the, you know, some people are just gonna shift the goal posts when it starts doing the things they wanted it to, to find other things, like you said.

Uh, and then at the end of the day, like, I don't know, it's. Call it what you want. It doesn't change anything for me. If you, if you wanna say, you know, it is what it is, uh, I, I love it either way, and it's not gonna change what I think about that or any other language, whatever, however you wanna sort of categorize it.

Paige: So with CSS getting things now natively, like mix-ins and functions and math and if statements and nested CSS, do you think that there's still a place for pre-processor or post CSS processors or are those kind of like not [00:12:00] really needed and kind of obsolete nowadays?

Kevin: I still think there's room for them. I definitely do think it's more niche. Uh, there's you. Know, I, there are some, like, I use Maps and loops in SaaS still, uh, for some things that I work on and it's convenient and I like having that. Uh, as far as I know, the working group has said they're not gonna bring in loops to CSS 'cause it's not, you know, that doesn't really belong in, in what it does.

Um. Most people probably don't use that anyway. So if that's the case, then you know, it's, it's taken what they did where they were super useful to being like, okay, we're, we're handling a lot of these things. It, depending on your use case, maybe it could still be potentially awesome, um, but maybe you don't need it anymore.

I know when I mentioned loops last time to somebody, they said the only time. Or the, 'cause we have sibling index and sibling count now, and they're like, that removed my entire need for loops. And so I was like, fair enough. That's awesome. Then you don't need an extra dependency. And for me that, that's pretty cool.

Adam: [00:13:00] I think that's a great answer. And just speaking on loops and stuff too, I was just thinking, uh, you could use sibling index and the attribute function to basically like know which index of child you are and extract data off of yourself as an element and use it to change yourself, like. That's pretty cool.

It feels like loops, but the browser is just handling everything for you. Um, and you just have a declarative block. You don't have to worry about the, how many, what's the length? Plus, plus you don't have to worry about that junk. Um, I still use pre-processor a little bit. Um, I get kind of like, like concatenations one for me.

Uh, I like to, to send one file. What's nice though is I've gotten to delete tons of plugins. I don't have to do nesting anymore. I don't have to do layers anymore. Um, I get to, I do have a glob import, so it's like one of my things, it's not a loop, but I have a glob import. I'm like, look at the components folder and find every nested CSS file and just smosh it right here into this layer.

There you go. All the components in a schmo layer, and then I can just go put in, here's my third party property [00:14:00] anyway, so it's like I'm still concatenating, but now I'm using native layers and I am still using like an import syntax. It just seems, uh, until the browser gets way better at fetching 50 CSS files, which is pretty much how many it have to do at this point, for at least my website.

Probably more, uh, that doesn't seem very feasible, so, um, I don't know. So maybe, we'll, we'll, we'll keep calm and concatenate on, I don't know. I just made that up. It sounds really dumb. Maybe it's fun in our circle. So I'm not sure. Um.

Paige: No, I mean, CSS nesting was probably one of my favorite new features that came out within the last 12 months or, or whenever it was as well. Well, that and container queries. Container queries have made my life so much easier in so many ways. Um, do you ever, or are you ever concerned though, that there might be too many features that CSS tries to natively support and it might get kind of bloated in the future?

Is that a, a concern?

Adam: I wouldn't. Lo, but [00:15:00] fear. Yeah. My brain is only so small, you know?

Kevin: I think for me, the nice thing with it, and I I I, I do a lot of stuff with beginners and I could see it being overwhelming when you look at like, here's the, you know, it was already a lot of stuff, like when you start learning all the properties and values, that's just like cognitive overload at the beginning.

And now that list is getting longer and longer and longer. Um, but I just, the cool thing with it is like. You can still start with the basics and those haven't changed. Uh, and then these newer things are sort of like these extra features and other things we're getting that enable us to do more things.

So I'm all for it. The more we have the better and you learn the things as you need them. Like I need, you know, we can do squirl. Now, I might not know what even that is, but then once I'm trying to look at it, that might not be the, you know, you wanna do an inset corner or something like that. It's easy to do Now with that feature.

And so when you're looking it up, then you actually find this really easy answer instead of having to come up with some [00:16:00] weird hack or something like that to, to accomplish the same thing. So yeah, I think if you're trying to learn everything, 'cause you're following a roadmap and it just has this giant list of features, it's probably overwhelming.

Um, but otherwise I'm all for it.

Adam: I feel like there needs to be a chart. Someone needs to make a chart. People love charts. So here's a meme chart someone needs to make because Kevin's right CSS grows with you. There's not other l, not a lot of other languages that do that. A lot of other languages are super intimidating right off the bat and kind of put all of this weight on you immediately.

And CSS doesn't do that, right? People will do color red. I'm a genius. I, I can write a code, look at me, go, and then it, but then it grows with you and it kind of scales with you. And so the chart that I'm thinking of is like right off the bat you're like, I write CSS, I'm a CS, S God, and then you crash.

There's like a, there's always a crash somewhere right after there. 'cause you can see people that are like new on Twitter or whatever. They're like a hundred days of CS and html, I'm a css God. Uh, and then later they're like, oh crap, it's crushing me. Um, but then, so yeah, you crash, but then as you, you know, you [00:17:00] start picking up one by one by one and you start, oh, dang, that was really handy and really cool.

That unit, I didn't even know that kind of unit existed. Wow, that's really specifically powerful right here. And it's three characters. That's really bizarre. And so then you start to get like stoked and then you subscribe to Kevin Powell on YouTube, and then you're just, uh. Really just heading up this chart.

So I don't know if there's another crash later on when you're like, I love CSS, and then it's like, yeah, but there really are a lot of features. Then you crash a little and then you go back. So maybe it's a wave. I don't know. Someone make this meme. I feel like it personify all of us learning CSS right now.

Paige: yeah, it's like the Gartner Hype cycle, but just for developers.

Adam: Nice.

Paige: But honestly, I mean, I think one of the big things for me, because I definitely went through that, I went to a coding bootcamp and learned like the basics and felt like I could make anything for about three weeks and then realize how much more there was beyond that. But I think one of the things that you start to realize as you get further along in your career and further along with [00:18:00] using CSS, is that you, like you said, you can kind of dip in when you need to learn something new and then.

You're good for a while and you can kind of let things happen, let new changes take effect, let new features come into play, and then you'll be tasked with doing something and you'll be like, oh, I think I kind of remember somebody talking about that. Maybe I should check it out again. Like, maybe I can do a carousel without having to use JavaScript for the first time.

Yeah. So it, it's almost like you can, you can ride for a little bit with what you've learned and then go back in and pick back up.

Kevin: Yeah. I think a lot of it these days is about I, I think with everything we do, but just being aware. Of things that might be possible. Um, you know, the carousel anchor positioning solves so many problems that we've had for so long. Uh, there's like all these things, so just being like, if you just keep like a little bit of an ear on, on the pulse of things, so when you do run into a problem on a new project or something, you're like, Hmm, I think I remember hearing that.

I think that's exactly [00:19:00] the right approach to take.

Paige: ~Do you have any resources that you would recommend that people either subscribe to or, you know, sign up for, or listen, you know, check out regularly to keep up with that kind of thing?~

Adam: ~Yeah, there's a couple, um, so there's like fire hoses where you, you'll get bombarded and then you'll really be like, CSS is doing even more than I thought. I was overwhelmed with the five bullets I saw in that tweet, and now I gotta look at this whole. Uh, stream, but so there's like a intent to ship is a good one, especially if you're really curious about browser support.~

~'cause they'll both, uh, tweet when they're hacking and prototyping something and you're like, oh, snap this new feature. I don't know how long it'll take, but, uh, it's available for me to try and browser and then they'll tweet again when it's like, Hey, we're shipping it. And this version. And that can be really nice for you to kind of get it, get an idea of something, and then later be like, oh, it's here and it's time to learn.~

~So whatever your timing is, um, baseline is trying to help people who are a little overwhelmed with early adoption and they want only stable adoption. So you can go find like, um, baseline channels that try to list or exclusively share things that recently went baseline so you don't have to mess with, uh, browser support.~

~Can watch Kevin's channel. It's a great channel. Uh, listen to front end fire. Uh, they got some snacks in there that they occasionally share. Um, but yeah, I, I think there's some social networks and some folks you can follow. I try to still do, uh, CSS stuff. I'm not, not gonna stop. I'm, I'm compiling a list right now.~

~Um, and it's just gonna be this wild, this wild list of stuff. You just be like, Hey, if you've been under a rock in the CSS world for five years, here's a blog post for you. This will overwhelm every, even me, I'm overwhelmed, you know? But wow. At the same time you're like, anything you don't know, just click a link and you're like, spend some time on here.~

~Um, so those, that's kinda my suggestions. Yeah.~

Paige: ~Got any other ones, Kevin?~

Kevin: ~Yeah, I'm trying to think the, you sort of hit the big ones there. I think like for depe, it depends again on, like you said, how up to date you wanna be. I always look at the browser release notes, um, just to have an idea of what's being included, um, following people on the Devra teams for all the browsers, just to have an idea 'cause.~

~You know, Adam also when he was there, but also like for all of the browsers, just to have an idea. 'cause you know when features are sort of coming or gaining support. Um. I'm trying to think of anything else. The, I, I will, the, the baseline, I don't know who created, I forget now, but somebody made an RSS feed for baseline, widely available and newly available.~

~So I'm on that. It's not too often something comes up, but whenever it does, I'm like, oh, nice. Especially if it's on the widely available, um, in my RSS feed. So it's a a a a nice way just to know when features are sort of gaining support. Um, and then I think it's, yeah, I, I would say, I can't think of anything else right now.~

Paige: ~Well, ~one thing that I was hoping that you two could educate me about a little bit, 'cause I really don't feel like I have a good grasp yet, is the new functions that are coming to CSS. Can you tell me or tell the listeners and me, like, how do I use them? What's the benefit of them? Where would I put them into my day-to-day CSS and really like, get some value from 'em.

Adam: I'll do a high level one if you want to dive into a little more details. Kevin? Uh, at a high level, I think of functions, returning values. So you use them where values go. Um. Mix-ins can return a block of styles. And so that's a, a really high level, but I think one of the best distinctions right off the bat is a function will return a value and inside of it, it can do conditionals and media queries and all these different, um, CSS superpowers to return something.

And so, um, that would be a, a function is a value. Uh, it's not gonna be more than that. So that's a little bit different than maybe you thinking about functions in other languages. 

Kevin: [00:20:00] The, the thing that I'm, it's a friend of mine for me, 'cause I'm working on something with colors right now, is the relative color syntax, which another new CSS feature where you can, like, if you have a variable and you want to, you know, manipulate that color somehow, it's really awesome. But it's really, it's kind of a verbose, like you have to write the color or.

Color function from this color. Then you put the H, the SCL L or whatever color space you're working in, and then you're doing a calc on something. And so it's kind of long. So like having a custom function. And if anybody was using a pre-processor before you'd had like the lighten and the darken functions that you could use, you could just recreate those in CSS.

So you can lighten by. Choose your color and how much you wanna lighten it by, or how much you wanna darken it by. And those are gonna be two arguments you pass and it gives you that value as, as your new color. So for, for small manipulations on things like that, I think it's really, really handy. Um, I. Outside of that, I'm always, I'm the type of person who's like seeing what all the really clever people [00:21:00] come up with, and then I'm like, okay, that's how I can use this now. Uh, so like I, I'm sure as it evolves, it's a bit like even when you look at custom properties that were, like, they, at first it was like, okay, I can replace my SaaS variables with these, and then it's like, oh wait.

They're, they can do more because they're native variables in the browser that the browser can, you know, we're not compiling it. So then all of a sudden now there's like all these amazing use cases and things that are coming. So I'm actually really curious to see what happens with things like native functions and, and mix-ins and stuff compared to how we've used them previously with, uh, pre-process.

Adam: I, I wanna pitch too, like, um, functions are going to, um, really upset people who are already confused at c. S. Like, um,

Kevin: Yes. Yeah.

Adam: and what, and what I mean, and I'm not like upset, but maybe not upset. It depends on whether or not you're upset When people, um, abstract a function. If they take, if they take a set of instructions and then they make a function out of it, does that make you upset?

I mean, maybe if you were in the single file world, you're like, all of my code [00:22:00] is in this one file. Why did you move it to another file? How dare you? So, um, if that's the phase you're in. And you're probably already anted a lot of the complexity of web development, but, so CSS at this point just has so many abstractions inside of its own self for resolving values.

Given the whole humongous matrix of context that it has to be aware of that people coming into the back end, like if they approach a front, so let's say Adam builds a front end, I built a design system, tons of custom properties. I got custom functions that imitate things from SAS and Compass and NIB all back in the day.

I've got all these, and so you're like, where's the value? I have a bug. Where is my value? You know, there's gonna people that are gonna be really upset, like, how in the world did this resolve? And so they're gonna be in dev tools, maybe if they even know how to use the CSS dev tools. Um, and then mix-ins you throw, just like at scope, you throw at layer all if CSS variables and functions.

And if statements in there, you're looking at, Hey, I thought I was gonna be reading CSS, why am I reading functional programming? [00:23:00] You're like, well, tough. Uh, the world has moved forward and CSS is now as powerful as your other functional languages. Well, hey, I kind of liked it when I thought it was dumb.

When I tough, you know, like I'm in the front end. I'm gonna write really robust front ends, just like you write really robust, uh, APIs. So you and I are kind of doing the same thing now. Uh, and I'm just, I just can't wait for the confusion or the frustration. Uh, it's gonna be fun to watch, you know.

Kevin: Yeah, it, it does make me, earlier when I was mentioning like a beginner can, just, like, you can still start with the same basics. I do feel a bit bad in like two years now. Once all of these features are well supported. When somebody's like, they've gone through their introduction thing, color red, they're the superhero.

They put their box shadow on something and then they open up like some other example and they just see this, like, it's not the same language. Like they're just like, you know, it's,

Adam: Yeah, it's already done

Kevin: might be a little motivating.

Adam: Six did that. I remember writing vanilla JavaScript way before Arrow functions. Right. And

Kevin: Yes. Yeah.

Adam: um, then you [00:24:00] start opening up files with arrow functions. You're like, what in the, this looks weird. What's this const word at the top? There's imports. Like what the, I missed my iffy, you know?

Um. Nice. Paige is like, I know, iffy and I, uh, loved them anyway, so yeah. I, I feel the same way about Cs. And it's been doing that since like nesting and more functions. As more functions show up as more at rules show up. Um, it is, it just, it, it's a completely different looking language. Yep.

Paige: It seems like a lot of kind of what's pushing CSS forward is that the browsers are work, or I guess CSS across the board, is that the browsers are finally working together and like talking about what features they're going to prioritize for a year and like what are the important things. Do you think that that.

Trust is something that we can continue to rely on that they're going to keep operating as a group, like prioritizing stuff, making it happen. You know, because, I mean, polyfils were like, that was the [00:25:00] only way that you could maybe get pretty good browser support across a lot of different browsers back in the day.

But it seems like there's a lot less need for that now.

Adam: ~yeah. I'll try. It's a, but~ that's a spicy question. Yeah. Are these groups gonna continue doing interrupt? I, I don't know. Um, it's been nice as. Um, as like an observer and a participant in that, to see that that even came together to, to exist. Um, I, I, I do like competition also.

So I guess there is a competitive nature to interop. It's like, how, how much of it did you succeed at? Um, what's motivating them is, is what I'm kind of struggling with. 'cause Yeah, even just being a browser right now. Seems like it's hard, hard work for everybody. You know, it's really expensive. People aren't searching anymore.

Um, there's just so many, like the, the amount that could be, uh, brought in for a company owning a browser is, is less and less. And so I don't know if they're gonna continue giving into it in the same way. That's kind of why I felt it was a spicy question. [00:26:00] To me, I'm assuming No, but maybe something changes.

Maybe. We see an explosion of browsers, like we're seeing an explosion of IDs right now. I have like six IDs installed. I'm like, what the heck? They're all vs. Code forks. And then I'm like, I feel bad for VS code. You're the one I don't open anymore, and that might happen to Chrome. I got DIA installed.

There's all these new browsers popping out. They're all chromium based. ARC was badass. You know, like, um. I don't, I don't. So if, if, if Chrome just becomes this stable foundation for all this other stuff, maybe Interrupt could continue because people back invest. So you got, like, arc just got bought and they're like, oh, we piggyback on outside of Chrome.

Maybe we'll go give to standards work because that's really nice. But I don't know, money moves in weird places. Um, I'd like to see it continue, but it, it feels threatened to me. And that's kind of, I was like, Ooh, spicy question. I hadn't considered this. 

Paige: Yeah, it's, it's almost like there's been a deprioritization of. The web or the browser itself, because like you said, we've got Dia, we've got Comet, we've got, [00:27:00] uh, mean Open. AI is trying to come out with their own everybody, but it's all AI companies who are just like bolting themselves into some kind of a skinned chromium.

It's not actually building new browsers except for Ladybird. Ladybird is an interesting one and I will watch that closely, but it's, I mean, it. It's so ambitious of them to be like, we're just gonna build something brand new from the ground up. We're not gonna use anybody's existing anything to start us off.

So I don't know. I don't know how they're gonna get to release. Honestly, that seems like a really big task.

Kevin: I'm with you on that. I think that's very ambitious. Uh, it's cool that someone's trying. I think it's amazing. Uh, and it would be nice to see progress made, but I mean, it's. Such a big undertaking and there's just more and more constant, like there's always new stuff coming and I don't know how they're el just, I don't know, it seems like it's such a big undertaking.

Um, but speaking of bit to what Adam said, I mean, I guess that would be the one thing I guess that would keep them going is [00:28:00] potentially if, if, you know, as maybe Chrome or Google sees Chrome is less important, if there is funding coming in from the ones who are relying on it, um. Yeah, it, it'd be interesting to see what happens in the next couple of years there.

Adam: There, there's been historical moments where that happened, like Bloomberg paid for a grid and I think they even paid for grid across two, two browsers. So imagine, uh, DIA or you know, some wildly new famous, uh, browser is just racking in the dough from their paid version of their browser and they just start to pay it forward.

Back into that would be really, really cool. Um. I'm somehow skeptical of that happening, but maybe

Kevin: Yeah, me too.

Adam: And then the last thing too, is on Chrome, it wasn't just AI threatening the browser, it was youth. Youth don't open the browser. The browser is just, ugh. It's like this weird little temporary space that I go after a TikTok link sends me there.

Uh, you know, that's not where [00:29:00] I go to learn or watch or spend my time. So they're watching is a, people aren't searching a Google search as much anymore. Right. That's AI is just consuming that more and more and more. Um, and youth aren't opening up the browser. Uh, or if they do, they don't even know they're in it or whatever.

Um,

Paige: God.

Adam: so, so yeah, it's, uh. I don't think it's a dying thing. Like the web is obviously one of the strongest foundational backbones of applications and e-commerce and everything that we have right now. Um, but it is oddly, um. Underused in some awkward ways, I don't know. So yeah, as the future kids don't even open a browser, they just ask their AI to search the browser for them.

And so that, you know, like we're almost headed towards that, like a crash course. So what happens to interop when the browser is not a recognized app that people roll off their tongue anymore? I'm not sure.

Paige: Yeah. Do the AI agents care if we support, you know, baseline and [00:30:00] cascade layers and things like that? Probably not. I don't know.

Adam: Maybe AI can start putting features in browsers. How about that? Uh, so instead of Bloomberg paying for it, we got a model. It's like our new supermodel can do web standards work perfectly. I guess that is the spectrum stuff. Anyway, I don't know. Well, that would be cool. We'll see.

Paige: So, kind of piggybacking off of that, how do you decide when a new CSS feature is ready for production use versus it's just available or it's. Implemented by one browser, but not another. Like how do you say, okay, this is good enough support, let's, let's put into production.

Adam: I'm a wild western, uh, and I, as long as it's not crashing my tab, I'll ship it. So on my site, I literally, I literally the other day was trying to, um, add the new scroll spy feature. It's basically like a, a carousel feature where like a, a link knows when it's in view or it's relative related content is in view.

So it takes [00:31:00] scrolls by, and like a couple lines to see. It says truly, it's very cool. I put it on my site, crash my site. My site is, uh, really good at crashing the browser 'cause it has scroll driven animations, view transitions, cascade layers, like, so they run unit tests on a lot of the browser features, but they never like load up a site that's got all of it in one.

And, oh man, I crashed the browser a lot. So for me, I'm willing to adopt it as soon as possible. You got at supports, you got all these different ways to adopt things. Some are harder than other. Anchoring is kind of hard to partially adopt, right? You don't want to like not show it or not have it attached.

That's kind of awkward. Um. I'm not, I'm not the norm. When I was running a lot of interviews, most people adopted something along the lines of a, of a baseline type of, um, indicator. They didn't use the word baseline then, but something that was in every browser that they weren't gonna ship. 'cause the last thing people wanna do is ship a feature.

And then the CEO, who always has some weird old garbage Android phone opens up your app and is like, Hey, I don't see the new thingy. And you're like, dang it. Why don't you have an [00:32:00] iPhone? You know, like, now you don't think we're shipping things, but we are. And so, so people get this massive pressure to make every browser look the same.

Um, and that pressure forces them into late adoption. Um, so anyway, it just depends on what, what your values are, whether you need it to look the same everywhere, uh, and yeah. A few other

Paige: Whether you like to live on the edge or you have different users who may not be on the latest,

Adam: Yeah. Yep.

Kevin: Yeah, I'm, I'm very similar to Adam in that. Like, I just, I like having fun with all the stuff I'm doing, so I'm gonna play around with it. Um, I had a comment on one of my videos recently. I, I don't remember what I was, which one it was looking at it. Probably was using anchor positioning and a couple of other things in it.

And one of the comments was asking something about browser support and the person replied just being like, oh, don't watch Kevin's videos if you're looking for things you can implement today. Like watch it for what you're doing in two years. And I was like, oh, come on. Like it's not that bad. Like this one, yes, definitely was like, you know, this isn't something, but it was also like a weird thing [00:33:00] that you probably wouldn't wanna do.

Um, exactly as I did it. We're pushing the boundaries a little bit, but I think. For the most part, I always like if I'm, again, it depends on who you're building it for and everything else. Like Adam said, uh, my first question's always can you do it as a progressive enhancement view. Transitions are like the perfect example there.

Like if it doesn't transition, does it really matter? And then if the person's on a newer browser, oh, they get a fancy animation that looks cool, or a cross fade or whatever it is between pages and so, you know, things like that. Or there's the, uh, like interpolate size, um. I'm gonna mix them up now. Is that the allow keywords one?

Adam: It is. Yeah, that's one. I'm like, you rolled that right off your tongue. Real good. You must have practiced that.

Kevin: Uh, that one's another, like a nice progressive enhancement. Um, and there there's a lot of features that you can use like that. Then there's other ones, like Adam said, you can use that supports. So for some things I'll use that where it's like, I'll have a fallback and then come in with something a bit fancier.

Um, just in that case, if it would [00:34:00] break. The layout, let's say. So I'll use this other thing instead, but I won't go and make two versions of something I have to support. Like it'll be a simple fallback, then a little bit of a fancier thing. Um, and then, like right now, I probably wouldn't be using custom functions, uh, or my if statements yet, um, in production, just 'cause I'm assuming most, you know, most of my audience, even my audience wouldn't be, um, running browsers that can necessarily, you know, deal with those.

So it depends a little bit on. Or even like layers. The uh, for me, layers were a really big thing. 'cause I was like, this is one of those features that could be cool, but it just breaks your CSS if it's not supported. And so I was curious, when are we actually gonna start seeing it in the wild? Um, and it's cool seeing it in the wild now, even on some, some decent size sites every now and then.

If I'm poking around, I'm like, oh, they use layers here. That's cool. Okay. Uh, so it's with features like that, that I find it interesting, but a lot of the time I do try and do things as a progressive enhancement if I can. 'cause it just lets me squeeze [00:35:00] in cooler stuff.

Paige: ~Yeah, yeah,~ it's a little bit of extra for people who can support it, and for everybody else, it just looks the same as it would've before.

Adam: But you, Paige, when do you adopt new CSS features?

Paige: Uh,

Adam: or your company, either, you know.

Paige: usually when Chrome supports it, 'cause I think the vast majority of our users are on desktops for, for what we do. Um, and Chrome is pretty much the one that we. Guide people towards, because it has web APIs that support like serial connections and some other stuff that really, unfortunately Firefox and Safari just don't do as well with.

Um, so yeah, I mean most, most of the time I'm the one who's doing the CSS me or one or two other developers. So whenever we. Come across it and find a reason to use it. We'll try to, but, uh, yeah, it's not, we just don't have a whole lot of like, design-focused stuff that we're doing as much as other features that are specific [00:36:00] to IOT devices, because that's the company that I work for.

Blues is an iot startup. So less about the nice, really beautiful SaaS, uh, dashboards and more about the internals and the underlying workings. One thing that I did wanna ask you about, 'cause I think you guys probably know more, is there's a relatively new app property function that has come out, and I was wondering if you could talk a little bit about what that is, what it does?

You know what, what would we use it for?

Adam: Nice. I have given a couple talks on this. Um, maybe I'll give you a link to show notes. One I did at Epic Web is a five minute lightning talk on app property. Um, app property is a way for you to both make something type safe, uh, in your custom properties. So that would be like, if you're like, this is a color, so it's, it's name is app property, you know, our brand background.

Um, and someone later sets it to. You know, a number like 30 that would, [00:37:00] in today's variable usage, um, break your color system. The colors would disappear from everywhere. Um, and you'd be like, why? And it'd be because, well, you put an invalid value in there and CSS just keeps painting. You know, it's like, oh, you tried to paint zero.

That's nothing. So you got nothing, you know, and it just moves on. Um, but app property allows you to also make something type safe by specifying the accepted types that it is. So CSS being a typed language already had types prepared before the syntax showed up. This just gave us the ability to tap into it.

So now I can say, you know, our background color is a color type and someone tries to set it to 0, 0 0, and our color system continues working. Um, it always will resolve to its last known valid value, which by the way, what if JavaScript had that? What if JavaScript had a way for you to not just make it type safe at build time, but also like at runtime, it'd be like, Hey, you tried to set me to a null thing that would break this upstream thing.

I'm just gonna keep my current value. What do you think about that? I'm like, that's kind of nice. I don't know. I'd have stale values everywhere, but it's better [00:38:00] than apps crashing. Uh, so then there's one more feature. So in addition to type safety, uh, well, it actually has more than one feature, but I think the core features here is type safety in your type systems.

Or in your, um, variable systems. And the second one is you can now, since it's typed interpolate values inside of it, so traditionally just like var var can be zero. And then later you can be like, VAR is string. I am cool. And then later var is a function and var is just like, I'm adapting to whatever you sent me to.

That's how CSS variables are. However, uh, a CSS variable, if you want to animate it from, like, let's say you set the variable to zero and then you set the variable to a hundred, and you're like, I want to animate that, or just show it on screen or whatever. I want this to interpolate over, over one second go from zero to a hundred.

The browser will be like, eh, it can't. And you'd be like, what do you mean you can't? That's so obvious. And it's like, no, I'm a loose typed variable and I can't really depend on the variable. I'm going to to be the same as what I am now. So that means I don't even [00:39:00] know how to interpolate that or whatever.

And so then now you type it and you're like, well, now you're an integer. And it goes, oh, I'll go zero to a hundred now a piece of cake. I know for a fact that every single iteration along the way, I'm a number, boop, boop, boop, boop. And it does the, so you can kind of like by being very specific about the type of a vari a variable, they get more useful and more places.

They get animatable and more places. You can almost take a, like a scalpel idea. Instead of animating a property, you animate a custom property that then you can put wherever you want. And so now every time you animate that custom property, they all update and you're like, whoa. CSS rules. And it's all type safe.

So you kind of get a lot of bang for your buck in this little definition. The annoying part being it's a little bit verbose to define all your variables this way. Um, but anyway, that's my high level shindi on it. What you got, Kevin?

Kevin: Yeah, no, that was great. Uh, I, I still, I use it a lot and I still feel really weird every time I transition or use key frames and I'm just changing up custom property value, I'm like, this just looks kind of strange, but hey, it's, it's working [00:40:00] and it does exactly what I want it to, and I'm very happy about that.

Um, the other thing that I didn't realize would ever be important, because one of the other things you can define is whether it inherits or not. 'cause normally custom properties always inherit and you can say, inherit it's false. And I was like, why would I ever wanna do that? And then since then, it's definitely one of those things where every now and then I'm like, oh wait, this problem is happening because this value's being inherited and I can turn that off now.

And now it fixes this problem I had where I was having conflicting values. 'cause since I'd be using like a fallback value or something like a custom property with a fallback value. So then the inner versions could continue using that fallback value, whereas the outer version would be using a defined thing on it anyway.

Yeah, it's one of those definitely more niche use cases, but you're super happy that they included it 'cause it, it can be useful.

Adam: Yep. Glad you covered that one. It's a good use case.

Paige: For sure. That's so interesting. I had no idea. So I'm actually really glad that you guys could give me a, a high level primer on it. [00:41:00] So what are some other features that you would like to see CSS start to support in the future? Like if you had the, the sky is the limit, you know, your favorite things, what would you like them to focus on next?

Kevin: Oh, this is a hard one for me 'cause I can never think of good things. And then I always hear other people listing off stuff and I'm like, oh, why didn't I think of that? That's a great thing. And this is going back to like eight years now with like all these new things that are being added. And I'm always like, how did I not think that would be useful?

Like, that's amazing. But uh, I'm just always like, happy with what we have now. Um, I think the big one. Like I'm playing around with like the, the custom, um, functions. I'm just like, oh, this opens up a few things that there was limitations on that. I think like, or, and like the, with the data attributes, um, the custom attributes now that we can do some more stuff with, and I'm just like, I.

It's almost like we can start creating a lot of our own features that we might wanna have. So I'm just like, this is really powerful and cool and like I'm curious to see uh, sort of the [00:42:00] other things that will come down the pipeline that can build on top of this as well. 'cause I think that's sort of a lot of the advancements we've seen lately have been like.

You know, once they figured out how to do con or was it even container? What was the thing that made container queries possible? Or is it the other way around? I don't remember. But any, you'd see a feature come out and then like all of a sudden they're like, wait, that means these four other new things are also possible 'cause we've solved this other problem.

Um, so yeah, I'm, I'm more curious to see what's gonna come. Uh, but maybe Adam has some good ideas. 'cause he's more creative than I am when it comes to all the stuff he's up to.

Adam: I was also a part of my job was

Kevin: Yeah.

Adam: uh, extract these out of human brains and get them into the CSS working group. So I ran a lot of interviews asking people like, what can't you do? Um, and we've got a lot of 'em. So that. Kind of immediately knocks a lot of 'em. Uh, for me, off the top of my head, like sibling Index was, that was one of mine that I pitched a long time ago.

And I, it sounded like it would never get built. And then all of a sudden someone's like, oh, we're gonna do it. Sounds easy. I'm like, yeah, um, all my staggered delays are gonna love this. [00:43:00] Um, but like some of the things I'm thinking of that we don't have yet that I'd still like to see, or at least. Evolve more like one that could evolve more are state queries.

So you can now query a container whether or not, uh, it's sticky snapped or sticky stuck, or if it's a scroll snapped, uh, or if it even has a scroll bar showing or not. You can ask a container, uh, these questions and they're called scroll. Well, yeah, they're scroll state questions. 'cause they're all three scroll related.

There's gonna be more of those. Uh, and they need help ideating what they are. Well, like a good example is in view. Is this container in the viewport or not? That's a pain in my butt writing that JavaScript. I hate that loop of JavaScript actually. It's really nasty. Uh, it's just a fire hose of data. You're like, go away.

Geez. I only wanna know if you're in view or not. It's very binary and it's like I'm in this view this much. Okay. Sorry. I'm complaining about, uh, intersection Observer. Okay, so state query sound cool. We got Sibling Index, another one I pitched a long time ago. I'm gonna be selfish and pitch the ones that I pitched that are built yet, [00:44:00] and one of them is motion blur.

Uh, it's just like a, it's like a, just a easy property to throw on an animation motion. Blurred animations look smoother, even if they're lower frame rate. Um, there's all sorts of cool value props for motion blur. And right now we can only simulate X blur and y blur with SVG or entire element blur, um, by blurring the entire element.

And it would be really nice to have a progressive motion blur or other types of motion blur. They're, they just create very cool visual effects and it's, it's CS, S's job. Hey, CSS, I want you to take this thing, do a little visual thingy to it. That'd be great. Um, fit text is another one. So the ability to like write a message into a sandwich board.

So you got a little sandwich board, you write a message and you just say, Hey, you know, line wrap where it makes sense and always fit the width and let the text height grow to whatever I want to. Cool. Slab text effect CSS. Just do it, you know, the content doesn't need to change. I don't need to add line breaks.

Just do it. Um. That one would be cool. And then like another scroll thing I've always wanted are, is like over scroll effects. Um, [00:45:00] so things like, uh, the elastic thing that happens at the edges. And so I always simulate this with scroll driven animations. I leave all this empty scroll space on the edge of my scrollers so that you can scroll to towards nothing, and then you let go and it snaps back.

And I'm just like, that's just good feedback to a user that, hey, you're at the end, you know? Um. So it'd be cool to kind of give us more capabilities for that, or at least, uh, in Chrome specifically allow us to do that on nested scroll areas. Right now, safari and Firefox, if you make a little tiny scroll bar, uh, scenario in the tin center of your screen and you scroll up and down on it, it'll bounce at the top and the bottom.

And on Chrome, if you do that little one in the middle, it bons its head and just, ooh. It was very awkward. But the root school or the one on the main page, that one's bouncy. So you're like, Hey, you got the bouncy code. Apply it everywhere. I would love that. Um, so those are some things I'd like to see.

Paige: I love those. Isn't that awesome? I actually, the, the sandwich board one really is appealing 'cause you see it so many times, it just doesn't fill the [00:46:00] space or it flows off or something like that. And just having it just grow to fit whatever space it's in, that'd be awesome.

Adam: Yep.

Paige: Well, guys, it has been wonderful talking to you. Is there anything about the state of CSS this year that we haven't covered that you think developers should be aware of or know about?

Kevin: think my main bit of advice is to like, if you're not, if you think. You're, you're trying to implement something and you've always used JavaScript for it before, just do a quick search and see, uh, uh, if you can do it with CSS now 'cause there's a good chance you might be able to, uh, yeah, I think that's definitely worth doing.

Uh, 'cause I'm always surprised I put out content where I'll mention like a feature that I've taken for granted forever. Uh, I did one recently on object fit. And it exploded. And I'm like, I guess lots of people still need to hear about this and I have to keep reminding myself to like talk about things that I've been using for five years.

So, um, yeah, there's a lot of solutions out there that I think a lot of people aren't aware of, and the browser support [00:47:00] for a lot of them might actually be pretty good, even though we've been talking about some really cutting edge stuff now, there's still a lot of other stuff that is out there that I think not enough people know about.

Adam: Nice. Yeah. Nailed it on the head. I'd say, you know, if you're wondering what's new in CSS do, do one new feature a week. Just to sort of like slow, slow, drip your way back into what CSS can do these days. Um. And if you want, if you want more than that, there's always like listicles and things that sort of break 'em all out and you can and attack 'em that way.

But yeah, I, I like what Kevin's saying. Um, look to see if CSS could do it before you go to JavaScript. H Tm l and CSS are doing more and more of JavaScript's work every month. Um, and it's easier on you as a developer. You know, you get to, anyway, there's all sorts of benefits to staying on top of these things.

So yeah, maybe consider a, a weekly digest of one new Cs s property a week or something, or subscribe to some newsletters. Maybe there's people speaking on here that have them that, uh, can send you this for you. So if you don't wanna go look for it, people will put it in your inbox.

Paige: Even better. [00:48:00] So if, if people wanna get in touch with you, where can they, where's the best place to find you online?

Adam: I'm at nerdy.dev, uh, website.

Kevin: I am@kevinpowell.co.

Paige: Fantastic. Well, again, thank you guys for joining us on the Log Rocket Podcast. It's been a pleasure talking to both of you.

Adam: Same page.

Kevin: Yeah, it was blast. Thank you so much.