Some recent insights on what CSS features people are using

Key Takeaways

Hello, my front-end friends, and welcome to my podcast, General Musings. My name is Kevin, and here I talk about whatever is front of mind for me in any given week. Uh, usually in some way that's related to front-end development. And yeah, I haven't said that in a little while. It's been a couple weeks since I've been here. I just got busy with a few things. And uh, yeah, we're back though. And I I think over the next little while, just because as the holidays are approaching, it is very possible that we have a few other breaks that come up in this podcast, but I'll try to keep on top of things uh as much as possible. Uh this week, we are going to be staying on topic for the most part. Uh when it and when I say on topic, I mean front-end development related and CSS more specifically. And what I want to talk about is something that was I found really interesting. Uh, so I've talked about it a bit that I was going to be doing a workshop with Smashing and we're on we just finished day four going into uh the last day soon and it's been really good. I've really been enjoying it and it's called the modern C or the new CSS toolkit and we're looking at a lot of new CSS features uh that a lot of them have been around for a little while and at the beginning of each feature that we're covering I do a vibe check of have you heard of it never heard of it I should say heard of it used it experimented with it tinkered with it or actually used it in production and the most things it it's been a mix it really it really has depended But I what I found really interesting is for the most part, especially on the things I was talking about early on other than grid because I did a quick thing or I did a section on regular grid stuff near the beginning where there most people had used it in production as you'd expect. My question there was a bit different. It was more about if you prefer grid or or flexbox or which one you're more comfortable with. But when it came to everything else, it was always like a mix of experimented or used in production with a lot of experimented and tinkered with some of the features and with a dose of never even heard of it or never had used it mixed in along the way. Uh, and then we got to the has and has was like used in production like at least it was well over half and everyone else it was at least had experimented with it and played with it and stuff and I was like, "Oh, this is really interesting because a lot of the other things that I was talking about had good browser support and I was just assuming people hadn't been using in production because of browser support uh cuz some of the things we were talking about like the browsers might not have been perfect or it more recently has been getting there and then everyone's see oh yeah has I've used that in production. I was like whoa wait a second here. Okay that's really interesting. Uh just cuz like has has good browser support. It's not I have them opened and I it's here. I knew I had it open. So it's sitting globally at 91% according to can I use right now. Uh you do have to be careful with can I use numbers if you are looking at them. uh 95% is the highest anything can get to like the paragraph element has I think 95% support so it gives you a bit of an idea of the top end and I know a lot of people look at like the iOS numbers for Safari as their guide uh so that's atif it started in 15.4 four uh but yeah the has is around 91% and it's baseline newly available technically uh so like 91% actually for newly available is kind of interesting if you don't know what baseline is it's once it's supported in all major browser engines so Chromium WebKit which is Safari and Firefox uh if once it's in all of those engines it's considered newly available and then if it's been more than 2 and 1/2 years that it's been in all of those browsers, then it becomes widely available. So, has is still newly available, meaning it hasn't been supported in every browser for at least 2 and 1/2 years yet. And that's why I was surprised so many people had said they'd already used it in production. I'd assume people knew about it, but maybe hadn't been uh going all in with it yet. Um, and then like another example would be Subrid. Subrid has actually worse support. I thought it was a little bit better, but uh Subrid apparently is I knew it was newly available, but that's at 86%. I understand Subrid being one that like a lot of people had heard of it, but not actually used it yet. Uh which I get cuz it is a little bit more niche, but I hopefully showed some good examples on why you'd actually want to use Subrid. Uh there. Another one that was lower than I expected is container queries. Container queries are actually widely available now, which is amazing. Interestingly, because of the order they were added to the browsers, support as a percentage basis, despite being widely available, is actually lower for container queries than it is for has, which is bizarre. And it's just because it came out, I think, on Safari a little bit later. Uh, and it was probably in Firefox earlier is my guess. Uh, I'd have to look at the numbers, which I'm not about to start poking. Oh, no. It actually came out in Firefox later. I don't know. Uh, but whatever. It's the basically the same if you look at it from a percentage number at a global level according to cannot use these numbers are obviously like ballpark figures. Um but yeah it's essentially the same and there it was a lot more heard of it and experimented but not using in production. I'm like well to me they're close enough that if you're using one you could use the other one. Uh and container queries are so cool. Uh but there is that thing with container queries where they feel really cool and then you start using them and you're not so sure about it. uh and that can make it feel like oh maybe this isn't fixing things in the way I thought they would be either because the limitations that come with container queries uh of needing like an extra layer wrapping something or there's a few other things that sometimes can make it feel a little bit more underwhelming than you expected but there's so many good use cases for them we just can't treat them like media queries and I've done talks on this I have videos on this so I'm not going to get into the difference now I'll put a link to my talk from the last Smashing conference actually uh or the last time I spoke with Smashing uh cuz I did do a section on container queries and how they're different uh and why they're amazing. Uh yeah, container queries. Uh, another one that I found really interesting, uh, that people didn't know about, and actually I I had a feeling people didn't know about this one. Uh but I think it was only one person maybe in the entire chat had mentioned that they they'd even seen it I think which is nth child but when you use it with the of selector so like nth child uh to of and then you put a class or like a selector and it can be an advanced selector like two of I don't know.card or something and it selects the second element that has that class on it. Uh which is it's widely available. It's sitting at about 90% as well, just above. So, it's actually it's been in Safari since version 9. Safari added this like the proper usage of Nth Child. Uh cuz apparently this was part of the spec for a long time uh in 2015 and it would took uh Chrome added it or let's say Firefox added it 2023 and Chrome also added it in 2023. Uh but yeah, it's it's relatively well supported and it allows you to select things based on the selector like is it the second instance of a certain selector which you can't do with nth of type because that selects by element. Uh and nth child obviously just selects based on child count. So it's nth child number of selector. Um hard to explain, but if you if you're not sure what I'm talking about, I'd encourage you to play around with it or to to look it up. I'll I'll try to put a link to something in the description uh that that looks at that. But yeah, I guess I'm talking about all this and there's other things. Let me just look really fast to see if I can spot another one uh while we're here. I think that was like the main ones that sort of I was surprised by a little bit. Um the end of the selector, uh I was surprised nobody had heard of it. I thought it would went under the radar. I knew it went under the radar, but I didn't realize it went that far under the radar. Uh, but I'm trying to look. Yeah, everyone had been using has. Oh, I guess the user valid invalid stuff. Um, I didn't really talk too I didn't do vibe checks on that, I don't think. Uh, just cuz I I just wanted to jump into those examples. Focus within as well that have been around forever. Uh, user valid invalid is newer, but the focus within has been around forever. Uh, and even the focus visible has been around forever and people focus visible has gone under the radar even though I'm always talking about it. Uh, is there anything else? That's like the main ones I guess. Uh, there's the relative colors and other things, but those the supports not quite as good as has. So, I'm I think now that I know people are using has in production, that's going to be like my new baseline of like does this have support as good as has. Uh, but what I find really interesting with all of it, I guess, is the way that people like certain features just get a lot of attention, such as has. And I get it. Has is absolutely incredible, and I'm so happy that we have it. Uh, and I tend to go overboard with it at times and then find out that I could have done it without has in a much simpler way. Uh, but it's it's fun to use and it opens up so many possibilities of things we could just never do before. So, I get why it it gained the I guess the awareness and the adoption that it has, but it surprises me with some other things that just do go under the radar. Uh that I guess it's as soon as it's a little bit more niche like has fixed or not fixed, but it it makes things that were literally impossible before. It's not like, oh, I could use this other way of doing it. the only alternative was using JavaScript and even then it'd be kind of awkward at times for some of the stuff that you'd have to do whereas now we can do it with a single selector. Uh but like container queries maybe it's because of those limitations that I was talking about or those times where you try using it and oh this is cool but it I'm so used to the patterns I'm already using that I don't really need it. That's the only thing I can think of because I feel like container queries can do so much uh and they're really really awesome and the adoption despite having essentially the same support is so much lower and it's kind of interesting there and I guess it's because with maybe it's because with has you can use you're not coming up with new patterns in a way. I mean it is new stuff because it's you're doing things you couldn't do before. So you have to some of the the more advanced things you can do with it look kind of weird. The the selectors are different than you might have had before. But with a container query like you're used to media query so you use them like a media query and then you don't really push it or try new things with it because you feel like that's how it should work. So maybe it's partially that. Um and then like I get things like subgrid are definitely more niche. Um, so I guess it it depends on like the the types of things you're doing and where those fill in the needs. But it just seems like a lot of these things should be getting more attention. And I'm always surprised. It it shows me also one of the reasons I did the vibe checks at the beginning is cuz I realize I'm out of touch with what people know about CSS. Like when I talk about aspect ratio and people still don't know about that and was like, "Oh, uh, okay. Let's let's rewind a little It was a little bit of the idea behind this entire workshop from the beginning was to like go, okay, people haven't necessarily been keeping up the same way I have. Big surprise, Kevin. Uh, right. And not everyone gets to do this uh all the time. Uh, the other one I guess was scroll snapping uh that I didn't mention yet, like just the basic scroll snapping stuff. A lot of people had tinkered with it but not really used it in production. That's been has great support. Uh, but what's really exciting with scroll snapping was the that we have the um scroll snap scroll state queries is the word I was looking for. We have scroll state queries. Now, it's only in Chromium, but I'm looking forward to those coming. Uh, because there there's some cool things that we can do there. Uh, and it's going to open up some just a lot of easier ways to do things that we can detect when things are stuck or snapped and everything else uh that we've always had to rely on JavaScript for up until now. So yeah, CSS is coming to a really good place. Uh I'm also going to put a link to CSS wrapped 2025 in the description uh as well, just because it's always an awesome post. The newest one is out now uh and is really good. And that one's a bit different cuz like the stuff I'm talking about now is things that are starting to hit that point where we can use them whereas the wrapped is looking at a lot of the very new things. Uh but if you're looking forward to seeing what's coming in CSS, that's the place to look. It's things that have shipped in Chrome uh very recently or within the last year, right? So like custom selects, improvements to anchor positioning, some other stuff that I can't think of off the top of my head cuz I don't have it open, but there's a lot of very good things uh that are becoming available to us that are that are going to be great and just make our life so much easier, which is fantastic. Uh but yeah, I I think that's about it. If you haven't been using some features because you were worried about browser support, I would encourage you to go and look and say, "Oh, maybe this is the the why it's a little bit different now, but for a while my barometer for like is the support good enough was GAP and flexbox because I'd get comments on features that I'd be talking about and people be like, "Oh, I can't use that browser support. It's not good enough." And yet they'd be using GAP with flexbox that had worse support, right? that that was um if Brent is listening, I'll say thank you. He's the one who who originally uh brought that up to me of uh noticing that people will do that. Uh and uh so yeah, it's one of those things where uh there there's similar things coming up. I I think has is my new barometer there. So having a feature that you're comfortable using uh when you do look at browser support or other stuff, compare it to that feature that you're already using cuz some features that you're using might not be as good as you thought. Uh I'm I'm working on a new project right now. I just started and I'm really on that like I'm staring at the uh support numbers for some features. I'm like, "Oh, do I use this or not? Do I build in a fallback? Like where am I at?" I really wanted to use light dark, but I want this to be public facing and light dark's just not close enough to where I feel comfortable doing it. Um, but then I'm and like I I'm using anchor positioning, but I created a fallback for it using at supports. Uh, so there's there's a few different approaches that we can take for things. The anchor positioning version is so much better, but if you don't have it, it's okay. you have something decent uh that's very simple uh that that fills in and gives not the same experience but it's not a terrible one and uh but yeah there there's different approaches that we can take for all these things as well but I think that's it uh just to say like yeah go and go and look out at what's where features are if there's things that you heard about and you're not sure you know you're like oh that sounds cool and then you didn't use it for a long time go and look because support might be better than you expect uh or at least better compared to like whatever your base is. Or maybe you're using features that have worse support than you expect them to actually have, uh, such as has or or other things where like maybe you're like, "Oh, not not as many users support this as I that I thought and I've been using it." Um, it has is like a big one, but look for those little ones like the uh the gap uh for for flexbox, which probably has fantastic support now. Uh, let's look it up really fast while we're here. Uh, CSS gap is at 93. gap for flexbox 92.3. So, uh, widely supported obviously, but it was only added in Safari 14.5 2021. I'm just looking. Safari was the last one in 2021. So, it's been supported for a long time now. [laughter] U, but yeah, look for those types of features where like you might be surprised by something and it might catch you off guard a little bit um, and be worse than you expect or if you're comfortable using that. Oh, and just to say that actually like gap for flexbox the can I use numbers 92.3% of sites like or global support there. So like but it's been supported in every browser since 2021. Is that good enough for you? Right. So it's it's funny looking at the support numbers cuz 93 92% doesn't look fantastic but uh again 95 is the highest it ever gets. So uh yeah I'm repeating myself a little bit now so I'm going to stop. But before I let you go, uh the last episode I did, I realized I didn't do my my chest checking. So for the you can you can go now if you're [laughter] interested in this, I guess, but or just keep listening because you're here already. I shouldn't tell people to stop listening, but uh content creator expert that I am. Um I figured I've been doing those for a little while and I finally passed 700 now. 700 ELO and rapid on chess.com. So I'm pretty happy about that. That was my achievement recently. I got up to like 760, I think, and then now I'm at almost exact. I went on yesterday and the day before. The games have been terrible and I've I've tanked my rating, but I'm I'm hanging on to the 700 rating by like one point at the moment. Um, but yeah, I've just been playing kind of bad and not calculating Midame exchanges very well. Uh, but it's all it's all fun. Uh, but I'm I'm still having fun with chess. still uh plugging away at it, trying to get a little bit better at it in in the little bit of free time that I have. And I think that's it for this week. So, thank you so much for listening. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.