Modern CSS in Real Life with Chris Coyier-2
===

[00:00:00] 

Test, test, test. I heard myself say that. Is that weird?

I, I think I can hear you through something. Oh, is that your speakers only? Test, test, test. I believe so. Hi, and welcome to PodRocket, a web development podcast brought to you by LogRocket. LogRocket helps software teams improve user experience with session replay, error tracking, and product analytics. Try it free at logrocket. com. I'm Chris, and today we have Chris Coyier here to discuss modern CSS in real life.

He's a co founder of [00:01:00] CodePen, co host of the ShopTalk

Yeah, double chrises. What's up? Happy to be here.

Chris,

Ooh.

you're, you're, you're Chris 2. 0. So outside of that extravagant intro I just

Oh, not really. That was a good intro. Yeah, most of my time spent on CodePen these days. It's kind of a social online web development platform kind of thing. We're gunning for a 2. 0 of sorts here when when we can. So a lot of my Time and effort and thought and everything is is based on that got my own podcast as well shop talk show with my friend Dave So so I if I sound good, it's cuz I've been I have a nice microphone

You have quite the setup for sure. For sure. So I see CodePen, I see CSS tricks. These are like very nostalgic for me and I still use them like, even to this day, like CodePen has always been like,

Mm hmm.

my [00:02:00] debugging tool for like CSS more or less. And when I see like someone like when you founded these two things, it's like clearly CSS is a big part of your life.

Like

Yeah. Yeah,

how did that happen? Like, why is CSS

have CSS tricks anymore That was that was a big part of my life for a long time though, but That's right. It was a little over a year and a half ago

How about the DigitalOcean,

anyway, but that, that was, you know, part of my, I like CSS thus ended up kind of a CSS blogger kind of thing, but you know, those things kind of fuel each other, but it is an interesting question to think why is CSS so important to me, I mean, I think anybody could grow to love it.

It's like, it's a fun language that allows you to. I don't know, design things on the web, the web being this just massive place that brings people together. And it's just, it's just kind of fun. And in fact, I always thought of it as like, how it's, it's both artistic and nerdy in a way. And I've always had those two kind of sides of myself where I, you know, I ended up getting a [00:03:00] degree in college and art.

So I've always been into that. Psy, that expressionistic side, but I'm always been a computer nerd too. And CSS, you know, is the perfect language that ends up being both. And that, you know, I only discovered that kind of thinking back on my life, kind of being retrospective about it and being like, Hmm, I do like both those things.

No wonder I found something that is both, but also as a language, it's like, I don't know, well, you could be really into niche things too. You know, nerds are great at, at that. Um, in the web itself, yeah, maybe you could argue as a niche in the, in the grand scheme of things, but if that's where we're scoped, CSS isn't niche, every website has CSS on it, all of them, you know, there's probably like a very tiny handful you could point to that, you know, are either ancient or somebody is intentionally trying to do something weird by not having it, but it's like not optional of all the languages out there that, uh, are meaningful to the web.[00:04:00] 

Isn't that significant in a way, you know, WordPress has some massive product share or, you know, people like to talk about new, interesting frameworks, all that stuff is, is interesting to me too, but isn't it notable, do you think that CSS is a part of all of them? No,

Well, it's like, it's, it's, you basically can't avoid it, right? So it's like, even if you have a love hate relationship, like, it's always there. You're gonna, you're gonna have to, it's like, like that family member you don't like, maybe, at a holiday party, like, you're just gonna run into them and have to make it work?

or whatever. Yeah. And there's ways to avoid it. I mean, using. Frameworks that say, Hey, just, just do your HTML this way, use these classes and it'll turn out well. That's a, you know, a pretty efficient way to avoid doing. I don't blame everybody. Not everybody can know every single thing about the web.

And if that's one of the things you want to punt on, that's understandable. [00:05:00] But any kind of serious web team is going to need to tangle with CSS at some point.

I agree. I agree. So this is an interesting question. So this is something I really don't think about too much when I'm writing CSS. Like how does like modern CSS today, like actually improve like the user experience, um, you know, for your users. Cause when I write CSS, I think more of like a DX perspective, like, Oh man, like this is so hard to do versus me actually like thinking about, you know,

well, that's a good,

side, like what, what are like

it's a good point to bring up UX, you know, not to say versus, but let's say versus DX, you know, that they don't have to be opposed to each other and all that. But it's true that it's like, no user cares that you're using CSS grid. You know, like if you like it because it makes CSS easier to write and manage and deal with, that's wonderful.

But it would be [00:06:00] a little bit of a stretch to say that the CSS grid APIs are a direct impact on. UX, unless you're trying to paint that picture that good DX equals good UX, which some people make. And you know what? I don't hate it. Like some, sometimes I think, you know, if we're really efficient and doing a good job as developers, thanks to good DX, that it does help us deliver better UX.

