 Hi there, my friend and friends. Did you know I've been making YouTube videos for about six and a half years now? I'm pretty sure that's longer than I ever had any single job. And while my production quality might have improved a little bit since then, one thing that has been a constant is if I use a CSS property that has come out since CSS2 was released, someone will be very helpful and go and make a comment about how browser support for that property or that feature is not very good. The thing is a lot of the features that people are actually telling me don't have the best browser support, have better browser support than they might realize. So today I wanna take a look at a bunch of CSS properties that probably have better browser support than you realize. So for this we're gonna be using Can I Use, which is a fantastic resource for having a rough idea of what the browser support for something is, though there are a few little caveats with the information here that I'll address a little bit later on. And these are all things that I've talked a lot about in detail, such as custom properties where I actually have like a several part series on them and I have at least a video on everything in here, I believe that we'll be taking a look at. So there'll be plenty of links down below if you wanna learn more about any of these. And I will be showing quick examples for things that I think people are less familiar with. And I'm starting with custom properties, not because people tell me they have bad browser support anymore or at least it's been a little while, but to sort of use this as a baseline because it's one of those things that I think people are using just regularly now. As we can see right there actually right up there, we're sitting about 96% if you include the prefixing or either way, the prefix isn't counting for very much. But yeah, they're super well supported and I think that should act as a nice baseline for the different features we'll be looking at. And the next one of these is object fit. And if you don't know what object fit is, it's a little bit with images. It's a hard one to describe. So we'll look at an example, but this one's actually at 97%, which might seem a little bit weird considering the custom properties was at 96. And I still get people questioning me on this. And I think one of the issues is sometimes it's a little bit funky how it works, but just as a really quick thing, if you might have images that are different sizes coming in, so this chair image is different from all my other ones, I could throw something like this on it where I'm setting an explicit height and width. The problem now is it's stretching my images. So we come in with an object fit of cover and it's just like a background size. And then it will crop the images to fit within that space instead of stretching them just like a background size of cover would work. This is insanely useful. I use it all the time now and I can be pretty safe in using it because we can see how amazing the support for it is. Basically, it's just not Internet Explorer. We'll address Internet Explorer in a little bit when we actually address a few other browsers as well that can be considered problematic. The next one up is WebP image format, which is also sitting there at 96% with Internet Explorer basically being the only thing that does not support it. Though there are some issues around older versions of Safari because it does need to be on a certain operating system as well to be able to have it supported. So that is a little bit of a caveat there. It's probably still safer if you're using WebP to offer alternatives like a JPEG as well as a fallback. I can do that using the picture element. I've also talked about that before. So you can check that out. But the other thing here is we can look at the Avif which is another generally better version or better image format. And this one's at 83%, which is actually really good. And it tends to be better though sometimes WebP can get better results. It depends on the image, but Avif I think tends to be the better one. Another one I want to look at is intrinsic and extrinsic sizing, which is at 96% as well. This is one of those ones where you probably don't want to use it all the time. But it could be useful in an example like this one where say you have titles and you need the background to match the size of the title while you can just throw a width of fit content on there and then it fits the content. And it's super good, but the advantage with this is also when it wraps that it will wrap properly and we don't run into any issues with it. There's also the min content and max content, which will be the minimum possible size for them and max means no line wrapping. So max content I don't see used too often because it will cause overflows, but they all can be a little bit useful, but fit content is nice for just these types of things. And you might be going, well I could change the block for an inline and get the same result, right? If I turn that off, but that's not really true because then my padding is not calculated and it throws off the spacing or I could do an inline block and then it actually changes how the collapsing margins work. So now my spacing's thrown off again. So, you know, I could just not do that and do a width of fit content. And I think it's a little bit more consistent and a little bit easier to understand how it's working. So just a quick rundown there, but there's a better use cases for this as well. So again, I have linked to examples and all of that in some other videos. Here at grid, I still get people talking about grid. I use it all the time. I absolutely love grid. It's a lot less. This is one of the ones that I've probably got comments the most about early on that have quieted down a little bit, but grid also at over 96%. All of these are basically the same, right? And just to compare, Flexbox is something everybody uses. It is at 98% though, again, there is a caveat with this information. But I will throw that out there that, you know, we're basically, they're basically on par because that we'll talk as I said about that 2% in a little bit. Another one is conic gradients. People, I just think they're used to linear gradients and used to using radial gradients. They're not used to using conic gradients even though they have fantastic support and they're really cool. But if we come and take a look just in case you're not familiar, this is gradient.style by Adam Argyle. I'm sure you used to gradients like this, rear radial gradient. And then we have the conic gradient that spins like from a point and goes around and then ends at the other color. It might seem a little bit weird. Why would you want to do that? But you can do like pie chart type stuff with it, especially if the parent had a border radius of to make it a circle. You can also do interesting things like this because you just loop back to the starting color and then it makes, you don't get that solid line. You can do really interesting things. You can make super nice gradients with conic gradients and you can also do crazy patterns with them as well. They're really, really powerful. And if they're not part of your repertoire, I think it's probably pretty safe to add them in there these days. Another feature that has really good browser support is logical properties. And this I think people don't use a lot. I don't know if people don't use these just because they're not familiar with them or because it's faster sometimes to use the non-logical one because you could do a width or you could do an inline size. So inline size is obviously longer to write. So I think people avoid it for certain reasons like that. But you could do like a margin left and a margin right by using a margin inline. There is a bit of a difference whereas if the writing mode was changed that would change with it. But definitely I think logical properties are going to slowly become the norm. And if you're not used to them, at least learn a little bit about them. But if you're doing any multilingual websites, 100% look it up, watch the video I've linked below, look up the MDM article, whatever it is, you'll definitely be wanting to use them. So definitely logical properties are definitely convinced they will become the normal. And with the browser support being this good, there's no reason not really to use them anymore. And this is, I will say, I'm sort of my cutoff where the numbers we're getting are about 95%. And we're gonna start entering into a realm with less supported features. This is the is selector, which is still up there. And is lets you group things. The only thing with this is you'll see that there's like some older versions of it that it mentions here. So we're sort of dropping more into like the 92%, 93% range, so it isn't quite as well supported. But is basically lets you group selectors and instead of having like these long comma separated lists, it's a lot easier to do. And it combines a lot with the where selector and the where selector didn't have previous versions. This is like the specificity killer. Anything within where gets zero specificity, super useful. You might wanna be cautious when using it depending on what your audience is. For me on my own site, I could probably use it safely because everybody visiting my site are generally gonna be developers. So they're gonna be on up-to-date modern browsers. But if I had to worry about people on older devices and other stuff, maybe there's a little caution that should be thrown to the wind once we start getting into these lower numbers. Now, one feature that people remind me about all the time still is when I use Gap with Flexbox. And I guess in a way, it is at 92%. Whereas if you just look up Gap, you'll see about 95% because that's about the same as Grid or probably is the same as Grid support since that's I think what that number is looking at. Cause here, yeah, we can see it matches the number there. And so the main culprit here is older versions of iOS. It is like 0.44%. So that's sort of the culprit and tends to be the main culprit cause it's people on, or I should be looking at iOS. Sorry, it's almost 1%. So this is where people on old iOS devices can't update their browser and they're sort of stuck on these older ones. And of course this can happen not only on iOS, it happens on with Android devices as well where you can't always update but Safari really locks things down. And the problem also with iOS is every browser on iOS is running WebKit. So they're just basically skins of Safari, Chrome, Firefox, whatever you're using. It's just Safari under the hood. So it's a little bit more limiting. And it is one of those things again that you should probably take into account depending on your audience. But the support is probably better than some people realize at this point. One thing that actually might have worse support than people realize is aspect ratio which is around 92%. Cause no one ever questions me when I use this. I get so many comments when I use Gap but if I use an aspect ratio it just goes by like, sure aspect ratio, fine. And it's super useful cause here instead of setting a, when I did the width and the height here, I could just do an, instead of setting a height, I could do an aspect ratio of like 16 over nine. And it's going to figure out the height based on the width and set it to 16 over nine. And with the object fit cover there, it's just magical, right? Or, you know, I wouldn't normally do this but we could do a nine over 16 if we needed to just to show you a little bit of how it's working right there. But yeah, just to say that it's interesting, sometimes people just assume I think some of these work really well and some don't. Now the one difference I would say between using something like an aspect ratio over Gap is if Gap doesn't work, it could potentially break your layout a little bit. Whereas if aspect ratio didn't work, the images, it might not look as pretty but it probably wouldn't cause the same layout issues that you might run into Gap not working. So just to throw that out there, you know, it's a little bit about what I wanna talk about here is also like, what happens when these features don't work and how important is it if they work or they don't work? And we'll, again, I'm gonna talk more about that as we go through. Moving on next, we have cascade layers which I haven't used a ton of though I have covered them and I do think that they're gonna start being something we see popping up more and more, especially within different frameworks and stuff where it basically just allows you to set like layers of CSS that control your specificity a little bit. So you could have a base layer that could have the highest specificity you wanna have and then a layer underneath that one that is just using an element selector and because it's in a higher priority layer that will actually have presidents over even like an ID selector or something in the base layer and it can be a nice way to organize your CSS. Up next, we have has and I think has has been one of those things that has gotten a lot of hype lately. And of course always comes with the caveat of check your browser support but check this out. We're sitting at 87% already. It has not been out very long and it is completely, this is one of those like game changers in what it allows you to do and it's already really high. We're waiting on Firefox to finally get around to supporting things because as we can see here it is just behind a flag in Firefox. And once they finally do get their implementation set and it's in the production version of it, it's just going to be a matter of time as people get onto the newer versions of the evergreen browsers. And of course the one caveat as usual be people on older iOS devices and older devices that just can't update. That's always gonna be sort of the limiting factor in the browser support for a lot of these things. Next up is container queries which is the next one that is a huge game changer which is also at 87%. Is that the same as has? It is, I mean they're basically the same. They came out around the same time and that's just incredible. And if you don't know about container queries it's like a media query but it's for looking at the container size, the parent size rather than looking at the viewport size. And it's just so much more useful and will completely change especially in a world today where we're so focused on components and now you can really scope your components styling based on the parent that it's in instead of having to worry about viewports. It's a really sort of logical way to work and super nice. There is one thing you will notice here with container queries. If you look them up container queries is the first thing that comes up is style queries. Style queries are a little bit different that instead of the size of the parent it's going to be based on does the parent have this style? What could be like is the background this value? Yes, then I want these styles. So you can style something based not just on the size of something but eventually we'll also get to where you can style things based on the styles of what it's inside of which is kind of crazy. Yeah, we're getting there but container queries now definitely something you can experiment with, play with and potentially use in production. Once again, we'll get there in a little bit. Another one that I've been using a lot lately which people don't mention too much about the browser support surprisingly compared to has anyway which is also sitting at this 87, almost 88% range is the dynamic viewport heights. I looked up D so it's the dynamic viewport height. This is also like SVH for the small viewport height and the LVH for large viewport height. And these are a lot like your viewport width your viewport height and all of that but the difference is it takes into account the UI elements on say your phone. So I know people with VH always get annoyed on iOS because it causes problems sometimes and this accounts for like the address bar that moves in and out. So the viewport height adjusts, that's your DVH. The SVH is also really useful where it's just always assuming that those UI elements are in there. So some useful things that we can probably start playing with these days. There's also the media query range syntax that I've talked about. It's a little bit, let's just zoom in so we can see a little bit clearer because it's pretty obvious how it works. I'm super excited about it. This is definitely on the lower, we're hitting 80% now. It's not fantastic, but it's one of those things that I think in the short term, like once browser support hits a certain point on here it's just going to explode because it's such a better way of writing things and a lot clearer what's actually happening. So I've started using them in demos sometimes and I think there's something that we'll see more and more of over time. And the next step is definitely this one doesn't have better browser support than you think, but it will very soon. But just subgrade and that's because Chrome or I should say Chromium team is actively working on it because Microsoft is a big part of the team that's working on it. And this, so we're sitting at only 18% now but as soon as Chromium does get support for it that's going to explode considering most people don't use Chrome. And you saw that when it was like 60% browser support and that was like with the style queries that were 60% when it was only Chrome that was supporting it and that's newer versions of it. So yeah, once Chrome gets subgrade this number is going to skyrocket and it's being actively worked on. I don't know when it's gonna happen but I do think it's gonna be a lot sooner than we're maybe expecting it to even though Firefox has, I'm never gonna get over this, Firefox has had it since 2019. So just saying, I'm happy Chrome's working on it and I'm happy Safari has support for it but come on guys, come on. But I do wanna wrap this up where we're gonna look at this other feature which is floats, CSS property of float with 96% as well, Flexbox has better support than float. That doesn't make any sense. And that's a little bit of the highlight I wanna use this to highlight a little bit of the issue with can I use when you're looking at these browser support tables. And for some of this, the big caveat has actually Opera Mini that does hold browser support back and it's also some of these other ones where it's these on no one ranges even though like global is at 0% for some of these but you're gonna see some where it's giving us either on no one are unsupported and especially with Opera Mini where you're close to 1% support there and some people go with like a 99.5% support range for when something is considered like actually usable in production because they have a very big market they wanna make sure that everybody who's getting it is getting something functional and with Opera Mini being at almost 1% of the users that throws things off and part of it is incomplete data. So here we can see that it's just saying on no one for float which I'm going to assume Opera Mini supports. And then if we do look at some of these other features where it says Opera Mini supports Flexbox but if we go and look at grid it's saying that it's unsupported here and there's a lot of features you might see that Opera Mini is saying are unsupported and between and it's not just Opera Mini but I just gonna focus on that one very quickly and the problem with that is Opera Mini actually has like a full range of browsers it can be a fully functional browser but it's also like a feature phone browser and it depends a little bit on the data settings people are using as well is you could have Opera Mini on your phone now and it's a fully functional browser or you can, and I've played with this you can turn on like the extreme saver mode and it's actually not loading the site on your own phone it's loading it on their servers and serving it up to you that way and it really reduces a lot of what's going on and it's a much basic and more paired down browser and this browser support table doesn't take into account what version of Opera Mini people are using it might be the fully featured browser or it might be the completely stripped down one that doesn't actually support RID but we don't have the number breakdown of that here and the other thing is I'm just looking at global numbers here and I sort of said this along the way of looking and seeing what your audience is actually using because maybe I have an audience that is on really old iOS devices for some reason or if you're working in the medical field you're probably dealing with PCs that are still running Windows XP and are on IE 10 and you do have to support that and that's just the reality of things whereas me personally if I'm putting a site together now I'm not worried about Internet Explorer at all and for many, many things we don't need to worry about Internet Explorer anymore but it really does depend on your audience and how many people are visiting your page and then the other thing to take into account is what happens if the feature doesn't work? Does it break the experience or is it just a small progressive enhancement that you're using? If I wanted to use subgrid it's very possible that subgrid if it's not working breaks the user experience because the entire layout just falls apart so it's probably not the best thing to be using right now or if I use the Wear Pseudo class and that doesn't work and my entire selector just is considered invalid by the browser and then that could completely break the layout and that could be problematic whereas this is a really simple example and if we go back to this example that I put together here if fit content isn't supported and all that happens is when the user goes on the page it looks like this instead of looking like that that really doesn't matter this is one of those things where yeah it's looking a little bit nicer it's more of how I wanted it to be or the designer wanted it to be but if it doesn't work it's not the end of the world and you have to think about things like that as well is this something that must look a very specific way where it breaks the user experience or is this just a nice to have type feature that improves things? And so maybe you can use something that has bad browser support like text wrap balance which is really, really cool and probably has text wrap balance which I think is only supported in Chrome right now and what that means is when the lines break we can see that if I turn that off that line that's down there will go all the way over with one word here and if not then it wraps and it balances the line out to be a little bit nicer and this is really cool and it's a nice little progressive enhancement that I can add that while it has very bad browser support now that's fine as more people get onto browsers that do support it and as more browsers do support it more and more people will get the nicer experience and another option is this project here by Stephanie Eccles that she recently put out called Supports CSS and it's a bit of a new take on the old modernizer where this uses in browser detection for the support of different selectors and features and that rules and everything and what it will do is add classes to the HTML element and so what this does is it's another approach instead of using at supports you could use that extra class that's being added to target the browsers where that's feature that you wanna use is actually supported and then too it could be another way to separate your concerns of like this is on an older one and this is on the newer browser and so this could be a really nice approach where you're targeting things based on is that class there or not and then you could be adding in your rules like that it also allows for custom tests and a lot more so I definitely would recommend checking it out cause it could be a really good solution as well now this I haven't not covered any video yet but at supports I have looked at so if you'd like to see that one you can check it out right here and with that I would like to thank my enablers of Awesome, Andrew James, Enrico, Michael, Simon, Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your call on the internet just a little bit more awesome