CSS Wishlist

Monday. Monday. Monday.

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest web development treats coming again hot. Here is Wes Barracuda Boss and Scott

CSD. Welcome to Syntax.

On this Monday, hasty treat. We're gonna be talking about our CSS wish list.

Man, CSS has gotten so many amazing things lately, and it's continuing to get amazing things. But in this episode, we're gonna be talking about things whether they are, it. You know, actually coming or maybe coming or not coming. Just things that we would love to see in our beloved CSS. My name is Scott Talinski. I'm a developer. I live in Denver. It's currently mega snowing out here right now, and I am bundled up.

Wes, Wes Boss is with me as always. Wes, how are you today? What's going on, man? I'm doing great. Doing great. We got a little bit of snow yesterday,

Which is good because my daughter is getting into, like, skateboarding and which is really cool. Like, I'm Stoked that one of my kids is actually into skateboarding and, like, it's been it's been too wet to to skateboard on and off here. There as the snow melts and it snows again and that whole dance. So we got a snow skate, which is something I had when I was a kid.

And, man, is that fun? Like, I'm I'm not a snowboarder or or anything like that. But, I'd hopped on that snow skate again. I was like, this is super fun. Like,

I can't believe I sold mine many years ago. You know what? I would love to get a snow skate. That sounds like a like a really fun thing to just kick around, you know, the easy to kick around at the house. I remember a friend having 1. You'd hit jumps. It. And since we were all skaters, we had our own PVC, grind like, rails Yeah. That we had made. Yeah. Pipes little yeah. What you would do For those of you who don't know, you just take you go to Home Depot. You'd buy a PVC pipe. You'd buy a couple 2 by fours. You put some little feet on there. You got yourself a grind rail until you broke it.

And so, yeah, those things worked really well in the snow. I love that. I I would I had, like, a I don't know, some pipe or bed rail or something, and I would just, like, Put it in the snow and just, like, lift like, put a breaker or a 2 by 4 under it. Just, like, really low.

But, like, you felt so cool when you'd, like, For anyone listening, a snow skate is essentially a kind of like a larger skateboard, with or a mini snowboard, and you just kinda Stand on it and and go. And there's, like, this whole me and my daughter went down a YouTube rabbit hole of, like, professional snow skaters. And like people like do like like they don't just go down hills. They like

they do stairs and they can, like, ollie up on it. It's pretty wild. Yeah. I know. They're they're really cool. Yeah. I yeah. Okay. Well, Snowscape Tower is over. Let's talk about CSS stuff.

You know, one thing I would really love in CSS is mixins.

You remember mixins from Oh, yeah.

Sass, Stylus, any of those CSS preprocessors.

Nixon's basically is almost like a function that allows you to encapsulate Other CSS into a reusable thing, and some people didn't even love mixins within those systems. But me, personally, I think mixins have a place and they could be really handy in CSS and would be a really nice

accompaniment to our CSS variable world. It's true. Like, if you could put multiple styles inside of a variable and we should say that we're just dreaming here. A lot of the stuff we'll talk about is Probably or maybe not a good idea, and there's probably a reason why we don't have it.

And that's what the whole process of Bringing it to the browsers and and and having community feedback and whatnot. But we're just dreaming here, you know. Like it's this is maybe not stuff that should or shouldn't come.

But yeah, like if you could put multiple variable multiple like like color black, display flex, Justify content center, place items center. You know, like you could just like put the like, oh, I use this all the time in my app. But then like people say, oh, like why not Put a class on it and then, or just like put multiple classes on your thing. So it's kind of interesting. I use mixins a lot during Sass, But then it kind of bit me because I had like so much duplicated CSS.

And then when I wanted to, like, change something, I guess you could just change the mix in. I kind of got away from me, and I don't think I had a really good like, approach to styling that type of stuff. So I'd be curious to see if it ever CS Those come to CSS.