You can also make some connections to like the website being less code. So, you know, for example, if you needed a, like a hide show mechanism, like click this, reveal this, there's probably a pretty long history of the web that says like, well, we're going to need JavaScript. And then who knows what tangled JavaScript you do?

Like maybe it's a very tiny amount of JavaScript, or maybe you've chosen some big, huge framework just because you knew you would need to have some interactivity like that. And let's say all it did [00:07:00] was. You know, turn an arrow sideways and reveal some text underneath it. And you chose a big, heavy framework to do that.

And then some future version of yourself is like, Oh, wait, I can just use the details element in HTML and do that instead. You could say that translates to better UX for users. Because the performance of the website is better because you're loading less JavaScript to do that, you know, like I think that picture is, is perfectly easy to paint, not to mention a lot of times when you use, you know, I'm lumping HTML into the CSS discussion too, but I feel like they're.

you know, their brothers, you know, their sisters, let's, you know, that's fair enough, you know, that there are some things that when you do it with just those technologies, they end up better UX to like, for example, in, in HTML, there's a, uh, there's a new dialogue element that, You know, when you, when you use it, it's, it's kind of for showing modal experiences.

They don't [00:08:00] have to be modal. What modal implies is that it's the only thing the user can do at the moment. So for example, you hit, I don't know, command S on a website and it brings up a save dialogue. And it's like, well, I save a new version or save the other version. It wants, it wants your, all of your attention.

And there's a, you know, a record. Tangle in the middle of the screen, asking you that question. If you're doing that in a web app, there's like kind of good and bad ways to do that. But if you use the dialogue element, it's really easy to use relatively new. It's going to do all those things for you. One of them, for example, being like focus traps, meaning that like a screen reader user has.

The focus has moved into that dialogue. And thus it reads like, would you like to save a copy of this style? Some very important message and that they can tab around in there to the options of what they might be able to do, but not leave, not accidentally tab out to somewhere else randomly on the page.

It's like keeping the attention in that area where it's intended to be. That's like a. [00:09:00] Accessibility requirement that without using the native HTML dialogue element, you can do, but it's been referred to as like boss mode and accessibility, like it's hard to pull off focus traps is, is no joke to kind of write yourself in JavaScript.

So there are moments. Yeah. Right.

Yeah, that is insanely difficult. So I didn't even think about it from that perspective. It's like from like a US, from a UX perspective, you could effectively just load, stop, do less things in JavaScript. Right. Um, which, which makes you load less and page loads faster potentially,

that's becoming more and more true. It's not just like one. There's one little thing you can do in HTML and CSS. Now they're starting to be more and more and more and more of them. You know, anchor positioning is relatively new in CSS. That was a really tricky, weird thing to have to do in JavaScript.

You're constantly measuring. Where things are on the page and adjusting things depending on where the [00:10:00] edges of the screen are and stuff. It tends to be a pretty heavy JavaScript thing to need to know. And now anchor positioning lands in CSS. And you're like, put this element by this other element. Got it.

Cool. No JavaScript involved. You know, that's a, that's a big one. You know, and when you start adding them up, it's bigger and bigger. I mean, not to jump into too many different things, but, but view transitions is a relatively new one too, where you're like, I'd like this. I don't know, perhaps this movie, when you click on it to expands into a larger version of the movie, as you go play it on a, even at a different URL that that can be done, even in just HTML and CSS these days, now that's only dropped in Chrome, but there's, you know.

talk about making it one of the interoperability things for 2024. So it's not that far off and it can be one of those big deal things that requires you to load less JavaScript for and potentially increase UX while we're at it.[00:11:00] 

Yeah. The view transition API I think is pretty insane. Like I, I didn't really know about it until Astro kind of baked it in to their framework and I was just like, what? Cause obviously like it's an MPA or whatever and I was like, well, you can actually like have these seamless transitions. Like so is that kind of like the trend, like you just think the browser is going to slowly kind of just inherit a lot of this complexity and like you said with like the anchor positioning, like tethering elements together is like super annoying.

Like tooltips is like. The bane of a lot of people's existence. You're like, you know, you're tracking the X and Y and making sure the tooltip is always like

web platform at its best. I think that's what they've always said that they wanted to do. There's these old phrase, this old phrase called pave the cow paths. And the idea was, well, you know, we see a lot of people are doing this. That's the cows walking along a path, right? Like everybody's implementing their own tooltip library.

Look, um, here's 10 of them right there. You know, here's, you know, it's been implemented and react 15 times. And here's a view on and [00:12:00] bootstraps got it and all this stuff. And they're all, they all do it on their own. The cow path has been paved and then the web platform steps in and be like, okay, I see what you're doing here.

We're gonna, we're gonna help. They're going to pave it. They're going to make it the official way that that's kind of how the web platform should work is look look at what authors are doing Okay, you've proven it by doing it a lot of times now will help you. Yeah

