Wanna see a CSS magic trick?

Ryan is joined by Chris Coyier, founder of CSS Tricks and CodePen, to talk all about what the state of the art of CSS is today, including new features like variables and scroll-driven animations.

January 30, 2026

Wanna see a CSS magic trick?

Ryan is joined by Chris Coyier, founder of CSS Tricks and CodePen, to talk all about what the state of the art of CSS is today, including new features like variables and scroll-driven animations.

They talk about the importance of accessibility in web design, how the web went from table-based layouts to modern CSS techniques, and exciting developments coming to CodePen 2.0.

Chris built CSS-Tricks, a website all about building websites, and ran it for 15 years, from 2007 to 2022, before selling it to DigitalOcean.

CodePen is an online community for frontend developers where you can build, deploy, and show-off your code. CodePen 2.0 is their all-new IDE that is currently in private beta.

Check out Chris’ blog and his podcast ShopTalk.

[Intro Music]

Ryan Donovan: Hello everyone, and welcome to the Stack Overflow podcast, a place to talk all things software and technology. I'm your host, Ryan Donovan, and today we're talking about CSS, the lesser-known, perhaps, of the big web technologies. But my guest today is Chris Coyier, who is the founder of CSS-Tricks and CodePen. We're gonna talk all about what the state of the art of CSS is today. So, welcome to the show, Chris.

Chris Coyier: Thanks for having me, Ryan. I can't wait to do that. Wow, man. Lesser known of the languages, that's true. I guess that's true.

Ryan Donovan: Yeah. It doesn't get the glory that I think JavaScript does.

Chris Coyier: Oh, certainly not. Yeah, certainly you can't beat big JavaScript, for sure. Yeah, yeah. I'm Co-founder of CodePen with my Co-founder Alex Vazquez. And yeah, I was the creator of CSS-Tricks. Still am the creator of it, but yeah, Digital Ocean owns it now and are doing a pretty good job of running it with my old editor, Jeff Graham. So, high five, Jeff. So, I don't know, you tell me about CSS-Tricks. You told me that this doesn't come up on the show that often.

Ryan Donovan: Yeah.

Chris Coyier: It is funny to me though, that it's on every website.

Ryan Donovan: Absolutely.

Chris Coyier: There's no alternative styling language. It's like, this is what you have.

Ryan Donovan: Well, back in the day, you just attached whatever styling directly to the tag itself.

Chris Coyier: Yeah. I didn't really make websites totally pre-CSS existing at all. I do remember that what people talk about is table based layout, which is fine, but that kind of co-existed with CSS for a while.

Ryan Donovan: Sure. Yeah. I think that the first websites I made were very much a series of tables. That was the state of the art back in the day.

Chris Coyier: It was, and it made some kind of logical sense. Spreadsheets and things go where you want them to go, and all that, and it's a little bit of a modern miracle that we were able to convince the world that that's too static, and that it's not flexible enough for the web, and stuff, which is now just like widely understood, and it's not done that much anymore. Also, an unbelievable twist of fate that that's still how emails are made.

Ryan Donovan: Yeah.

Chris Coyier: Shocking in a way. They could probably write a novel about that.

Ryan Donovan: Well, I'm sure with the state of the art right now is like a stack of divs, right? Could you do that in an email? Is that exploitable?

Chris Coyier: You can, it's just there's a few things that don't work in, because people think of the browser landscape, certainly during our comeuppance, that we, the browser wars, was very– people still think about browser support as they should, maybe less than they did at one point.

Ryan Donovan: Sure.

Chris Coyier: Gosh, there's so many browsers, and we have to support them all. What a hard life for us. That is nothing compared to email client diversity. Oh my god. Email clients are crazed. But there's still—and Microsoft is quote unquote to blame for this with really old versions of what is their main one... Outlook or whatever? But Outlook had some of them that, if you haven't heard this before, it sounds crazy, but it's true. It used Microsoft Word as its layout engine for emails that had some HTML support in it, but it was pretty weird. And so, still to this day, some versions of Outlook still use that rendering engine. The thing that you can't do with a div is smash its width down as much as you might want. And that even if you're trying to get fancy with layout, it's not like it's not gonna understand your div, but without tables, you don't have a mechanism for limiting the width of the email, which just that alone can be a non-starter.

Ryan Donovan: Especially with the emails within a sort of larger program on the web.

Chris Coyier: Yeah, totally.

Ryan Donovan: All right. Still good to deal with tables. It's funny you bring up Microsoft Word. I've done a couple Microsoft Word things. We use Save It as an HTML file, and it always produced the junkiest, most cluttered HTML, because it put all the style stuff within the tags.

Chris Coyier: Yeah. In a way, it didn't care. That's like a weird use of HTML, but I do kinda like it in that HTML, it's just an agnostic thing. It's just a tool. You use it for whatever you want, and in 99.9, all usage of HTML is just to make a website. And that's what's going on here. But its job, in this case, was to faithfully replicate that document that you built in Microsoft Word. It wasn't so much to be a Wikipedia page or whatever; it had a little bit of a different job at that point.

Ryan Donovan: Yeah. It wasn't meant to be human-edited.

Chris Coyier: It really wasn't.

Ryan Donovan: So, we've come pretty far from when I first made my first websites that's pure table-based, and we have CSS, and I think the last time I looked at CSS, it's just getting so much more robust. One of the last things that I saw that surprised me was that I think there was, somebody said, 'CSS is a fully complete programming language with conditionals, Turing.'

Chris Coyier: Like Turing complete or whatever?

Ryan Donovan: Yeah.

Chris Coyier: Maybe that has come up recently because some of the very, very latest stuff, and I'm talking like, in the last few months really–

Ryan Donovan: Yeah.

Chris Coyier: Is that there's like an 'IF' function in CSS that has dropped, and the way functions work in CSS—and always have, for 15 longer, since you've been doing—is, even like URL with the parentheses on it, that's a function in CSS. There's a lot of functions now, more and more of them, but the way functions always work is that they return one value. And so, IF is no different, IF is perfect for that, it's, ' IF some condition, then return that one value.' 'Else' return some other value, and it has some 'else if' mechanism in the middle of it too. And CSS is such a strange language that it's not really top-to-bottom executed necessarily. So, it has some quirks and stuff in there, but for the most part, it makes sense. And the conditionals that you have access to within IF aren't just, ' IF 10 is bigger than five,' or whatever. It's different than that. You have a couple. 'Media' is one of them. So, 'media' is yet another function within it. So you can go, 'IF' and then inside the parentheses you can say 'media,' and then media has its own set of parentheses. And then you put a media conditional, like if the width is—and width refers to the entire page width—is wider than 500 pixels or whatever, then return the value red or something. That would be weird, but you could do that.

Ryan Donovan: Right.

[...]

Original source