I think there's nuance. And, like, mixins, they're the the reason why they might not be here right now is maybe, potentially, there is foot guns, And there is potential for overuse and reuse and things like that. But I do think there are some interesting use cases, and maybe we can, it. Work on talking about what those are at some other time because we got a lot of stuff to get to in this one. Next one we have here is a range selector. So the other day, I was working on I've been working on some CSS Grid animation examples. Nice. Just because like a couple a couple episodes ago Scott told me CSS Grid, you can animate it now. I was like, what?

So I'm going to be updating my I'm updating my CSS Grid course, and I was just playing with it. And I needed to select Like the items in the 1st row, the 2nd row and the 3rd row. And that's one of my other my other I'll talk about that in a second. But essentially I want to select 1 through 3 And then 3 through 6 and then 7 through 9, or 4 through 6.

And in order to do that, you can it's actually a pretty clean hack you can do with nth child doubled up, where you say, like 1 n plus 3 and that will give you that will give you 4 forward, but then you can tack on another one which is 1 n minus 7, and that will give you 7 back. And it has to meet both of those criteria. But I was like, well, like, if we can we it. You're gonna already do this. Wouldn't it be nice just to have a simple syntax of, like, range 3 comma 6?

You get everything 3 through 6? No. I hear you. That would be a lot of fun. You know what? And also right there with you with that, I I know we can maybe we should move into that that other one that you were talking about, because I think it pairs nicely with this. But, like, being able to select more things, within a CSS grid Would be awesome. Right? Because oftentimes, if you're thinking like, let me put a border bottom on the 1st row or the 2nd row or something like that. Right? It you can't select a row specifically, and you can't necessarily determine how many items are in a row. Because if you have a responsive grid that's it. Changing all the time. You you couldn't you couldn't accurately to say, okay. Give me maybe an after give me a CSS after On the first 3 items here. Because then when the the grid shifts to maybe 2 items or 4 items or whatever the grid changes, then that messes up your whole business. You have to write a lot of custom CSS. It's not like it's not doable, but there are definitely, like, certain use cases where it'd be really nice to be able to select. Here's the 1st row or the 2nd row or whatever you could do, you know, The zebra striping on rows like you did in, table data or things like that just that by being able to say, give me Column number 2 or row number 2, something like that. Yeah. I,

actually I'm looking at a GitHub issue from 2017 where I asked Wow. In the CSS working group, like, can this happen? And Could you? I put a little I I have I forgot that I wrote this, but I wrote a this is amazing with resize observer that will do that. Essentially, what you can do is you loop over every single grid item And you check for the top left hand corner of the grid item. And if the top left hand x y coordinates are greater than the item before it. That means you probably wrapped onto the next line and you started a new Row or a new column.

And then you can use JavaScript to apply CSS like classes to it that just say like row 1, row 2, row 3, etc.

But like I had 2 good examples here, which is like I want to be able to style elements that have wrapped onto the next line. Like my navigation on westboss.com does this, and I had to write a whole bunch of intersection observer code around it.

Or just very simple tiger striping rows and columns. It would be really nice to be able to apply it. You call it tiger striping? I've always called it zebra striping. That's fun. Yeah. Why would I call it tiger striping? That's probably wrong. I I'm one of those guys that calls everything, like, the wrong name. So that's probably The slightly wrong thing.

Yeah. Yeah. Well, like, tigers are striped, aren't they?

Yeah. Oh, no. Absolutely. That's why I I mean, I wasn't putting it down. I've just always heard of zebra striping it. And and, you know, it. Tiger Striping is a little bit more fierce, and I'm here for that. You know, there's some really interesting things in this GitHub issue, Wes. I don't know if you've seen, like some person says, like, In addition to Anthro and nth column, it would be really nice to have and row focus within. And then they have, like, Like a timeline kind of thing or focus column within. So that way, you could do, like, vertical striping or horizontal striping that's not just, like, based on The row? That's actually really cool. That's a cool idea. Oh, yeah. Yeah, you're right. That would be super handy.