so I'm curious here. So like when there's like JavaScript changes, there's obviously like the TC39 that kind of like has proposals and stages. How does, how does that work for like the browsers? Like, do they just see everyone's kind of complaining

Yeah, that's true that,

official

JavaScript has its own kind of path, doesn't it? And I think that it is, it is different and perhaps intentionally different. As far as I understand that world, people like make proposals and then they're, they're talked about and discussed and some of [00:13:00] them move on and some of them don't.

And yeah, I think when it comes to HTML and CSS, it's a little different. I'm not super involved in that. So I don't know that I can caveat, you know, here, I don't think I can speak super intelligently towards it, but I do know that it comes from different sources sometimes, like sometimes it's authors that say, God, we really want this.

Please help us. Sometimes it's browsers that just say. Uh, we're going to do this, you know, like Apple's like, Hey, you know, our new design aesthetic has lots of blurring in it, or our new design aesthetic has reflective floors or something. And they just add something to CSS. You know, I remember when the, the iPhones came out with, it had a notch at the top.

They're like, we need a, but we'd like to fill that top area with colors. Still in CSS, they shipped what they call, you know, basically they're. Environment variables, it's an ENV function. And they said, you know, if you need to push something down from the top of the [00:14:00] screen, as far as tall as the notch is, you can use this value that came from them that didn't come from authors being like, wow, what are we going to do or something?

And even sometimes spec, you know, it's, it's a little bit more like JavaScript where we're spec. Type of people that work on how the web should be say, I've got an idea that I think could be better so that the source of it can be from anywhere, but it does. I, you know, I think there is a, a pretty official process to it all, um, that has been generally respected over to the years and should be, uh, should be pretty, uh, applauded.

You know, if, if browsers literally just did whatever they want all the time, with no regards for the standard process, boy, we would be in, we would be in rough shape.

Would be at their mercy, just running around and

don't know, it's possible that. Some of them even win, you know, like if Chrome is, has a [00:15:00] huge amount of share. So if they were the ones who went the most rogue and said, ah, we're just, we're going to ship something every week, some change to the web platform, it would just be a mess because a lot of developers would just choose to use those things.

And they would write code that didn't care if, if anybody that wasn't using those browsers could use it or not. I don't even know where we would end up. I, I hate to think about it because it would just be a, it would be a real mess.

Yeah, it's just, that's, for me, it's just crazy to think about, like, they can, I don't know, I just feel like at one day they should be like, we do this and we're just like, okay, uh, let's. I guess we, we adjust maybe. Um, but anyways, I did want to segue into like, kind of transitioning from like how we do things, how we used to do things to kind of like the modern way

Hmm. Mm

to do certain things.

Like for instance, like logical properties, I'm honestly [00:16:00] like not too familiar with it. I looked into it and it almost like, it kind of confused me initially, um, with how some things are named.

I could probably do it pretty quickly. I think.

talk to

It, it, you know. 10 seconds. Yeah, it the logical property is the, is the, the direction of the, the text flow on the page. It all starts with the text. So in English and Spanish and French and all these languages, it, it's, you know, top to bottom, right to left, I mean left to right.

Ugh, I screwed it up. So that left to right part is the inline direction. The top to bottom part is the block direction that those key words. Is all is pretty much all you need to know inline direction and block direction. And if, if all you ever do is make English websites, you're talking left to right and top to bottom with those directions.

So instead of writing margin, right, you write margin inline end. And that is very weird the first time you see it. And you're like, what the heck? Why? I don't know. Like it's just weird. And [00:17:00] they are, they do tend to have one to one matches. So you don't write padding top. You write padding block start and you're like, that's more words, you know, it's different than what I learned, whatever.

So why would you bother with all of this? And one of them is translation. And I, I think it's not to be ignored on the web. And it's not because your boss is yelling at you and says, Hey, we're going to ship this page in French next week. It's because there's. Tons of tools out there that automatically do this.

And I've looked at the numbers for me. There's even something like 700 million page views of just translate. google. com per month. Then there's those browsers that don't even hit that website because Chrome will just automatically. Translate a website, and there's a Firefox version of it. And there's another million people that use the Chrome version on Firefox.

And, you know, there's all these tools that do this job for you. And they might switch the direction of the text for Arabic is a, is a big [00:18:00] example of that. It goes from left to right to right to left. And so if you translate a website, it will generally do a good job of changing all the words on the page, but it can screw some stuff up when the direction of the text changes.

So let's imagine a button. The button's got an icon on it and some text you've said you want to space the two things out. Maybe you're super hip and you're using gap for that in Flexbox or grid. Okay. You win. You're great. But a lot of people and a lot of legacy code, whatever, we'll take that icon and say margin right of, I don't know, 0.

5 Rams or something. I want to space out the icon from the text. Good job margin, right? You've done the job. Now you hit that button, translate it into Arabic. Boom. The text and the icon are now touching each other because the margin right is now putting too much space on the right visually side of that button.

