 Hello, and welcome back to the CSS podcast. And I can't believe that we're already at the end of season four. Four years of doing this. Geez, really? What? Oh, dang. I guess you're right. Yeah. Right? Wild. This season, we've been focusing on CSS gotchas and resolving these common CSS pitfalls. And on our last episode of the season, we're going to take a look back at some of those tips and tricks and pick some of our favorites to highlight in this recap episode. Honestly, the recap episodes are some of my favorite that we do all season. They're really fun. Yeah, they're like, open up our noggin and just give us all the information. We didn't listen to a single CSS podcast. We'd like to just get the footnotes. You're like, here they are. This is the footnotes, exactly. So for today's episode, we each decided to pick just our three favorite tips and tricks from the season. And there are so many, so I definitely recommend you listening to those episodes. But if not, we're here to catch you up. We've got your back. We've got your back. Yes, I'll start with one that I just think is so core to being a developer these days. And that is, how to center a div. We did a whole episode on how do I center this div. And I think we listed like 10 or 11 different ways to center a div. So definitely check out that episode if you haven't listened to it yet or seen it yet. But the favorite pro tip in that episode is just to do a display grid. And then either use place items or place content center, depending on if you want to align all the content as one or individually place them within the parent. Because that's how you do both vertical and horizontal centering at the same time with basically one line of code. I use this all the time. Place items is the magic word for me. Place content is Adam's favorite. But I still run into situations where I've tried place content here and there, and I go back to place items. I'm the same in the other way where I'm like, hey, items? That's not what I needed. No, that's so funny. It's so funny. We should start sending those to each other. Like, hey, look, I found another one where place content sucks. I know, and I always think of you now, too, or at least I know that you prefer place content, but yet again. And I used both on a demo the other day and was like, oh, look, we got both in here. I remember we talked about it on there, like, what are the times when you need that? It's like, well, you want the content to be centered items to be centered inside. I'm using my fingers like they're layout nodes. But she got a chunk of content, and then it's all text-aligned centered. But it's not text-aligned, it's item-aligned. Anyway, now I've just got a freak hand. Looks like a dinosaur. I did it a lot, too, when we talk. I talk with my hands. It's awesome. I think that one, that same episode, did that have the grid pile in it, or did we just? Yes, it did have the grid pile, which I absolutely love that term. Came from one of your articles that I read, grid piling. We just pile it all in one place before you position it. Loved that. It's like a football pile. There's like a ball at the bottom, and all the nodes just stacked on top of each other, and dog pile. Anyway, I used that one the other day, too. And I was like, oh, the show, we had this on the show. Nice, nice. Well, my first one is just because the more I went through Stack Overflow, and I knew this was like a silly thing from all the companies that I worked at and stuff, but you only need Zindex one or two. I'm like, I don't know. What situations? You need more Zindex. You're like, I got 99 elements, and this one's the 100th, so it needs 100. I also like a negative one when you want things to go behind. Yeah, that's a tricky one. I used that trick for a ripple one time. I set a negative one on it, and on the parent, I set isolation, isolate, which creates a stacking context or whatever, so I was like, this is a non-invasive way to create a context, which I can then paint behind the elements with a ripple. Yeah, nice. I've definitely done that for things like image effects with blend modes, or if you're trying to make a background to something like a border where you want the content above it, but you want the border to not be an actual CSS border, but maybe like an image or some kind of texture. I've used it for that. Awesome. So yeah, Zindex, you only need one or two, and if you're looking for more, create custom properties and just start creating a system. A system, that's a great tip. That's a great tip. I heard OpenProps has Zindices you could use, the system. It goes up to six, and then it has the important one, which is like a joke, and it's the maximum, and it's like, I don't know if all those fellows, you can try this custom property, but I doubt it's gonna solve your problem, but it's fun to put in there. We're totally going off script here, but another thing to note is how important works, and that really changes the cascade layers and your mental model. I think we have an episode on cascade layers also that goes into all of that. If not, we definitely have written about it and talked about it before. So, because how important might not work the way you think it works. So check that out too. It still might not work the way I think it works. Everyone's like, because it flips the cascade, and I'm like, yes. It flips the cascade, exactly. Because I have a really strong mental model of the cascade in my mind that I can easily invert, which creates understanding, and I'm like, I'm still a little lost. I just have to go try it. The lower precedence layers with that important flipped the highest precedence. So something like the user agent style by default has the lowest precedence before the user styles that lay on top of it, before the developer styles lay on top of that. But when you have that important in user agent, it's the highest precedence. And then vice versa with user agent styles, if they're important, they're highest. Then it's the user's preference styles. So user styles with that important are the next highest. Then it's developer styles that are layered because layered styles have a lower precedent than unlayered styles, but a layered important has a higher precedence because it flips the cascade. Flipped it, yeah. So. That was really well done for just like off the top. I'm just trying to memorize. Like I diagram this one time, and think about that diagram every time I describe it. But we'll throw the diagram in if you're watching on YouTube so that you can see me trying to by memory describe this diagram and failing without it in front of me. Oh, what's that song? It's the Missy Elliott Flip It and Reverse It. So that's what you're doing. Flip it and reverse it. Okay, you just kind of put that thing on there, flip it and reverse it, and then you know what important is. Yep, that's exactly where my mind goes to that song. So the second item for highlights of this episode is the Why Is My Image Distorted episode. And this is something that I've run into and see people run into a lot. For example, if you're creating like blog cards and you have a specific place that you want the image to appear, you would oftentimes set that image to with 100% and hide 100% just to fit into that square, rectangle, whatever the size is, circle, who knows. But that always causes distortion in the image if the aspect ratio of your image or media isn't the same as the space that you're applying. So what you have to do is use either object fit for foreground images and you could do object fit contain if you want it to always be within that space or cover if you want it to hit the edge of that image so it fills and covers that space, which I usually use object fit cover. And then you could also reposition it so you could do object position to position where it is within its parent. I use that a lot, object fit contain or cover. And then background size for background images. So it's kind of funky because they have the same values contain or cover and they do the same things, but one is object fit and one is background size. It's just the way it is. That's just the world we're in right now. Memorizing all these niche properties that get you what you want. They're just tools in the tool belt. Yeah, different names, similar outcomes. Yeah, but I use that one a lot. So I just wanted to highlight it. Yeah, that's a good tip too. And yeah, I feel like earlier in my career I didn't put a lot of foreground images in just because I don't know. Well, I was like, I want background images. It's just easy to manage or something. And then the more I was like, no, but I want these images to show up on social. I want these images to show up in search results and blah, blah, blah. I'm like, oh, well, it's totally flipped me around. And now I'm trying to get as many images into the HTML as possible. So they're not just a corridive. They're inclusive in the content and the way that a robot might crawl it and try to discern what's in the image. I don't know. But yeah, good tip. Well, mine, second one, unsurprisingly about color and fixing those muddy gradients that are just, once you see you can't unsee type of thing. And I want to thank both the feature in CSS and color spaces, because you kind of need both of those. It's not just one that gave it to you. And it's nice to have options. So once you've seen the issue, you know how to get around it in the older style of getting around it is kind of annoying, adding extra points into the gradient lines that you're sort of like, hey, don't go that way. Stay on track over here. And so you kind of guide it more. But with these color spaces, you're like, I trust you color space. Go and do the most beautiful gradient that you can. And that's really cool. I like that we have those options. Yeah, also if you haven't checked it out, Adam has a great site called gradient.style. And on that site, you can check out different gradients and different ways to interpolate them. But also it shows all of the new color spaces as well in your gradients, which is great because color pickers don't have them yet. So you can open DevTools, use the DevTools color picker to get those extended color spaces, but you can't use the inline UA browser supported a color picker to get those. So I like to use the gradient.style tool, even just for picking color. I like the color picker. I like the color picker too. Yeah, thanks for shouting it out. I was gonna skip over it. I was like, ah, I've mentioned it before, but I go to there all the time. And yeah, it has that button too, where you can see the old SDR versus the HDR. And that can be really illuminating also when you're thinking about these muddy colors or just like, why do I care? And then you go there and flip the switch and you're like, oh, I see. Okay, that's nice. Yeah, it's also cool to see what it looks like an unsupported browser. So older versions of browsers that your users might have, if they have older iPad versions, like OS versions, for example. And you can make decisions on if you wanna make that trade off and have your users who do have updated browsers with the more vibrant colors. And this is a feature that's supported on modern browsers so you can take a look yourself at your browser support matrix and what your users are accessing your app or site on. Yeah, upgraded. It's got that little output too. It'll be like, here's both. So you can upgrade to the color or just straight use the new gradient. Hopefully it helps somebody out there. Yeah, it's great. Thanks for building it, Adam. So my last and final tip of the season is all about why app property might not be working. And this one I picked specifically because I had a friend who actually contacted me, reached out and asked this question maybe a week before we recorded our episode. And it was just so timely and funny and I've run into this and I've seen other people run into this and it's a very common gotcha for app property. And so I'll paint a picture. Say you have your root or you have custom properties. Very common thing to do is put all your custom properties in the root. You might have something like color primary and it might be red. And then you might update something like color button primary to use your color primary. So you set color button primary to var color primary. So that's all good and great. When you use that color, like say you have a button and you set the background color to color button primary. All good, get what you expect. But if you have a variant like a blue button and you update color primary inside of a different scope. So inside of that class blue button, you set it to blue. You don't get that blue color when you use var color button primary. It doesn't update the root scope of color primary which you're setting in a different place. So this is when you're expecting a child selector scope to update a parent's scope. And it might not be super intuitive especially if you are used to having global custom properties and then you're trying to update them more locally. It doesn't always work out the way you want. But there are two solutions. So one is to just scope it where you're using it which is what I usually do. And that would be to set all of the color button primaries and other things inside of your buttons instead of inside of your root scope. So you can access values from your root where you have all your colors, your default colors but anything that is component level is at the level of your components. So that way you can update it with the blue button and set update color primary to blue and you'll get blue. Another thing that you can do which is an interesting thing is to scope that color primary in multiple places. So you could do both in the root comma button and then update it there. So that way you would have colon root comma button and then all of your colors. And when you update color primary you will be able to update it to blue because you're scoping it in multiple places. This is doable. I would just recommend that you scope your custom properties to the types of components and levels at which you're using them. I prefer the first method but there's multiple methods. I thought that was cool. And we talked about it in that episode. Yep, that is cool. That one still kind of bites me. I mean, obviously I do a lot of custom properties and I still run into issues where I'm like why isn't this custom property the value I want? So I have to go back to this episode and just remember the different tricks to kind of get your way out of it. And they had saved me numerous times already. Yeah, that's a hot tip. Well, my last one is about load layout shift because I learned some new words that I was like, oh, these are totally fun distinguishing names for shifts that happen in the UI. So you had load layout shift, post load layout shift and expected layout shift. And these are just cool things to have in your tool belt when you're talking with designers or developers about performance or even just UX jank to have the verbiage that's common amongst y'all selves so that you can debug it and fix it. Well, yeah. That's a good one. I also remember learning and using a bunch of terms in our episode that we talked about image rendering or not image rendering, browser rendering. What was, it was like one of the more recent ones. Maybe it was the last episode or two episodes ago. It was about, oh, was that the custom property episode or it was the, I don't remember exact. I think it was the custom property episode where we go through a lot of terminology on expected values and which values you're writing. And I'm totally blanking on all of the different steps right now. Me too. It was like authored value, computed values, two other modes of special values that were like. Right, because values change after calc. Anyway. Yeah. And also context dependent. It like goes through this gauntlet. It's like it gets punched eight times before the final value is known of a custom property and that they all had names each of those phases. Yeah, I forgot most of them too. It happens. That's all we have for our show today. I want to say thank you for joining us on this journey. We definitely tried something new this season where we had video as well. So hi to those who are watching us and not just listening to us. You know, we'll see how it goes for next year. I definitely love doing this podcast. It's always fun to have different themes throughout the year and kind of see where the platform changes and how we could bring that into the episodes. So yeah, I just want to say shout out to all of our listeners and thanks Adam for being a awesome co-host. It's been so much fun. Aw, thanks. This is so much fun. It's always fun listening back to the episodes. I'm like, hey, we sound like we like it. That's really fun. We've done like 78 episodes now. So lots of content. I could probably put all of this into AI and make AI even in Adam. Robo, Adam, and you and us. That'd be, I don't know, would it have the same personality? Well, just like up its craziness too. So I'd like be weirder AI. You need to like invent more stuff. I don't know. That'd be really funny. It has been really fun being on the show with you too. I look forward to all the episodes that we were gonna make. I mean, because I feel like this year we took a little bit of a break from the sort of a speck deep dives because we kind of caught up. And anything that we were gonna cover was gonna be kind of wiggly and it's always weird if our episodes come out and it's like stuff has changed. Like we had to do a cover or a color follow-up one. And I think we got new stuff though, I think for this next year. So there might be lots of new stuff landing. Lots of changes even from when we talked about the new stuff. So I'm very excited. That's probably what we're gonna dig into next year. And there's so much to talk about in the CSS space. Yeah, and we might have to do some HTML a little like pop-ups and anchors like this, right? You've got the trifecta and that's a fun conversation to have. Even just like top layer, that's CSS ancillary. We should cover it. There's a lot of overlaps. Like even with pop over, there's pop over open. There's starting style. There's a loud discreet for your transitions. There's so much in that space that overlaps the CSS. And then there's even a lot of JavaScript that overlaps the CSS like view transitions. That requires JavaScript to initiate and create your view transition, but it also has a lot of CSS properties, like your old new transition, your named transitions. It's all aligning around the CSS space. How dare this world continue investing in CSS. Don't they know this is one of the worst language it's ever made? It's not even real. Ah, just kidding. I love this language. It's the best. Sorry, a programming language. We should, yeah, let's go out with some really, let's roast CSS. No, I'm not prepared for that, but no, this is a good language. And yeah, I'm so surprised year after year that nothing has made it inferior. Nothing has taken it off of its winning position. It's on an upward trajectory right now. Yeah, and it's only getting better. And well, it's honestly getting a lot more complex too. It's like the specialty required is higher. The potential of the output from someone who knows our CSS is just higher. It's really cool, like any other, yeah, it's fun. And if you miss us in between seasons, you can find us on the internet, on Twitter or X, wherever you wanna call it. I'm Yuna, that's at UNA. And you could message us, show ideas, questions about these new features, or even questions about CSS in general. That's always good to hear. Yeah, what shows do you wanna hear? We've got episode ideas. Do you wanna hear about HTML? And do you not want to? Because this is the CSS podcast. You know, tell us what you do and what you don't want. We're listening on there. And if you like the show, like the season, please give us a review on whatever podcast app you're using that helps people find our podcast also now. It's on YouTube, so just sharing it with friends, sharing it with coworkers, giving us a review is always nice. We love to see them, love to read them. And yeah, we love to make the show. So thank you for listening again. Yeah, we'll see you next season. Bye-bye.