Another The thing with CSS Grid is being able to select the grid items that are the 1st of column or last of column or 1st of row and last of row.

So I ran into this the other day. I was building something along with the animation thing where when you Hover over top of a grid item. I'm increasing the size of it. So I'm going I'm making it Taller and wider. And what that does is it animates the both the grid row and the grid column.

But one of the issues I hid in is I Also, I'm using scale just a little bit so that it kind of overlaps all of its siblings just a little bit and kind of puts a border behind it.

It's kind of a cool effect. But one thing I have to do is every corner top right, bottom right, top left, bottom left.

When you scale it up, I don't want to scale it up from the middle because then that spills out over the container on the bottom left hand corner. So So what I would like to do is to anchor it to the bottom left, top right. You know, like when you do the animation, scale out from the thing so you don't spill out, and you can do that with transform, but selecting the individual grid items Is a bit of a pain. You could do it with nth child assuming there are 3 by 3 grid. But then like Scott says, as soon as he hit responsive, Then you got to change it. Right? A lot. Yeah. Yeah. You're writing a lot of CSS, and it would be so and people are, like, well, just out of class. If it's like you at the time of writing the class, You don't know how big the the thing is, right? You can't simply just apply corner class to something because The container is responsive, and of course, you could write a resize observer, but that's a ton of JavaScript code where it could just be a pseudo selector in CSS.

Yeah. I agree. There's a you know, a lot of these things do have, like, working solutions that could, you know, solve these problems with JavaScript. But at At the end of the day, it'd be great to have some of these things in CSS. And and as you were saying that I just added a new one to the list that I can just say really quickly, it'd be it. Super duper nice to have a really easy CSS fit text, you know, just to say, hey. This font size fit inside of this container. Just it, please, into the container. That's something that, like yeah. You know, I I wrote my own, and we talked about that before. But, like, it wasn't a ton of fun, and, It's hard to optimize those types of those types of things, so you're you're getting into algorithms and whatever. And, it even then if you have, like, 8 or 10 items that you all want to Reside like a a bunch of cards, for instance. You have a series of cards on a page like we do.

You know, that's a lot of JavaScript running. You can you can get it Pretty close with, container queries, with the CQW, but it's not perfect Because you just have to eyeball it and say, all right, that looks close enough, and like you end up with that get this arbitrary value, like 14 CQWs.

You wanna know another, little hack too? Here's a little fun little hack that I wrote once.

Actually, we're using this on the level upside. Just do a character count straight up. And then based on the character count, you put the text in the bucket sizes to say, like, this is small, medium, large, and then just apply a size to that And just make sure those sizes fit no matter the largest size within that that character count. So there's certainly ways to do it without The fit text style where you're bumping up the font size and waiting till it overflows its container. But yeah. Certainly, something that could be easier and much more fun with CSS.

There is the in CSS, there is the c h unit, which is the character height of An o or something like that. Or there's there's a character thing, but it doesn't work great because most fonts aren't

Monospaced. Most fonts are are variable. So, again, like, come on. The browser just give us fit text. Yeah. Right? It's something we've been needing to do for a long time. It. Next is, in my mind, this is something that I need all the time. So you have a, let's say, a horizontal or vertical scrolling area. Right? And you put overflow scroll on that bad boy.

The next problem comes is when you need to do anything that involves, something that, would overflow that container, and the one the one example that hits me the most is box shadow.

So for instance, we have Scrolling area of cards, you scroll horizontally, the scrolling area of cards.

But we have a big old box shadow on those cards because I love a big old box a shadow. And then what happens is the overflow hidden that you need on the y coordinate of that, well, that cuts off your shadow. So the solution becomes and now I gotta put a 100 padding top and bottom on this thing. Maybe I'm getting into negative margins. It. Maybe I'm getting into position absolute. Whatever you're doing, you now have this, like, workaround where you have this thing that has to account for us some extra additions to these things, whether that is box shadow or maybe it's a background image or some additional, flourish or something like that. You know, it's hit me even with icons in a vertical scrolling area for a playlist or something like that.