It's just screwed up that button. All you had to do to fix that is not use margin, right? You should have used [00:19:00] margin inline end. That way, when you translate the website, it's now going to. The margin is going to push the other way against that icon. As soon as the direction of the text changes, the direction of the margins and the paddings and every other property that uses logical properties does that.

So all you had to do is use that different property. So if we all just were like, you know what, I'll just use those instead. When you go to translate the website, then which people are going to do, because hundreds and hundreds of millions of pages do that, they just get a better experience when they do it.

Like, isn't that just nice. It's just an easier thing to do. And as soon as you switch your mental model to it and every, all of everybody out here has switched their mental model on some things. When you learn Flexbox for the first time, it was weird at first. And then you're like, eh, now my brain kind of thinks like that, kind of thinks that I can line up boxes like that.

Okay. You shed the old model and you let the new model in your brain. It's possible to do that with logical properties, too. You shed your old way of thinking about property. [00:20:00] Welcome in the new one, which are largely just different names. And you get better outcomes fits with the grain of the web in a way, there are also, you know, the argument can be made that the, you know, how naming is hard and naming matters.

And, you know, like it's a little, another bit of a abstract concept. Some of the words used in CSS have been kind of fixed up with, with logical properties. And there's a little bit of like less weird things. You know, like there's like overflow X or something in CSS, which means like, Oh, in the horizontal direction, that's fine.

It's not like impossible to learn that, but the other way to say it is overflow in the inline direction, overflow inline. So now there's just the naming of CSS was just cleaned up a little bit while using that. So if you're learning CSS now, you'd probably learn it that way. And then the whole system of CSS just is a little more.

Logical.[00:21:00] 

Right. So I think that's like what kind of tripped me up because like, I've been doing CSS for a while, so I'm used to the X,

pretty much.

my understanding, inline is X, block is Y.

That can change. I hate to screw this

that literally like

change and change the writing mode in CSS to a language like traditional Chinese or something that has a top to bottom flow to the text, the inline direction now is why. Yes, it's exactly like that.

kind of like the Flexbox thing when you're like column or row? So then align items is like actually different? And I have to like remember that every time? Okay. That, that is actually like when things flip based on its context is usually like I sit there and I just kind of like toggle them, like hope and pray, which one's right.

Um, so you mentioned like if I was using gap for this button, so let's go back to the example you provided, you know, icon text. And you said, if I was using GAP, I'd be fine, right? But you said, [00:22:00] but some people don't use GAP. That's fine, like older, older sites. Would you recommend the default to always be using these logical

Well, that's a, that's a big one. Are you saying is like gap is just nice because what gap is saying is like, put the space in between these two elements. I do think that's, you know, I'd go for so far as to say that's the correct property to use in these, in these times. Like I do, I think gap is an absolutely great property and that, yes, it's, it's probably a little underused, uh, for the most part, but it's, you know, in order to get gap You need to be in Flexbox or grid layout.

So if you just have, you know, five P tags on top of each other in a blog post, it's hard for me personally, still, maybe there's a shortcoming of mine to say, Oh, that should be display flex, you know, and then flex direction column. Like it doesn't, somehow that doesn't, it doesn't feel right to be, to use flexbox on just a bunch of [00:23:00] paragraphs, something in my brain is like, yeah, those are just block elements.

Those should just sit on top of each other, which is the natural flow of the grid. And I'll, if I need to push them apart, I will do so with margin. Now, maybe I'm just old school, but margin block end feels better on them than making the whole thing use gap, you know.

Gotcha. I'm definitely guilty of, uh,

Yeah. Well, you're probably ahead

let me just use gap and then call it a day that I'll be evenly spread out. So this is a good segue into my next question. So you mentioned like your enthusiasm around like CSS grid, and this is something I struggle with. It's like, what are the specific scenarios where you would pick CSS grid over like Flexbox?

I feel like. I just use Flexbox for everything. Um, it's, it's like my like Swiss army knife. And I feel like I've been in so many situations where it hasn't let me down yet. Obviously it probably depends on my layout.

I heard a good take on this the other day and that, and it [00:24:00] was about how there is a lot of overlap between there's sometimes there's a lot of overlap between lots of different web technologies and the overlap. Isn't like a mistake. The overlap is on purpose so that there's, it's almost like, so that there isn't gaps, like if you made two layout mechanisms that were so different from each other, that you might leave something accidentally in the middle that you can't do.

And it's like the fact that they can do some of the same stuff has. I don't know, it's an abstract way of thinking about it, but it means that there aren't, aren't like layout gaps in between of something that you might want to be able to do. I'm exactly the opposite of you. I prefer to use grid and then, and then kind of fall back to Flexbox.

It just feels a little bit more natural to me in some way. Um, God, what, you know. I'm not sure too much what else to say about that. I mean, there's just unique [00:25:00] properties to both like Flexbox has a lot more natural wrapping, you know, and it's like if you're laying out things of like unknown size and you kind of intentionally don't care what size they are.

