Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
How much browser support is enough?
703 Plays6 months ago
In this episode, I talk about how I've started to see Cascade Layers used in the wild, and I talk a bit about how much support is enough support before you start shipping features in production.
My primary YouTube channel where I teach frontend development, with a strong focus on CSS: https://youtube.com/@kevinpowell
✉ My newsletter: https://www.kevinpowell.co/newsletter
💬 Come hang out with other dev's in my Discord Community: https://discord.gg/nTYCvrK
Recommended
Transcript
Introduction to Browser Support
00:00:00
Speaker
Hello my friend and friends and welcome to my podcast General Musings. My name is Kevin and today I want to talk about when do you feel comfortable using a feature based on its browser support.
Understanding Cascade Layers
00:00:13
Speaker
What browser support level does something have to reach before you're like, yep, ship it, we're good to go.
00:00:18
Speaker
And the reason I asked this and the reason it's front of mind is I recently came across a website that was using cascade layers and it wasn't some little niche website somewhere. It was front end masters and I was actually looking at how they did something else. And as I was looking, I'm like, wait, there's a layer there.
00:00:36
Speaker
And I started poking around and they're just all in on layers on their site. And I was like, oh, interesting.
Adoption and Trends in CSS
00:00:42
Speaker
Because layers have support across the board now. It's been available across all major browsers since 2022.
00:00:51
Speaker
But it's still at 94 to it's 94.4% global support right now. I'm on can I use as I'm recording this and it shipped with Safari 15.4 and so like there's a chance that people are going to visit front end masters and the CSS won't work, which is crazy to me.
00:01:12
Speaker
Which I'm super interested in and I actually I want to talk to Matt about making that decision just because for a site of their size and they might have the analytics to say well for us it's 99.6% right and they're a tech forward website so most of people visiting there are going to be on up-to-date browsers.
00:01:30
Speaker
so it could be a decision they make and they're fine with it. And then I found out, since then I posted about that on Twitter saying, I found this out in the wild, and then it turns out Syntax FM is also on there, like West Boss and Scott, they made their website using it as well. And I'm just like, oh, this is cool, we're seeing it out in the wild. And I had a feeling it was going to start being something we were gonna start seeing a bit more of. I talked about this a little while ago, I don't remember where, if it was on a YouTube video or one of these.
00:01:56
Speaker
Somewhere, but I was like you know what layers are probably going to be that thing this year that become something Just because the browser support was getting to that point. It's been two years now. It's baseline That's usually when you start hitting the okay. We can use it, and that's because with layers
00:02:11
Speaker
It either works or it doesn't, right? It's not a progressive enhancement. If you include some CSS in a layer and the browser doesn't understand what a layer is, it just doesn't work.
Layers vs Progressive Enhancement
00:02:21
Speaker
And I mean, that's the same for any CSS the browser doesn't understand, but you can use a lot of other things as progressive enhancements.
00:02:28
Speaker
I can use scroll based animations with animation timeline right now and easily make that a progressive enhancement where the website works perfectly fine, but if they have that, then they get that cool extra little animation going on. I can use multi-page view transitions right now.
00:02:46
Speaker
which are basically no support. I think it's still only behind a flag in Chrome. I could use that today and it's not going to change anything except add to the experience for people who have it enabled. That's progressive enhancement. Nothing breaks. We're just adding on top. Whereas things like nesting and things like layers, those are more for the dev experience. They're not something that the user actually is impacted
Future of CSS Features
00:03:12
Speaker
by.
00:03:12
Speaker
And it's things that will, you know, if you go in on layers, you're probably not gonna have a fallback because then why bother going with the layers? You're just doing double the work at that point. So when you decide to go and use that, you're going all in with it. And yeah, it just, I guess I was expecting, I guess I'm surprised to start seeing it even though I predicted that it would happen. And I'm excited to start seeing it happen, but it really does make me wonder
00:03:38
Speaker
When people feel like they can make the jump and part of it is probably, you know, looking at front end masters and, and Wes and Scott, they probably know what their user base is and their analytics and stuff. So they might earn the, not they might, they are probably making a very informed decision on that.
00:03:56
Speaker
And so it just yeah, it's interesting and exciting to see The future CSS stuff actually coming into production because that's always the frustrating thing is Like here's this really new cool thing. You can start using that in two to three years from now It like that always sucks a little bit But in a way there's that extra excitement that comes with it because we had this cool exciting thing We got kind of like oh, that's gonna be really neat
00:04:18
Speaker
And then it sort of fades off a little bit because you're not thinking about it. And then it's like, oh, wait, now I can actually use that thing that I was excited about a while ago. So it reinvigorates a little bit. And it's made me wonder if I should start using layers on a couple of my projects that I'm about to get off the ground. And I'm thinking about it and I'm going to think about it a little bit more, but it might be something that I do. And it's one of those things that people actually ask me how I think I would use layers and
00:04:45
Speaker
I don't know yet and I think it's something that we're going now that people are using it in production we're going to start seeing how people use it because there's sort of a I think a standard idea of just like I'm gonna use it similar to like the project structure I have in terms of like I can do a base and a components and the utilities and a layout one and all of that that's
00:05:10
Speaker
often how I organize my project so that makes a lot of sense but maybe there's a better way and we can also have sub layers and there's other stuff and I'm really excited to see what other people do with it and I'm also excited that means we're probably going to start seeing other things like container queries out in the wild and other stuff and part of the problem too is as these start getting into the wild
00:05:29
Speaker
We often don't even know about it, right? Like, you could be on a site that you're visiting all the time. Nothing really looks different, but they might be using container queries on something and you don't know because it's just working and everything's fine because you probably don't go and click the CSS very often.
Inspiration from Other Sites
00:05:43
Speaker
I just sort of randomly came across that other thing, like I said, because I was like, oh, what's this little thing here? And I wanted to just double check how they did it because I'm a CSS nerd. And whenever I see, I don't even remember what it was actually that I was looking at, but these little things sometimes I'm just like,
00:05:59
Speaker
Yeah, there's like six different ways you could do that and I'm curious how this team did this. So I like looking at that and sometimes it inspires ideas for content and other stuff where it just goes, oh yeah, I think, you know, I would do that that way or maybe I wouldn't do that that way or whatever it is. I don't even know if I figured out what it was once I realized they were using layers, I went off on a sidetrack
Upcoming Episode Teaser
00:06:19
Speaker
there.
00:06:19
Speaker
But yeah, that's it, a short episode for this one. Just because I was excited about that, I wanted to talk about that a little bit. And I have a longer episode coming out in a few days, which is going to be my interview with Travis Nielsen. I'm just putting the finishing touches on editing it today. But yeah.
Community Engagement
00:06:34
Speaker
layers and other new modern css stuff coming now i guess if you have any opinions or ideas on when you would be comfortable shipping stuff like let me know on social media whether i have mastered on twitter i'll link them both down below you can either dm me or just you know at me or whatever it is and let me know what you think because
00:06:55
Speaker
they're something that I'm really curious about people's approaches there because I think some people play it really safe and other people are more willing to like be like oh some people are just going to get a broken sight I want to know how like
00:07:07
Speaker
what it is that makes you decide that that it's okay if somebody just is on a site that doesn't work or not because that sort of harks back to the old days at one point like you might have if you're old enough you'd remember like this site works better in netscape navigator if you were on another browser there would be a big thing telling you like don't come here if you're using internet explorer or vice versa
00:07:27
Speaker
And we're starting good. We got away from that. But now, like, literally this stuff breaks stuff. So that's really interesting. Anyway, I could just ramble on and on. I won't do that. I'll let you go. So thank you very 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.