CSS Wishlist

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

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

I just keep finding out things

Head it. Over to syntax.fm

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 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.

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.

Peace. Peace.

style, 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 onto the next line. Like my navigation on westboss.com 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 And that 7, And then you can use JavaScript to apply CSS like classes to it that just say like row 1, row 2, row 3, etc.

It's just it's a fluid being That's a totally valid selector.

out into nothing. And this works on into a reusable thing, and some people didn't even love mixins within But the escapable one gives you more access and more control.

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.

and

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.

So I wrote a selector the other day that had

gradient system image.

CSC line selectors.

reflows, that can often sometimes trigger the resize observer,

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

count number of times rerendered Oh, yeah. Like if you so, like, let's say you had, like, a A mix in for,

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 Other CSS

You say

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 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.

Yeah. Yeah. And a lot of these I don't I think we don't have them because you run into, but

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.

And that's actually something I've Maybe like maybe that will be a thing that comes out of container queries where people say like, don't style the container.

Yeah, buddy. Yeah. Like a CSS gradient or, like, an image gradient? top left hand corner of the grid item. And if the top left hand x y resizable

You can't. It is it's kinda funny. I never thought about CSS as being

an is.

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,

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,

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.

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

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

equals 0. And then if it's 2, just give up.

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,

an infinite loop.

A specific nth child range and is being hovered or focused. So if you think about that, that's 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 my website. What happens when

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

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 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 whatever color system you want, whether that is OkayLab to transform it. There's a lot of systems that do this right now in,

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.

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, support.

it. Causing the text to resize again, and then, yeah, next thing you know, you got yourself

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

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.

but not have to scroll or or whatever. And it's totally doable in JavaScript.

content, meaning that if you have a before or after pseudo element and you want to put text or something in there.

an input like form element

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

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,

A CSS selector. So right now this only works with

CSS imports aren't super recommended,

would just be really easy to say, hey,

I think a lot of people are gonna have, like,

in line and then you can use those variables in your actual CSS file.

But

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

Very, next one we have here is this one's from Gilboa Shai on Twitter. He says, Overflown 3.1,

Basically scroll and overflow

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.

And I always think, like, wouldn't it be cool, LCH, a hex.

So it would be kind of cool to have are greater than 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 so much duplicated CSS.

CSS in JS, or 4 through 6.

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.

and be able to drag and drop them because the built in CSS resize both box In order to test these things because you can't just resize your window because it's not based on the window anymore.

he calls it what did he call it? CSS references.

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.

CSS, is mixins.

on divs, only 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

CSS resize, Yeah. Can you can you use a CSS gradient as a mask?

So

put jQuery selecting the individual

To style elements when there is an overflow. That's kind of cool. Like when the element has an overflow.

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 but like firsthand what you can do is you loop over every single grid item So it is coming. Interesting.

And like it did like 4 or 5 things on a link and you could just import that From your like utils. CSS the grid item is currently being able to import 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, 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,

imports CS Don't it even then

to be able to grab Like I was selecting a grid where Of this container, give me the 4th thing or give me every other thing. Give me the even or the odd.

UI resizer

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

The value of like an input, is when we start playing with container queries, we're gonna need There is the in CSS, there is the c h unit,

transition this, but start at 0 and go to whatever it is And just work, please. Next one we have here is

bottom right, top left, bottom left.

It's kind of a cool effect. But one thing I have to do is CSS variables. Because what you can do is you can You could just set variables on the element

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,

Hover over top of a grid item. I'm opacity the grid has a child that is What else do we have here? I asked on Twitter what people's dreams were.

I'm making it Taller and wider. And what that does is it animates the both the grid row and the grid column.

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,

building something along with the animation thing where when you like Circular re renders.

You know, that's a lot of JavaScript running. You can you can get it Pretty close with, container queries, Me too. See.

increasing the size of it. So I'm going

it, please, into the container. That's something that, like

you know, just to say, hey. This font size fit inside of this container. Just I mean, either or. Just being able to do that technique is something that I find myself needing to do all the time. Totally.

every corner top right,

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.

Yeah. I agree. There's a you know, a lot of these things do have, like, working solutions

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.

So I ran into this the other day. I was

You don't know how big the the thing is, right? You can't simply just apply in CSS selectors? 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.

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 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

And Could you? I put a little I I have I forgot that I wrote this, but I wrote a this is amazing with So I tried to format it on multiple lines

does this, and I had to write a whole bunch of intersection observer code around it.

the item before it. That means you probably wrapped onto the next line and you started a new Row or a new column.

more things,

The zebra striping on rows like you did in, table data or things like that just that by being able to say,

actually I'm looking at a GitHub issue from 2017 An import.

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,

within a CSS grid like, fully transformative ways. So,

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 On this Monday, hasty treat. We're gonna be talking about our CSS wish list.

where I asked Wow. In the CSS working group,

coordinates

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 Column number 2 or row number 2, something like that. Yeah. I,

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, give me a CSS after

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.

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

And you check for the something needs to wrap because it's too big? with So you wrap it, but then you make it smaller. So now it's small enough to fit back on the main line.