Like it's a, I don't know, a menu and each item. It's just as long as the text of the menu item is, and it's laying out horizontal. That feels very Flexbox y. Just let it be Flexbox y, that's fine. But any time you're, I'm thinking more about like, I don't know, more strict layout or something, like a card component, or I'm, you know, I'm trying to set an avatar next to some, some text or something like that, that, the chances of me being opinionated about how big that avatar is, Feels pretty big, you know, like that's 150 pixel avatar and I'm going to put it next to this big title over here to, for me to set that up in what I'm saying. I can do that from the parent level. Like from this div level, I can say this [00:26:00] thing has two columns. The first one's 150 pixels and the rest of them is just all the rest of the space on that. That feels good to me. Whereas in Flexbox, I can't do that from the parent. I have to like, be like, okay, that first element has a, you know, a flex basis of 150 pixels or something, the children are much more like a part of the layout story in Flexbox, whereas grid, I feel like I'm doing it all from the parent.

I'm like setting up how I want the elements to fall onto that grid. And something about that feels good to me.

Gotcha. So then let's

no sub

So there's subgrids, right? Like, um, yeah. So how do you,

don't know. That's always

does it simplifies the

Yeah, sure. I can. Like, I, I feel

examples or situations?

of like a recipe in the past where let's say you have this like kind of a cool looking design for a recipe that's got the title of the recipe and how long it takes to [00:27:00] cook and an image of the thing that you're making and then steps, all those things in the cool looking layout.

Is a grid and these things are placed in different places on the grid. Well, the fact that each step is a list item is already like, ah, snap, because if you, if you make a grid and then you say, okay, the title is in this column or the title is in this cell of the grid. The image is in this cell of the grid.

I can't take one of those allies, one of those list items and say, you go into that cell of the grid, because I can't, because the. The parent, like the UL or the OL is in the way I can take the OL or the UL and put it into a cell of the grid, but I can't pluck up one of those LIs and put it into a cell of the grid because it's not a direct child of the grid.

It's one too deep in the DOM. That's kind of where subgrid comes in in a way. And it says, you know, why don't you, it's not the world's best example of this, because [00:28:00] that, that, what I just described is like, you kind of wish like you could erase. The UL or the OL, and that's what display contents can do, which has recently gotten some improvements, which is nice.

So that works out nicely. Subgrid kind of helps here, but all subgrid isn't this massive big deal, but it is nice, what it says is if I take, like, let's say it's that OL and place it somewhere on that grid, it can be displayed grid too now. So hopefully everybody out there understands that. Like when you make a grid, any given cell of the grid.

Can also be a grid. You can, you can nest grids all the way down. You can have as many grids within grids as you want to, but you could say, I want that cell that I've already placed on a grid to be a grid too, but I don't want to like make new lines for the grid. Every time you make a grid, you got to say, what are the horizontal and vertical lines that make up that grid?

And with subgrid, you can just punt on that [00:29:00] and say, you know what, you know what, I want those lines to be the same as what the parents were. So if there's a line from the parent that happens to cut right through the middle of the thing, that's your grid line. So instead of having to redefine them, you just say, I don't know, just use whatever the parent grid lines were.

A little hard to describe with words. It's easier to see that kind of thing. But, uh, that's all it is.

Is it kind of like subgrid or

Yep. Exactly.

before it just didn't have any context of their parent before, like they had no idea. So now with subgrid, it's like, Oh, I can, I have context on my parent and now I can do, you know, I am aware of the dimensions of

it is. And it's just weird in a way that

go up and tall.

Yeah. Gotcha.

So yeah. Context. Sure.

I use grid, I just nested flex layouts inside of it and then like did whatever. Right. So let's talk about like component driven development. And this is actually like, uh, [00:30:00] Something I'm pretty excited about. And this is container queries. Um, can you kind of talk like how they assist in creating more like adaptable, like responsive

big deal, both for, hopefully for DX and UX, but I mean, what, I don't know. One way I've thought about it is that it's been a hot while now since JavaScript frameworks were, were, were on the, on the market. And it seems like everybody's got their favorite. You know, there's an absolute ton of React developers out there, but Vue's got its fan and there's a super svelte fan club and there's solid people and there, you know, and then there's people that will use whatever it takes for any given project.

Cause they just work at an agency. You know, but a ton of websites, especially when you ball all of those frameworks together, it's almost weird to me that they all agree. That you build things with components. None of those frameworks are like, no, we have a different way of doing things. We're going to do it this way.

They're all like, no, build components and then piece them together and nest them together as [00:31:00] you need to build a website. They're all in total agreement on that. In fact, the native web platform has a thing called web components that shares the same philosophy. You should build things in components and there's this, and I agree.