So I would love to be able to tell something to escape The overflow somehow or just be able to do overflow scroll with overflow visible as well because, heck, those those seems pretty useful to me. Yeah. Yeah. That would be Super handy to be able to

scroll and overflow or like like do you think like it would just be overflow x, overflow. Why? Yes or no? Or do you think it would be, like, overflow allow box shadow? You could give it properties that are allowed to spill out Either. Honestly, whatever. Either one. Either

one. One one of those sounds like easier. Right? The overflow just saying, hey. Make this visible for the other coordinate or whatever.

But the escapable one gives you more access and more control.

I mean, either or. Just being able to do that technique is something that I find myself needing to do all the time. Totally.

Next one we have here is full support For CSS with inline styles, there was a really good tweet the other day. I forget who it was, but they basically said, Tailwind is a RFP or RFQ for the web, meaning that In line styles, you can't do all of CSS in it. You can't do hover styles, you can't do media queries, you can't do container queries. There's there's a whole Subset of visited, active, all of that stuff. You can't do that with an inline style.

And like, wouldn't it be nice to to be able to Write full CSS as an inline style? No. Maybe? I don't wanna do that. I don't wanna do that. I mean, I don't wanna I don't need to, but it. Other one we have here is, nth of found. So we at first, we got nth child, which is like, give me, Of this container, give me the 4th thing or give me every other thing. Give me the even or the odd.

And that that was great. And then everyone said, oh, but when I add Like let's say you have a list of 6 cards and you want to grab the even ones. It works great until you add like an h two above those cards.

And then all of a sudden you've messed up your nth child because the h two is an element as well. So then people you have to put another wrapper in and that's annoying. So then we got nth of, Type, which is like, okay, well, give me only the nth divs or the nth ones with this class, you know? And actually, no, it's not it's not classes. It's just type. Is that right? Let me look it up.

And, I I haven't looked it up in a while. I know. It's it's funny because there's so many things that you don't look up until you right before you need them. Yeah. It's not it's not

CSS specific or sorry. It's not class specific. It's yeah, it's only like divs. So if you have, like, a bunch of divs, they have an h two. It will give you it will only give you the divs. Yeah. Same type of tag name. Yeah. Tag. Tag. So, yeah, that's interesting. Yeah. I would like both and of selected or And then also, nth of found, meaning that, like, I want regardless of where they are, they don't have to be in the same parent. They could be just select All the things with the class of special on the page.

Now that you got them, give me the 3rd through 6th one.

And it doesn't have to be like because a lot of times people are like, why isn't my nth child working? Like, you look on Stack Overflow and it's always well, they're not in the same parent container, and therefore it's not possible. So Just like you would in document query selector.

Wouldn't it be nice to be able to just globally find something and then end of it from there out? Yeah.

Here's here's one that I really want. I really want, color functions now. Like, I just I know they're coming.

There is. Yeah. Let's check the can I use? CSS color functions are definitely something that we'll be getting at some point. But let me just say, being able to modify color is the one thing that I'm truly missing in my design system work because Yeah. Right now, I'm defining every single color as a hex value. Whether it's shades or tints or whatever, I'm defining those all as hex values, which is Totally fine when you have 1 theme in one site. But let's say I want a fully themable site, And I only wanna do it by setting, like, 5 CSS variables instead of setting 20, 25, or however many shades and pins I have. Right? It's hard to do that right now without color functions because if you get color functions, then you can have your base colors. And then let's say you have a A line. Like a line on a yellow, and that line ends up being just a slightly darker yellow. Or typically, the way you might do this is with a black with an opacity on it. Right? That's a nice easy fix for that. But if you didn't go to a white theme or a light theme where things change, Some of those things get really messy really quickly where all of a sudden you're inversing your color palette or maybe you're making bigger changes to your color palette. It. And those rules that you wanna have in there, that they don't scale super well and into, like, fully transformative ways. So, color functions are definitely something that I would really love to have. Let's see. The CSS color function allows to display in any color base, that's not what I'm looking for. I'm looking for like The color function will also allow you to

