Modern CSS quick hits: range syntax, grid-lanes, random() and more

Key Takeaways

Hello my friend and friend and welcome to my podcast general musings. My name is Kevin and in this podcast I talk about whatever is front of mind for me in any given week usually in some way that's related to front-end development. And today is 100% related to front-end development. 90 90% related to front-end development. At least that's the plan. Um but it's going to be a little bit of like a quick hits mixed bag type of affair instead of having a singular topic. though I guess most of it will be able to be wrapped up in the modern CSS bag. The quick hits mixed bag of modern CSS stuff I guess is what we can talk about. Uh and the very first thing I want to mention is again on the masonry topic. It's not going to be a big one here. Some of you might be sick of hearing it. Just in case you don't know though, uh we're not calling it masonry anymore. Uh it is going to be a display grid lanes. And overall, I've actually been surprised with how positive the feedback has been. Though, I do think most people are just like, "We have a name. Yay." Like, that's the exciting part cuz now things can actually move forward. Uh, but there was a really good point on my video where I was talking about this. I'll link to it in the description if you haven't seen it and you want to check it out. Uh, but it was about how uh, one of the positives of not calling it masonry, this is by David Webcier, WebKa, I'm going to say WebCA, I don't know. Uh but uh he said, "Another thought about this. It's great for it to have a different name because it's going to make searching for proper code examples much more easier or much easier." And yeah, 100%. This is a fantastic point. I hadn't even considered before. And I know like I know the the specifically I forget his name. I really do apologize. Uh normally I remember it, but right now it's not coming to mind. Uh but the guy who created the masonry um JavaScript library plugin what whatever we call it uh I know he was against the idea uh obviously well not obviously you know you never know but he was against the idea of going away from masonry just because because of his thing that he created it had become a very familiar term and there's the the main push back against using a different name is exact exactly that of people know that term. We've become familiar with it over time and it's a bit strange to choose a different name. Uh the main things I've heard because there's been push back since the very beginning has just been that while people who are familiar with it know that's the name, not everyone's familiar with it. If you don't know how to make that, you're not going to be searching for masonry. Uh though if you showed a screenshot to somebody and asked, you'd probably get there. Um, but you know, it's not what we would call an intuitive name uh out of the box. I don't think grid lanes is either. That's one of the things is like we just need to pick a name because no matter what, not everyone's going to be happy. But yeah, this idea of searchability is really important where if you know the name of what you're looking for, there's going to be no cross messaging between you finding some stuff based on a JavaScript library versus finding just the CSS implementation of it, which I think is going to be very useful. Uh, and even with like AI and other stuff that are going to be picking up on all of this, even more useful potentially because if you were to ask AI masonry stuff, I guarantee you the results are all going to be based on doing it with JavaScript. Whereas having grid lanes and you ask about that, I think 100% we'll be going in a bit of a different direction there. So anyway, I don't want to get too far on that, but I think that that was a really good point that I did want to bring up. The next thing I want to talk about uh is the range syntax has come to container style queries and if statements and this is really exciting. Uh for those who are watching the video version of this I have the blog post up here by Daniel Schwarz. If you're listening audio only don't worry I won't be like just I I'll make sure to make everything very clear for audio listeners. Uh but yeah the range uh as he starts off range syntax isn't a new thing. We could do it with media queries uh with just like width greater than right and other stuff but um where we're getting range syntax now coming to if statements and style queries. You could now check if say something like if style lightness and this is the example he gives lightness is less than 50%. Then you could apply a specific style or if lightness is greater than 50% we could put a different style and his lightness is a variable that he's putting. So we're for style queries and if statements right now we are checking for custom property names. So we're checking the lightness variable or the the lightness custom property and seeing if the value is greater or less than 50%. And then you can apply a specific style style query. Same thing. We could check the style coming from a parent of a custom property value and see if it's within a specific range and apply it. So this is available in Chrome 142 right now uh and will eventually hopefully be gained by other browsers as well but it's only in Chrome 142 right now. Uh so anyway the blog post does give a lot of examples but my first thing and I think he mentioned it at the top of the post but the first thing that makes me the most excited about this is using it with oh he does mention it using it with the ATR function. This is going to be fantastic. uh he's doing the he has he's doing notifications here. I don't know if he has other examples. I didn't get to the bottom of the blog post. It does look like he's doing it mostly with those. But anyway, for me, my first thought is so custo the the ATR function allows us to get a value from a data attribute and then use that within our CSS. So you could have something where you have the stock of an item. This is the first thing that came to mind for me with all of this was always the stock. Uh, and I gave examples of using ATR like this or the ATR function with this where the JavaScript would have to do some of the work. So, say that if the stock was zero, then you'd be marking it as well, the zero I guess could work, but if you had like between 1 and 10, you'd be setting a custom data attribute then to like data stock equals low. And then if the if it was between 20 and or 20 and greater then you'd just be doing data stock equals available or something like that. And if it was zero then it would be unavailable or sold out or whatever you want. So you'd have to use JavaScript to do that check and then set the data attribute accordingly. Whereas now that's can get passed off to the CSS by using the range because we can just have the stock number come directly in from the JavaScript set that as the data attribute. Uh so 0 1 2 3 4 5 whatever. And then you're saying if it's less than 10 or if it's zero, set this style. If it's between zero and 10, set this style. So, you know, maybe the the color of the icon changes or whatever. And then if it's greater than, you're setting a different thing. Of course, there's other probably better choices than that. I think uh Yuna had a nice example with the forecast thing she was showing where the forecast thing that she looked at in her blog post was sort of like using a style query as a modifier class which you could just use them you could do other ways of figuring that out. But with the range syntax, it opens up a lot more possibilities because you could have icons or other things changing with the forecast based on the percent like how what are the chances of it raining, right? Is if it's between zero and 10%, you just show the sunny icon or a cloudy icon. You know it's cloudy. Uh but then if it's between 10 and 50%, maybe it's you're changing it to like a chance of showers icon. If it's 50% plus, you change it to a rainy icon. That type of stuff, right? like the styling is all handed off to the CSS just based on the numbers that can get pulled in. I think this is just really exciting uh and and something that's going to change a little bit of what we're doing. And yeah, it's it's kind of crazy how CSS is evolving to be able to handle these things. Uh, and speaking of CSS getting crazy, the other one that I wanted to talk about was Chris Koyer having a blog post over on the front-end master's blog called more CSS random learning through experiments. And so this is only random is currently only in the Safari technical preview, but he did put a lot of videos in the post. So all these posts are linked in the description. Um, but he looked at doing like rotating starfields to start with uh, and some really interesting things. and he put videos for all of this if I didn't say that already. Uh just so you can get a preview. One of them looks like this weird black hole thing cuz they're turning in different directions. Like the starfield's built with random but then there's the animations coming in. It's really really cool. Uh but the coolest example I think he created this like parallax star effect where as you're scrolling there's stars in the background and they're moving in like a parallax way where the different layers of stars are moving a bit differently to give it proper depth of field I guess. um a little reminiscent of like geio cities in a sense of the starfield background. But what was cool with it is he used it uh in combination with a animation an animation got to speak properly here animation composition accumulate which I've heard of. I've played around with a little and I'm like okay this is cool but I was waiting for like to see a good example of where it would be used and it I was actually really surprised with the browser support of it. It's I think past 2 years across all the the browsers. Uh which is nice to see. So it's not quite widely available yet, but it I guess is getting there. Um but yeah, doing it using that it means you can scatter the stars everywhere with some randomness. And then the animation composition accumulate means you can use a single animation with like a move distance on it, which is what he's using. And so you're going instead of changing it like instead of it being a set value of you're going to your top is getting switched to 300 pixels, you're accumulating on top of its current position by 300 pixels. So every star that's randomly positioned can have the same animation on it and it's just going to move them by that amount and it ends up creating what I think, you know, again, it's maybe a little bit of a silly example here, but uh it helps create that parallax effect all with one animation over probably hundreds of elements that he has on the page or he has a thousand stars on the page. So yeah, I think that's a pretty cool example of like the types of things that are coming. silly examples, but they're they're the fun ones that uh where this new modern CSS is coming together to do some pretty powerful things. And yeah, the animation composition accumulate is something that I definitely want to play around with a little bit more. I think it's going to I think there's some use cases even outside of randomness. Uh just having a single animation that can be used probably has some positives and some good use cases that I just like I feel like there's something there that I'm just not getting to. And once I do, I'll make a video on it cuz now that I realize browser support is pretty good. Uh, and I want to talk more about this general thing of modern CSS with all these cool things that are coming. But before I do talk about that, I do want to let you know that this Friday, or no, not this Friday. Mixing things up a little bit because the word Friday is involved. Yes, I am doing a Black Friday sale. Uh, this is going to be my first ever Black Friday sale. I've been selling courses for seven years now and I've never done one. I've never even just done like a general sale. I've thought about it a few times, but every sale I've ever done has always been around the launch of a course and not after that. And part of the reason is because I always feel bad for the people who have purchased at full price. Um, but a lot of smart people, not a lot, but a few smart people have convinced me that I should. Uh, and even since doing it, Josh Ko got in touch with me as well, just to be like, "Yeah, it's you should be doing them." And sort of his he he has similar thoughts of I do, but how he sort of thinks about it as well. So, uh, I've decided to do it. I'm going to be doing a pretty decent sale. Uh it's my first ever I might as well go all out with it. And it's going to be on CSS demystified and on Beyond CSS. Uh so if you've been thinking about getting one of my courses, maybe it's a a good time to do so. Will be uh now. And if you are interested and don't want to miss out on it, I will mention it next podcast episode because the sale will have started then. It's going to run from the Tuesday that's coming up until the Tuesday after like or through to the end of Cyber Monday anyway. Um, so like Tuesday through to the end of Monday. And yeah, if you're interested, I will mention it here again, but just in case you don't want to miss out, I will sign up for the newsletter. It's the best way to make sure that you you get the code and you you know exactly what's going on and all of that. So, uh, and all the details there. So, of course, the link for that will be in the description. But yeah, the self-promo done there. We jump back on to talking about modern CSS. And those are good ways to to learn more about CSS if you are looking at that. Even though currently they don't really dive into any of this like fancy modern stuff just cuz I think courses for the time being my courses um are more focused on the the fundamental parts so that if you understand those really well then it's easier to learn these new fancy things um really well. So we it's all about understand well especially CSS demystified it's all about learning to understand how CSS works and why it works the way it does so that it makes sense and that you can write it with confidence and all of that. So again then that should make all of these new things a lot easier to add to your repertoire. I'm talking about this way more than I plan to. So, uh, yeah, speaking of modern CSS and things about modern CSS, one thing in the comments section of my videos that I always find really interesting is the mix of opinions on modern CSS whenever I mention newer things or sometimes even um, I've been doing some stuff on data or I had a video a little while ago on data attributes maybe two weeks ago or 3 weeks ago. Uh, and you get this really interesting mix of people that are excited about the some of the things you can do with CSS along with the people complaining that it's getting too complicated and that CSS is just like this wild west of a disaster of a language and it's a mess or that it's a it's too complex now. Uh, and why is it getting so complicated? It should be easy. Uh, etc. And I find it funny when people complain because I guess there's a few parts to like the complaints that are coming up and I understand why people are complaining. But I think one really important thing to understand is the language isn't necessarily getting more complicated. It's just that we're making more things possible. I guess in a way that doesn't mean it's getting more complicated, but we're not changing the fundamental parts of how it works, right? just like I talked about uh with with CSS demystified and why I focus more there on the fundamental parts of it. But like that side of it doesn't change. It's the new layers that we're adding on top of it where yes things are getting more complicated there I guess or more complex or I don't know how we want to think about it. But the thing is we're enabling it to do more than it could before. I basically across the board we're moving away from worse performing often more complex solutions to simpler ones but the problem is they're simpler ones that people are unfamiliar with. So it feels more complicated. Uh, and as usual, I have a feeling most of or not as usual, but I'll say I have a feeling that most of the people who are upset uh or feel like it's becoming too much, and I could be wrong here, but my gut tells me it's people that are much more comfortable in the world of JS. and all of a sudden opening up a CSS file that has if statements in it or style queries with range syntax in it. It's harder to understand cuz it's not the CSS that they know and they're used to doing those types of things with JavaScript. And even when I was talking about the if and the style queries, I was mentioning how we can move the logic away from it's not the yeah well some of the the styling logic away from JavaScript and into the CSS. You know, it's one of those things I for a long time CSS was very simple. Like very very simple, but as it solves more complicated problems and these ones that I'm talking about now, I do think they belong in CSS because they revolve around the styling of things. So it's fine to have that logic in the CSS cuz we're saying style this this way in this situation and style this thing this other way in this other situation. That's always what we've been doing with CSS, but we would do it by toggling classes based on the work being done by JavaScript in the background. But now we can pass that off to the browser to do it instead of having to run the JavaScript and write the code for the all of that logic to be done. It's just built in now. And it's a feature that's available that we don't have to add this extra layer in. Instead, we can just pass the information in, let the let the CSS figure it out based on relatively simple if statements or whatever else that we're we're including in there. And often this is actually some for some of the and not what I'm talking about now, but for some of the things that we're doing this with, it's replacing hacks, right? There there are new CS CSS ways of doing things that just replace hacks. There's some that are really simple like aspect ratio instead of padding hacks. But there's a lot of other things that have come up where there was like these weird workarounds or weird ways of doing things that we don't have to do anymore. Or there was the more complicated JavaScript solutions that are now getting passed over to simpler ways of doing it, but they're unfamiliar. So they look really weird and they look strange and they look complicated. And the on top of that, it's in the world of CSS where people aren't comfortable because they're comfortable in their JavaScript world. And so that combination of it looks weird. It's something unfamiliar and it's in an environment where people are less comfortable. there's this immediate like putting their back up, pushing against this idea when in reality we're making it like if somebody were to come in today and just learn it from scratch, it would make a lot more sense with the way it's working now than having to do it the way that we've traditionally been having to do things. The one caveat here is I do feel bad for beginners. Like CSS was always that realm where you could open up a CSS file and even if you weren't able to write the code yourself, you'd probably be able to make the sense of it. Like once you understood the very basics, like absolute basics of grid and flex, I think you could open up as most CSS files, skim through it, and understand what it's doing. Whereas if you are a complete beginner and you open up one that has style queries and if statements and you know animation compositions and all of these other new things that are coming, it will be a lot more intimidating and you'll be looking at it being a little bit confused. That is part and parcel of a language maturing and becoming more powerful. Though I don't think that's a negative. I just think it is something that is a shift in a shift away from how things were into this new reality of where things are going. Um, and I do think also there's strategies that can help deal with all of this as well. Something I've been doing for a long time. You've been following me, I'm assuming, for a while. You know, I like being very verbose with custom property names and trying to take some of the things that can look really complicated. uh you can have really long declarations with grid and doing weird calcs and other things. We have like the sign and other stuff that you know sign and coast and all of that that are in CSS now as well and like there's complicated math we can be doing in there. We have the random. We have all these like comp things that can make things more complicated. But just like in JavaScript where you're naming your variables to try and like break things down and simplify things, that's just going to be more and more common in CSS as well where we have our custom properties, probably locally scoped ones where the stuff is happening to try and just break something down and make it a lot more self-documenting and a lot more interesting. And you just do it with a lot more verbose CSS. And I think that's completely fine. And those are my thoughts there. And I I just I I don't want to unfairly like before I wrap up, I don't want to unfairly put this on like oh it's just JavaScript rows that are getting mad that you know CSS is different now. Um it might be a bit of an unfair caricature that I'm building there. But I do based on like the replies I get that is the feeling of just that uncomfortableness of certain things moving away from the ecosystem that people are used to it being in. That's the main thing. And we're doing it in a new way that looks strange and unfamiliar. So, you get the push back there cuz there's a lot of people very excited about all these things as well that are like, "Yes, it's easier to do or I'm happy to see this going to CSS because it makes more sense there." Um, so yeah, I just I don't want to uncharacter that's not the right word unfairly charact lump people into buckets or anything like that, but um that's just my my gut feeling is that's the main opposition to a lot of this. But maybe I'm wrong. Leave a comment. Let me know uh if if you have uh other opinions on that. Uh, and before I let you go, another I guess quick hit a little. This is well, we're gonna I've been talking about chess a lot, uh, the last few episodes. Uh, so I had a big talk about it and how it's and we'll circle back to that in a second. This isn't just about chess. This is about learning. Um, but I've been doing my chess updates in the last few episodes here. So, uh, the last one, I think I said I was riding a high. It was super like about my progress and how well things were going. Uh and now it's more about having to remind myself again about how progress is nonlinear. Uh just because um well anyway when I talked about progress and linked it into the my chess learning that I've been doing where uh my main thought there that I was sharing was how often there's a lot of learning going on behind the scenes where we're not seeing the progress. And then this time it's more about reminding myself that sometimes you start seeing the progress and then it feels like it's going away and that you know like you end up taking a step back. But I think that's very normal that that's just part of learning and and part of things progressing. And the main reason I'm bringing it up is cuz after riding like a really long winning streak and then just winning quite a bit more than I was losing, I got my ELO up to like 650 or something like that from a very low point. That was kind of embarrassing. Uh, so I was like pretty happy with that. And now it's down to about 560. I went on a long losing streak. Now I've been bouncing back and forth. And it's just most of the things I'm doing now are stupid mistakes. Um, and I'll have like a really good game followed by uh just three bad ones in a row. It's been a little bit demotivating. Um, but yeah, not nonlinear progress is the most important thing. Another thing is I have changed my learning strategy a little bit. I got sucked into the world of like trying to learn opening theories. And I think it was really important that I did that because it built up a fun the more fundamental aspects of openings. Um, but I learned now how deep opening theories go and it's insane [laughter] if you want to learn them properly just cuz there's so many potential variations and trying to learn all the variations and I was losing my mind a little bit on that. So I have like my openings are actually relatively solid for a beginner. So now it's more about, okay, I'm not going to worry about that so much. Um, I'm going to just focus on fundamentals of a good opening rather than like this is the exact moves I need to be memorizing and learning more of the fundamentals, especially our middle game because that's usually where I screw things up. Uh, but a lot of it is just hanging a piece and then losing and I suck. But [laughter] uh, yeah, hopefully one of these days I start seeing progress again just [laughter] so I I I stay motivated with it all. But uh, yeah, there's the the chess update of the week. We'll keep those going for a little bit. I hope you guys like those. Uh, and that is it for this week. Thank you so much for listening. And until next time, don't forget to make your corner of the internet just a little bit more awesome.