I think it's a wonderful way to build products. I think it took us a while to find that. As an industry, but we've found it now. That's how digital products should be built in components that make sense for your product or website or whatever it is, but they can be used anywhere. You know, if it's like a little news component or something, you have no idea on purpose where it could be used.

Like, is it over here in the sidebar? Is it down in the footer? Is it in the header? Is it in a modal? Is it whatever? And in a good design system might intentionally not care. It might be like, I don't know, it should just be designed so that wherever it gets plopped in and used it will be fine. The fact that you don't know where it's going to be used is fascinating.

It you have, it's just the, [00:32:00] it could be on the same screen that's, let's say your, your browser window is open and it's, right now it's 1,752 pixels wide, and the same component is appearing twice on there. One of 'em could be 800 pixels wide and one of 'em could be 200 pixels wide. And it's the same component.

It's just in two different places. That means you cannot rely on a at in CSS and at media query to make design decisions about how that component looks, because it's not, it's not a good proxy for that information. What is a good proxy is how big it is. And they're just until container queries, there was no way to know that information.

You couldn't write code that said, Hey, when this element is 200 pixels wide, I need you to have that flex box in that column direction. I need you to do that. The only way you could do that is exotic JavaScript that measured how large it was. And then pass that information somehow, some way to CSS so that it could make [00:33:00] that thing.

That was it. And now the container queries arrived and they've, they truly have arrived too. You can use them across Chrome, Safari, and Firefox, which is the big three. And they're shipped, they're in part, I mean, please go ahead and use them. That is now easy to write. So rather than writing at media. You write at container and you do it.

Now there's a little bit more to know, but not too much in that it's, you can't style the thing that you're querying. So if you say, I want, I'm going to test and see if this container is 200 pixels wide or wider, and then I'm going to make it red, can't do that. Cause you can't make. The thing that you're asking how wide it is.

You can't style that thing. You have to style one down the DOM. So you can, so a lot of times you just wrap it in another div. So you say dot card wrapper. That's the container. That's how wide I'm asking it. And then you style the, the div within it to be read or something. It's just a weird little [00:34:00] quirk of how container queries work, but you always have to style down the DOM.

You can't style the very thing that you're querying. Yeah, dude.

Interesting. I didn't know about that. Gotcha. That's awesome. Like, you know, like just like an example I run into all the time is like dashboards, right? You always have different tiles on your dashboard and it was such a pain in my life. I made a lot of dashboards in my life where, you know, people can effectively resize the panels to make the dashboard customizable.

And you're just like, ah,

That's such an extreme example. I wouldn't have blamed anybody for using JavaScript to do the job. It's just cool that it's now in CSS and better and, and, and lighter and faster. And just, that's just, it's just awesome. Now, yeah, I have a demo that has like a, a calendar on it. And if you have a lot of room, you can show the columns Monday through Sunday, and then like put little meetings and stuff on there and think of it as like a two dimensional grid.

But it [00:35:00] only works when there's lots of, of, of, of horizontal space and really vertical space. And you can write container queries in either direction. And then as it gets smaller and there's not enough room, it's like, ah, I got to give up. I got to give up on the two dimensional thing. I'm just going to smash it down into one column.

And I'm going to say Monday, Tuesday, Wednesday, Thursday, vertically, instead of, instead of horizontally. And it makes those choices based on. The size of itself, essentially, you know, just like your dashboard components. You're like, I don't think I can get away with a, you know, a plot chart here or whatever.

It's just, there's just not enough room. I'm just gonna, I'm going to abort and do a line chart instead or something. You know, those kinds of choices can be made.

Yeah. Oh man. So I'm going to ask this like, this is, this question is like, not really relevant to what we're talking about. Obviously it's like CSS and all this stuff, but this is, this is a place where I'm really ignorant in. And I'm very curious to kind of have [00:36:00] you explain it to me. So we talked about like the sRGB color model and the need for color models like P3 and OKLCH.

Honestly, those acronyms mean. Really nothing to me. So I'm curious, like, can you explain like why the S R G B color model

Yeah, you probably, everybody

R G B like all the time, so I'm just

Well,

what am I, what am I missing out

place to start

am I missing out

missing? Rather than, you know, getting into the science of it at all. And what you're missing out on is just, is colors that you can't represent any other way, which feels like a weird thing to say. But if you go back in history far enough, I think it is a little more obvious.

Like you can imagine like a super old school video game or something or really early computers, and you're like, man, 16 colors and there's a. You know, a little guy swinging on a rope in jungle hunt or whatever. Like you can imagine that. And you can imagine that those developers coding those super old school video games obviously didn't have billions of colors to choose from.

Like the programming [00:37:00] languages that they had, they, it just wasn't available, but it's, it's, it's unavailable in two places. In the language that they were writing and in the, but which was rooted on the monitors that they were displaying and those two things move forward in time independently. So the first thing that happens is that new monitors are built and those new monitors now, let's say the next one can have hundreds of colors on that monitor, then the language needs to be adopted to make sure.

