 People often ask me about whether features I'm talking about are currently supported or, you know, they're super helpful and let me know that IE doesn't support the things that I'm talking about. Now, one resource I use all the time to double-check browser support is Can I Use, but I've had a few people mention to me that they're a little bit confused about it and how it works and what they should be looking for, so let's dive in and make some sense of it. All right, so this is the Can I Use homepage right here, and so what can you do here? Well, this is where you can type in the feature that you're looking for, since I look at CSS all the time, let's go and look up something like Flexbox, which we all use all the time to look at that amazing support overall. So when we look here, what can we see? There's a lot of information here, so let's unpack it a little bit. So the very first thing is the support for it, which for Flexbox is almost 99%, which you're pretty much not going to find much higher than that for most properties, and you can see that there's also the global support for it, and then here it says on prefixed, and so sometimes some properties, as you might know, if you've been writing CSS for a while, do require some prefixes, and you'll see that there's actually two values because what they do is where there's sort of exceptions or where things are partially supported or they're using like an older syntax or something like that, they put that in this different color. So really, if you're writing Flexbox and you're not stressing about things very much, it's about 97% support, and it's mostly because of Internet Explorer that's causing the problems there, that shouldn't surprise you too much. But we can see here when we're looking at it that there's a few different things. We can see this giant list of all these browsers, and it's like, wow, some of these, you might not have ever heard of KaiOS browser, for example, and if you hover on top, it actually says that global usage of it and it tells you is at 0.08%. So depending on what type of support you're after some of these, you might not want to be putting all your resources or worrying too much about. But if we go and look, just for example, Internet Explorer is at 1.1%. Did you realize that Internet Explorer is used by so few people? It's good to know. And this is all the way down at 0.02%. So you're like 1.3% of global usage for Internet Explorer for everybody who stresses about it so very much. And interestingly enough, another thing that's important here is they do have these little like two, the four, the four there, let's go and look here, there's a one. So there's a footnote. And when you hover on top, it tells you what it is. I can't move because it jumps over. So there it tells you what the footnote is. It only supports old Flexbox specifications and other stuff. It doesn't support wrapping. So if we go look here at IE 11, it says it has partial support because of a large number of bugs present and see no issues. So there are other things you can see down here, such as subfeatures. You can look at Gap property for Flexbox. That's interesting. I have talked about that in the past and it's a super amazing property that I'm waiting for browser support to get better for. And there's always the no issues section and here it talks about the problems with, say, Internet Explorer 11, which comes up in quite a few spots and in older versions of some other browsers, some no issues with it. It's only really Internet Explorer that still has some problems along the way. You can also get resources if you want to get more information, Flexbox playgrounds and other stuff, which is really, really cool that they have all of this right here. So actually, why don't we go? You can also do this test on a real browser, but if we do that, I do believe that you need an account. So unless you want to sign up for that. But let's go over to subfeatures and click on Gap because here's something that I have talked about before, as I mentioned, that isn't widely supported. And I think this is interesting to look at because this is how I know if things are going to be gaining support, such as the Gap property for Flexbox, which is coming soon to Safari. And so right now browser supports a little bit below 70%. Once that hits, that's also going to open up things in iOS. So all of a sudden, browser support for this is going to skyrocket. We can look up other things here too. And we're going to look up one more CSS one, just because I want to show you, you know, if people complain about grid not being widely supported enough, but come on, if you're using a lot of things, you know, you're using Calc. It's not far off what grid is at. So for all those people that complain, you know, it's not so bad. But another thing that's good to know with can I use is it's not just for CSS. For example, if I put in modules here, I can see what browsers support JavaScript modules. So there we go. And you can see that that comes in. And we get a breakdown of which browsers do and don't support it. So that could be useful in making your decisions. Of course, there's other ways around that as well, which I'm going to look at motion path or yeah, it's motion path, which is using the offset path. And this is something I've been looking into quite a bit. It's really exciting. I don't have any content on it yet. The reason I want to come here, though, is often what you'll see is these little guys that have flags on them. So this is letting you know that it's implemented into the browser, but it's not enabled by default. And you have to go into the settings and then find the flag section and enable it if you want to test it out. So often before features are actually launched publicly and are implemented, they put them behind flags to make sure things are working properly. And then once all the little bugs and things have been ironed out and there's no more kinks left, then they'll push it into a public version. So usually if you see something behind a flag, it also means that it will be coming to a live version sooner rather than later, even though every now and then you'll find something that's just been behind a flag forever and it doesn't seem to ever be gaining support. And one more thing that I do want to look at is I think actually if we go back to flex, actually let's go to gap. I'm pretty sure gap has this where the gap property for flex box. If you look here, it's actually the same thing two times. And I find this happens every now and then and there's a little disagreement sometimes between them. And this is the gap property from flex box. And it shows you everything we were looking at before. But then if I go down, it says CSS property gap supported in flex layout. And it's not the same. This one's at 98.3. This one's at 68.3. This one's at 69. Here it's in the technical preview Safari. Here it's not, this one's not supported in opera. This one's saying it is supported in opera. And the big difference here is this one is from, can I use? And if we come down to here, this one is coming directly from the MDM and the browser compatibility data that is offered from MDN. So sometimes there's a little bit of a disagreement between these two. I don't know what the reason for that is, especially here where you see it's saying it's been supported in opera since version 70. And here they're saying it's not supported in opera. So I don't know why this happens. Usually if there is a discrepancy between the two of them, they're very, very, very small. So I tend not to worry about it very much. And it's less than 1% between the two here. And I find that's usually the case. So just if ever you see it come up two times, it's just, it's two different. Often the second one is coming from the MDN. And that's why there's this double sort of thing that happens. I'm not going to jump into everything here, but a few things that are interesting is the filtered one, which brings it down. And you can change the filtered in the settings here. You can change how it's getting filtered. But the default for filtered is any browser that has bigger than a 0.5% global share of users. And so if you click on that, it eliminates a lot of the extra information that sometimes can seem overwhelming. And it's like, do I even need to worry about those browsers or not? So if you click on filtered, it'll go to more of the browsers that are currently in use, rather than just showing you everything that's ever been out there and overwhelming you a little bit, maybe with too much information. So that can be good to bring things down like this. And for a lot of features, you'll also see that opera mini doesn't have support. And that's because opera mini for the most part is used on feature phones. And it's also very low, like it's trying to save on data as much as possible. It's just the way opera mini works. So a lot of features aren't supported on opera mini. So it is good to know that. But the user share actually I think is relatively low. But it's the user share of it is relatively low. But it's also, you know, it's people that are on feature phones. So they're not going to be getting a regular experience anyway. So that is something that you should be taking into account, but also not stressing maybe too much about but just being aware that some users, you know, there are a lot of people out there and 1% might not seem like a ton, but it's still enough people on a significant amount of people. So because of that, you do want to take into consideration, you know, you do always people worry so much about internet explorer. But honestly, like there's about as many people on opera mini or even more than they are on internet explorer. And that also is something else to think about is that not all of these users are on your website. And depending on how you have analytics set up and user tracking and all of that, it could be really important to look at these statistics for your own site, rather than looking at it for the global share, because depending on what your site is and who your audience is, these numbers can be wildly different. And maybe you're supporting internet explorer when nobody is using internet explorer, or you're not stressing about safari when really you should be stressing about safari because 80% of your users are on it for one reason or another. These are all users, not all the people that are on your visiting your website. So that is an important thing to take into account. But it's obviously a nice starting point when you're looking at when you're looking for all this types of information. Now, as far as what I take into account and what I'm really looking for is I don't use this to tell me what I should be using with my CSS. I don't tell I don't use can I use to inform me about what CSS or what technologies or features I should be using. I let it inform me about what my users have and what considerations I have to put into place. Now, I'm going to be using a lot of I like modern CSS stuff. And let's go and look like, you know, I've used clip path in the past a lot. And with clip path, I have to be aware that there's issues. And, you know, I look at this and I go holy moly. And then I start reading the notes a little bit on it. And I realized that it's using that I can use inline SVG, but I can't use external SVGs. So it's not the end of the world, right? So then, okay, it looks scary, but I don't have to worry about it so much. But then, oh, this one's only supported in Safari using WebKit. So I'm using auto prefix or it handles that for me. But it's just different things that I have to take into account. Like, okay, it's not supported in Internet Explorer. It's not supported in Opera Mini. So what are considerations, what would happen to a user that ends up on here where clip path isn't supported? Or if I get something where this is at like 70% support or 60% support, and then I'm looking at it going, okay, what is their experience going to be if this doesn't work? And can I build in a fallback for them? Or is there something else that I can do instead? And that's it. That's can I use.com. And as far as I'm concerned, it's an essential tool. And since we're talking about browser support, I have a video that does look into how we can use feature queries to use modern CSS features while also making sure there's a fallback for browsers that haven't got there yet. It's linked down in the description below if you would like to check it out. And that's it for this video. I hope you've enjoyed it. A really big thank you to my patrons for all their support. And of course, until next time, don't forget to make your corner the Internet just a little bit more awesome.