resize observer that will do that. Essentially,

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

And like, wouldn't it be nice to to be able to

Let me look it up.

The overflow somehow or just be able to do overflow color functions are definitely something that I would really love to have. Let's see. The CSS color function

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

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

which is like, okay, well, give me 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, So he put together kind of just like a not a proposal, but just a bunch of ideas on, Type, 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.

it. Other one we have here is, 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, Subset of visited, active, all of that stuff. You can't do that with an inline style.

nth of found. So we at first, we got nth child, which is like, give me, In line styles, RGB

So I would love to be able to tell something to escape

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.

Scrolling area of cards, you scroll horizontally,

us some extra additions to these things, whether that is box shadow or maybe it's a background image or some additional,

Next one we have here is full support For CSS 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.

Here's here's one that I really want. I really want,

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

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 actually, no, it's not it's not classes. It's just type. Is that right? but it's not perfect Because you just have to eyeball it and say, all right, that looks close enough, 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.

And then also, nth of found, meaning that, like, I want

So for instance, we have 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.

only the nth divs or the nth ones with this class, you know?

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,

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 approach

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

Tailwind is a

would overflow that container, and the one the one example that hits me the most is box shadow.

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 native development, so I don't know. Feels like we should have stuff like that.

with inline styles, And like you can do that kind of with inline styles or it's a lot easier now that we have, 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

something that,

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

the scrolling area of cards.

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 But like I had 2 good examples here, which is like I want to be able to style elements that have wrapped because there's no way, at least right now, there's no way to select the actual container itself. You can only select which is the

that they don't scale super well and into,

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 Sass, Stylus, any of those CSS preprocessors.

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, Josh, let's take this look.

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 and I don't think we're ever going to get darken, lighten,

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,

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

a A line. Like a line on a yellow, and that line ends up being just a slightly darker yellow. Or typically,

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

color functions now. Like, I just I know they're coming.

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 should be acting as this ethereal container CSD. Welcome to Syntax.

the way you might do this is with What do they call it? Color space? The color space is not good.

do things like tint, saturate, 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.

or HSL or whatever,

functions, which Item 4 through 6 and is currently being hovered or is currently being focused. So, like, that's some sort of

You remember mixins from Oh, yeah.

But then it kind of bit me because I had like

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.

variable multiple like like color black, display flex,

I think there's nuance. And, like,

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,

or just like put multiple classes on your thing. So it's kind of interesting. I use mixins a lot during Sass, By 0.2, level up purple.

mixins,

accompaniment to our CSS variable world. It's true. Like, if you could put We got one from, 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.

Nixon's basically is almost like a function that allows you to encapsulate

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 getting into, like, skateboarding I don't that that's not in the proposal. We did a whole show on it. I know, but the HSL color, box shadow? You could give it properties that are allowed to spill out Either. Honestly, whatever. Either one. Either

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?

I think mixins have a place and they could be really handy in CSS and would be a really nice

to styling that type of stuff. So I'd be curious to see if it ever 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 character height of RFP or RFQ there was a really good tweet the other day. I forget who it was, but they basically said, Right now, attr 3 comma 6? 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,

CS Those come to CSS.

But yeah, like if you could put multiple

those systems. But me, personally,

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.

You know, one thing I would really love in CSS

then like people say, oh, like why not Put a class on it and then,

And that's what the whole process of

Yeah.

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

JavaScript. Nice and easy.

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

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

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.

color.

Yes, please. Yes, please. Oh, yeah. This is one I ran into only when I started playing with container queries, grid items 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

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 and not bend anything substantial. Yeah. Totally.

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 Like the items in the 1st row, the 2nd row and the 3rd row. And

with the CQW, full ATTR

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

and like you end up with that get this arbitrary value, like 14 CQWs.

The next problem comes is when you need to do anything that involves, Okay. I I think in an ideal world, I would just like a CS. Lightness function.

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.

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

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.

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.

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, 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

Boss and Scott

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,

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 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.

or a mini snowboard, and you just kinda Stand on it and and go. And there's, like, this whole

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,

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 So 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? And, man, is that fun? Like, I'm I'm not a snowboarder or or anything like that. But, corner class to something

Scott Talinski. I'm a developer. I live in Denver. It's currently mega snowing out here right now, and I am bundled up.

Monday. Monday. Monday.

I'd hopped on that snow skate again. I was like, this is super fun. Like, You can use that.

the tastiest web development treats coming again hot. Here is Wes Barracuda

we had our own PVC,

the craziest,

Wes, 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.

For anyone listening, a snow skate is essentially a kind of like a larger skateboard, like, I bet, like, a cool dev tools thing would be, like, You can't do that with a container query is basically what this means is you can grab the value of an HTML attribute and use it inside of I like the name over for the web, meaning that

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

like 1 n plus like, can this happen? Which is good because my daughter is But, like, you felt so cool when you'd, like, name. Yeah. Tag. Tag. So, yeah, that's interesting. Yeah. I would like both and of selected or 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

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,

but then you can tack on another one which is 1 n minus

3 and that will give you that will give you 4 forward,