That it has some way of expressing what those hundreds of colors now are so that they just move, they move in parallel a little bit and, and they don't move in sync necessarily, you know, it's like, why would we update the language if, you know, if the monitors aren't ready for it, well, you probably should run ahead a little bit, you know, and get ready for a potential future where, but that, but that's happened to us now.

So at one point. For example, hex codes got really popular as a way in the language [00:38:00] to describe a color. And the sRGB color space was so big and so good that it covered all monitors for a super long time. Until it didn't until monitors started to be shipped, which has now been number of years that can show colors way outside of the sRGB color space.

And it's our, it's, it's, it already happened under our feet. So if you have a pretty nice phone, pretty much any phone, but you imagine you bought the new iPhone or something, and you take a picture of the sunset. That photo, when you're looking at on that screen is totally not beholden to the sRGB color space.

It is already way beyond that and it looks freaking great on your phone, right? But if you use a color picker and grab a orange off of it or something, it's just Some magic is going to happen that pulls it back down Into the srgb color space and it's just going to be some lame Not [00:39:00] bright and vibrant sunsetty color to it.

That's just how color models work because They need to, because if you, you know, it can't just show nothing like that's, that's just like a bad place for color to be. So there's mechanisms in place that pull colors back down into the spaces that they can do. So the web decides, Hey, we better catch up.

Let's make a new color space called P3. That's, that's more capable of displaying the colors that are already being captured by things. Now, I, again, I, I want to throw up a flag and say, I'm not like a super color guy. I'm sure I'm going to say dumb crap. I probably already have, but this is just my understanding of it.

So if you're going to use a hex code on the web, it's in the sRGB color space, and there's nothing you can do about that. It probably will never change. It will just be an SRGB forever. But in CSS, we're like, but I want [00:40:00] access to those more vibrant colors. Cause, and you would be able to tell, even if you're not a designer, even if you're not as color guy, even if you're not, whatever, if you look at a vibrant pink in the P3 color space and compare it to the most vibrant pink you can in the SRG color space, you'll say, wow, you'll say, holy crap.

That's way pinker. It's just is your monitor is just capable of displaying colors that are just way. And they're all up there in the vibrant space. There's no like black or black. There's no gray or gray. That's not in P3 P3 is all up. It's all. You know, brighter, more vibrant, greener greens, blue or blues, you know, it's, it's all in the extra WA category.

And how do you, so how do you get a P three color it. You just need to use new C ss s to get it. So you mentioned O K C L H. That one's just been popular. I like it too. It's just one of the functions that gives you [00:41:00] access to the, the colors that happen to be in P three. Now this gets. A little weirder in that the color space is P3, but the color model is LCH in that case, and they're just like the, the, the space is like all the possible colors.

And the model is how mathematically they choose to design the model. And that's weird to think about, but you can't imagine, you know, remember the HSL, that's like an old school or way to do colors and CSS and the point of that lightness, lightness, I think. Right. So let's say you have a color in CSS using that, which is in the sRGB color space and you, in the last numbers, lightness, and it said 50 percent and you changed it to 75%, you'd see the color get lighter.

That's like a desirable attribute. Of a color model, like I can now programmatically do that. So I don't have to like ask for the, yeah, it's nice. Right. [00:42:00] LCH is just like that lightness, chroma, and hue. If I want to change the lightness of a color in that model, I just changed that first number. So it's has that desirable attribute of it.

It's just that the other numbers, chroma and hue are now capable of displaying. Brighter and more colors. Okay is, I don't even know what it means. It's just an improvement on the LCH model. It's very weird. I would just ignore it. It just is slightly better so people like it more. But it has this other cool thing.

If you had a blue color in HSL, the old school one, and you, and you cranked up the lightness, 10%, it'll become lighter. But if you do that on green or something, and then you jack it up another 10%, perceptually the difference in the lightness might feel different. I know that's weird to think about, but you might just be like unhappy with how the green is and like the blue.

And then you'd be like, crap, I guess I need to go up. 13 percent or something to get it to feel like they've both made about the same [00:43:00] jump. Um, with okay, LCH, that's not the case. They just did epic amounts of research that if you take both two colors, any two colors, and you jack up their lightness by 10%, they will feel 10 percent lighter both.

That's. It is. It's just good. It's just a big deal, you know? So not only do you get access to all this additional, these additional colors, but for design system work, it, the color model, this behaves better. And then there's one more it's that because of the, you can imagine like. Weird bumpy mountains.

That's the color model that they've taken all these colors and mapped it to. And they like extreme color nerds made that model on purpose because in the 3d space that represents all those colors, like in CSS, when you make a gradient, say, Hey, make a gradient from red to red to blue. The way that it does that is it just plots a line in math [00:44:00] from one color to the other color, a straight line, a different color models.

