Support for various CSS features differs from one browser manufacturer to another. Learn where to go to find out whether a feature is supported.
- [Instructor] We've looked a little bit at the history of CSS and talked about how various browser manufacturers have adopted, or not, CSS recommendations over the years. What I wanna talk about in this movie is how you can know whether a particular bit of CSS is both currently recommended by the W3C and what browser support looks like for it. So, here we are, back on the w3c.org website. At a glance, we can see the status of any given module. Now, the snapshots by year here are probably the most helpful, as they'll give you, literally, a snapshot of all current W3C recommendations.
So, that's one way that you can find out the most current state of CSS. I do wanna throw in a quick mention here that if you're ever curious about what's coming down the pipeline for CSS, you can always use this site to view those proposed recommendations as well. So, we know that different browser manufacturers implement standards at their own pace. It's important to know what support looks like before you use some bit of CSS. For instance, if there's some bleeding edge CSS out there or something that's almost a formal recommendation, those might be features you could experiment with in your local development environment, but maybe not something you'd wanna use on the live site.
What I've got here is a table of the most common browsers including mobile browsers. The current version of the browser is denoted by this black outline here and anything that's green means that it has full support. So, you can hover over any of these for more detail. And we can see that Opera Mini doesn't support gradients. Let's go down a bit further and look at this CSS background-blend-mode. At a glance, we can see that support isn't quite universal for this feature yet.
Some browsers like Safari have partial support, Chrome has full support, but IE hasn't even implemented it. So, at the top here, we can see that there is 73.33% acceptance among browsers, and if you count the browsers with partial support, that brings it to a little over 85% of the global support. So, if you see a feature without 100% global support, you have to make decision about whether or not you'll use it or whether you can provide a fallback option for browsers that don't support it.
Now, 85% global acceptance is really pretty high here, but, again, you need to make the decision based on who your audience is. Another similar site to check browser compatibility is QuirksMode. You can click on anything from this Table of Contents and get a quick glance of whether or not support is common. There's also a really cool service called BrowserStack that will take a screenshot of your homepage or any page from your site from various browser simulations and lets you visually see the differences. This is incredibly handy if you don't have a laboratory of computers and cellphones laying around to physically test things.
So, we've got these tools and there are plenty of others out there, but let's get practical about when you should use these tools. The fact is, that cross-browser support for varying CSS features has wildly, and I mean wildly, improved in the past decade. If you're working with basic CSS, like I'm showing you in this course, then chances are pretty high you're not gonna find any compatibility issues. I don't think you need to check the specifications in a site like caniuse.com for every bit of CSS. Rather, I'd recommend using these resources when you're in the final stages of checking the website to make sure it looks good across various browsers or if you're using really advanced or new CSS features.
So, while you probably won't use these tools in your day-to-day work with CSS, I did wanna let you know that there are ways to ensure that your CSS looks great everywhere.
- What is CSS?
- Understanding how CSS works with HTML
- Applying fonts
- Understanding the classic box model
- Setting margins and padding
- Positioning elements
- Basic CSS layout concepts
- Media types and media queries
- Working with CSS frameworks and CSS grids
- Creating responsive layouts
- Tools that help you write and maintain CSS