do things like tint, saturate, because what what you can do is you can take a color, be it a hex or RGB or anything, and then you parse it into RGB or HSL or whatever, and then you can put it together. You get 3 variables, h, s, and l, and then you can you can calclose. You calc the h By 0.2, and I don't think we're ever going to get darken, lighten, functions, which I don't that that's not in the proposal. We did a whole show on it. I know, but the HSL color,

like, remember there were we did a whole show on it in the HSL color.

What do they call it? Color space? The color space is not good.

So, like, telling it to do a lightness using HSL

It's not going to give you the desired result. Well, that that we gotta get lab and l c h as well, and those are much more better supported than this color function. Yeah. I what I'm looking for is, like, transformation. That's what I'm looking for. Whether or not it's coming or not, that's what I want. I want you want just because you can do it though. Like, you to be clear, you know you can do it with the color function, but it's just Correct. More work because you have to calcum and stuff. Like, it would be nice to just give me stylus light and darken transparency opacity

functions. It. What I would like yeah. Define everything in hex and then say or, OkayLab, or whatever. But let's say define everything in hex. An an yeah. It's just a nice it. And then say lightness, and then have it use whatever color system you want, whether that is OkayLab to transform it. There's a lot of systems that do this right now in, JavaScript. Nice and easy.

Really nice. No. That's what it's gonna be. You could you could pass

LCH, a hex.

And out the other end, you get the l, c, and h values, and you can do whatever you please with those values, be it Jack them up, bring them down, add opacity.

So it is coming. Interesting.

Okay. I I think in an ideal world, I would just like a CS. Lightness function.

Me too. See.

Yeah. Give it to me. And maybe that's another thing. Can we have functions in CSS? You You know, can we make our own?

Yeah.

Yes, please. Yes, please. Oh, yeah. This is one I ran into only when I started playing with container queries, And that is when we start playing with container queries, we're gonna need some sort of resizable box In order to test these things because you can't just resize your window because it's not based on the window anymore.

So I think a lot of people are gonna have, like, like, I bet, like, a cool dev tools thing would be, like, put jQuery UI resizer on divs, and be able to drag and drop them because the built in CSS resize both only works when you have overflow hidden or a scroll value on it. And that's annoying because if you have a container that does have overflow on it, Then everything is hidden.

So it would be kind of cool to have CSS resize, but not have to scroll or or whatever. And it's totally doable in JavaScript.

So can we just get it in CSS as well? Yeah. Yeah. That'd be cool. Just to have,

Like you said, just container to resize or even you know, it does seem like a good idea for a dev tool to just turn each div boundary into a little handle grabber. You can grab it, move it around like a Figma frame and have your stuff little just auto adjust. That'd be really cool. Another thing I would really like is to be able to Animate hide auto because why not? Right? Just to animate hide auto. I I know you can probably do it now with grid, but it would just be would just be really easy to say, hey, CSS, transition this, but start at 0 and go to whatever it is And just work, please. Next one we have here is

full ATTR support.

So Right now, attr is basically what this means is you can grab the value of an HTML attribute and use it inside of A CSS selector. So right now this only works with content, meaning that if you have a before or after pseudo element and you want to put text or something in there.

You can use that.

And I always think, like, wouldn't it be cool, to be able to grab The value of like an input, an input like form element or grab like literally any data attribute off of a div that's being piped in via React and then use those that data directly inside of your selector.

And like you can do that kind of with inline styles or it's a lot easier now that we have, CSS variables. Because what you can do is you can You could just set variables on the element in line and then you can use those variables in your actual CSS file.

But So I don't think that will ever happen, but it's kind of a dream there. Yeah, total dream.

What else do we have here? I asked on Twitter what people's dreams were.