That line goes through different crap and sRGB. It has a really bad habit of going through gray on the way. Cause there's this big ball of gray in the middle of, you can imagine a color wheel or the vibrant stuff's on the outside and the grays in the middle has a bad habit of going through gray. So you're all a lot of the gradients in RGB, not all of them, but a lot of them just look worse.

Because they desaturate in the middle of a gradient, whereas in these other models, an OKL LCH is OKL, I prefer LAB. That's another one of these fancy Cs. The way gradients look, it's just way more natural. Like it'll, you can look at a gradient going from red to blue and you'd be like, yeah, that looks about right.

It looks about how your brain thinks those two colors should go between each other. And then you like go look at an sRGB and you're like, Ooh, why did you do that? That's weird. So now that's a new thing in CSS. You can do is you can say, Hey, [00:45:00] do a gradient, do it from red to blue, but do it in the lab color model, because it's just going to do another job.

It's just an additional thing. You can pass the gradient function that says what color space to do it in. And it just looks better. Wow. There's a lot of words on colors, but it's pretty cool.

Gotcha.

So like, yeah, today I learned that I am missing out on a lot of things. And I need to check those out, because, uh, everything you mentioned around like, I think the example that really clicked for me is like if you take a picture of a sunset, it just looks like it looks right

Well, here it was one more than it's not different, but it's going to be how things play out. There's been leaps forward on the web where it's a stuff of old looks old Like remember before high density screens and then there was a period where more and more and more people had monitors that had tighter pixels, you know a higher density display and then if you used Like [00:46:00] little tiny icons or something that weren't really designed for that.

You, they just looked a little blurry and crappy and you just be like, that website looks old. There's just like a little, a feeling you had that was just like, you know, everything's blurry and bad. That might happen with colors on the web as more and more websites take advantage of the new color spaces that are available to us, I think there's a chance that websites that aren't doing that look drab.

They have this like, Oh, that's just a little old looking, you know, I don't know if that will pan out exactly like that, because it's a little more abstract, but, but you can tell, you know, designers have called it a secret weapon, you know, when you, if you're selling some bold yellow product, if you're using this incredible P3 yellow color, like panic that has done with her, they sell this cool gaming device.

That's that's, that's, that's yellow. Their website is so. Bold and vibrant that it can affect you psychologically, you know, looking at that yellow website, you're like, [00:47:00] man, that is exciting. You know, I'm going to buy it. Yeah.

I'm gonna buy it, whatever it is. Okay, awesome. So, I wanted to close us out on this last question. Um, let's, let's say, let's talk about what trends do you anticipate in the world of

Hmm. That's a lot of stuff. I mean, it's probably a lot of the stuff we talked about, you know, I think view transitions is

give me your five year

I think it's going to be. Become part of the CSS toolbox of what people learn. They're going to say like, Oh, when this URL moves to this URL, when this page becomes this page, I need to sit and think about like, what do I want to move over and how, and I can say that's a, that feels like a desktop trend because that's how, I mean, next time you use your phone, just think for a second, how much stuff is moving.

When you click around and do stuff. And the answer is a ton, absolute ton. You open an app, it [00:48:00] moves, you click to another page in the app, it opens up or it slides, or it does something the mobile web and less of the web, but native mobile, everything moves. I think we're just going to see a lot more movie.

Web in the future. And you gotta be a little bit more careful on desktop. Cause there's just a lot more screen real estate and nobody wants, yeah, nobody wants 2000 pixels sliding all the way to the left, you know, you'd be like, so it'll be more subtle, you know, I think, but more and more that will just become the job of CSS is to think about which objects move and which objects don't and how I want that to work and view transitions is going to power all that colors are going to get a lot more vibrant.

Components already rule the web, but they're going to be more and more in that way. And they're generally going to be styled with component queries. I think it's probably possible that a website that's entirely built with components has only component queries [00:49:00] in use on it. Now that's important to think about too, that we also have access to container units as part of container queries, which means that now I can do things like size, the type.

Inside of a component based on how big the component is, you know, we've had access to viewport units and see us just like, you know, make a rectangle that's as tall as the browser window is those same kind of components or units exist for container queries. Like, how much is one height of this container?

That's a CQB, I think. Container Query in the block direction. A CQI is a Container Query Unit in the inline size. See how we've connected it to logical properties too? Ugh. Yeah, that's good. That's a good one. It's a good one

That's awesome. I did not know about that.

Interesting. [00:50:00] Cool. I mean, any, any, anything else that you want to add to that list? I am pretty excited for the, the view transition stuff though, for sure. Well, there you go. There's a, there's, there's, here's the last

Yeah, that's all. I blog on my personal site, chriscoyer. net and I'll link you to everything else that I do, uh, which is mostly CodePen.

Awesome. Well, Chris, I'll call you Chris 2. 0. It was a pleasure talking to you. This was, I've learned a lot. So thank you for coming on.