We got one from, 3.1, which is Sunil Pai. He is he He worked at Cloudflare for a while, and I think he's now full time working on Vite.

So he put together kind of just like a not a proposal, but just a bunch of ideas on, he calls it what did he call it? CSS references.

Basically CSS in JS, but like firsthand being able to import

Specific CSS from a CSS file right from JavaScript. Hey. You know what that is? So he just has all all it. Let's basically mix it. I mean, some of this is mixins. Right? He has extends x y z or whatever. This is this is like what I want. This is totally what I want. Yeah. It. I'm I'm right here I'm right here with him on this one. It's looks awesome. And then I I like the idea of, like, being able to import specific mix ins from specific files and do stuff like that. And, heck, it would be really great. Yeah. I know CSS, imports CS Don't CSS imports aren't super recommended, but it'd be cool to have, like, a performant or, like, a a CSS import way that is a native that you could actually be recommended to use to.

Oh, yeah. Like if you so, like, let's say you had, like, a A mix in for, level up purple.

And like it did like 4 or 5 things on a link and you could just import that From your like utils. CSS and then apply it or extend it onto something that's in your current one. Yeah, that would be really cool. It's true because we don't really have like An import.

We have import in CSS, but just brings everything in, right? Like what if we had a whole module system in CSS like we do in JavaScript? ESM? Yeah, CSS modules. There's a proposal for it. Yeah.

Very, next one we have here is this one's from Gilboa Shai on Twitter. He says, Overflown To style elements when there is an overflow. That's kind of cool. Like when the element has an overflow.

I like the name over Yeah. And then colon stuck to style elements when position sticky has reached the edge.

And that's actually something I've Yeah. Yeah. And a lot of these I don't I think we don't have them because you run into, like Circular re renders.

And this was a this is a problem with CSS Grid initially that they had to spend a lot of time to fix is that like And container queries. Yeah. Yeah. Yeah. Like what happens if you I have this with my navigation, on my website. What happens when something needs to wrap because it's too big? So you wrap it, but then you make it smaller. So now it's small enough to fit back on the main line.

So then it goes back on the main line and goes big, but then it's too big. So It routes onto the next line and then goes small and then it's small enough to fit. So it goes back. I basically had to, like, write a variable that says, count number of times rerendered equals 0. And then if it's 2, just give up.

Just stop, please. Yeah. I I know I had to do something really similar with my fit text solution. Right? Because you think about it, especially if you have it inside of the resize observer. It. So, sure, I want my text to fit itself on initial page load, but if somebody moves the browser window, I also want the text to resize. It. The problem with that is you're using resize observer. And when the text re reflows, that can often sometimes trigger the resize observer, it. Causing the text to resize again, and then, yeah, next thing you know, you got yourself an infinite loop.

I have a couple under here that may be not a good idea.

All of these maybe are not a good idea, but these ones are definitely maybe not a good idea.

CSC line selectors.

So I wrote a selector the other day that had an is.

Like I was selecting a grid where the grid item is currently A specific nth child range and is being hovered or focused. So if you think about that, that's the grid has a child that is Item 4 through 6 and is currently being hovered or is currently being focused. So, like, that's That's a totally valid selector.

I tweeted out. A lot of people got mad at it. They're like, this was unmaintainable. And I was like, it was mostly a joke, But also, like, how else would you do that? You know, like, show me another way to do it, and I'll do that. I'll do it that way. But that's how you do it. These Selectors are getting complex because CSS is getting more complex, and you have nested is and has and where and whatnot.

So I tried to format it on multiple lines to make it more readable, and it ended up looking like a MySQL statement. I was like, this is actually kind of nice, but it doesn't work Because as soon as you put something on the next line, it puts a space in between it, and then it changes it from a pseudo selector to a parent child selector. So I I was trying to figure out, like, how do you how do you do multiline? Like, how do you get white space in CSS selectors?

You can't. It is it's kinda funny. I never thought about CSS as being like a query language, but it really is. Right? You're just looking you're you're writing a series of a selectors to select something. But instead of from a database, it's from the page. That's very similar. Right? There's yeah. It. You have here in here container queries where you select the container itself not being a, maybe not a good idea. I'm curious About why you think this might not be a good idea because I haven't thought about this too much. But I I asked it on Twitter, like, why is this not possible? So The idea with container queries is you you grab a div, and you that's your container. You name it container, and then you say when this container hits a certain width or height or or any of the Things that you can start, you can query about a container query.

You say if if, like, let's say at 400 pixels, you wanna change the background from black to to blue.

You can't do that with a container query because there's no way, at least right now, there's no way to select the actual container itself. You can only select The children that are inside of it. So if that's the case, you have to put like a a div inside of the container. You can't select the container itself.

So there's probably a reason for it. I asked on Twitter and no one seemed to know. It's probably one of those circular re render things that we were talking about earlier. And it's not a big deal to throw an extra div in there.

Maybe like maybe that will be a thing that comes out of container queries where people say like, don't style the container.

It's just it's a fluid being style, the things around it and inside it. I don't know that I don't know how best practices for that yet. Yeah. Maybe maybe that's the vibe. The vibe is that the container

should be acting as this ethereal container and not bend anything substantial. Yeah. Totally.

And then is scrolled. That kind of goes back to the overflown, and

That's all I have here. Yeah. That would be good. Especially, like, you know, you think about those interfaces where if you start scrolling, it.

You know, perhaps the top overflow or the bottom overflow needs to have a shadow to indicate that there's more. You know, we've often done this with Yeah. A gradient And then a mask on the or have a gradient as the image mask for that type of thing. Like, that would be really nice to be able to indicate, hey. This thing is scrolling. These these are the types of things that you get in, native development, so I don't know. Feels like we should have stuff like that.

Yeah. Can you can you use a CSS gradient as a mask? Yeah, buddy. Yeah. Like a CSS gradient or, like, an image gradient?

Bro, head on over to level up that video on the homepage.

Josh, let's take this look.

Yeah. I even have a video on it if you want to learn how to do it. I do. Honestly, I was thinking about this the other day. I didn't even know. I always thought That mask like, I have masks on a bunch of my websites, and I've always used SVG. And I was talking about how I was like, oh, I would love to use like a Like, I have, like, a grit dot PNG on my website, and I was like, I wanna use that as my mask. And someone's like, then then use it. I was like, you can use It just has masks? It. So now I'm here finding out you can use gradient system image.

So where are you using it? Latest drop. So scroll down past the browse the library. The next one is latest drop. Look at that. We got a little playlist, and we have a gradient mask, gradienting out into nothing. And this works on

any theme on the site. So whether or not this is lighter background, you change that. It always works. It's a Oh, I do. I would have thought you just had, like, a purple gradient, and then you're there. So you're literally Chopping it out. That's beautiful.

I like that. Right?

Yeah. Check it out. Just be that source. I you know, I'll share a video I had I made sure on how to do it. It's nice. I was very when I when I found out I could do that, I was so satisfied. I was like, this is this feels like something that I didn't know you could do that is Really just brilliant. So, yeah, shout out to being able to use masks. This is why I love this podcast.

I just keep finding out things

I should have probably known 10 years ago. That's amazing. Likewise. Hey. Likewise. Hey. I used a lot of that TypeScript stuff like the moment that we finished recording that episode. So, Yeah. Absolutely. Oh, that's good. I actually found another use case for,

satisfies the other day as well in my own refactoring my own course platform, and It works great. I have tried to use satisfies twice,

and they have not been the right solution. Didn't satisfy you. Maybe this is the time. Yeah. I did not. I was not satisfied, but it's definitely my fault. I I I goofed. Alright.

That's it for today. Thank you for tuning in, and Tweet us your CSS wish list at syntax f m, and we'll catch you later.

Peace. Peace.

Head it. Over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player Or drop a review if you like this show.