Modern browsers provide good support for new and existing CSS features but checking for cross-browser compatibility is still important. Review some resources and browser usage in this video.
- [Instructor] Currently, there are a handful of browsers to choose from. Browsehappy.com lists the most widely used browsers and links to downloads to the latest versions. As a web programmer, keep in mind that you can't control which browser your website visitors will use. So make sure your designs and your websites functionality are consistent around browsers. Browsers support used to be a little more challenging when older versions of IE were commonly in use, especially IE6 and IE7. Here's a little illustration on Gizmodo, showing the browser usage change between 2008 and 2015.
As more people upgrade to newer browsers, cross-browser inconsistencies have become less of an issue. For up-to-date usage info, check out StatCounter's global stats to compare browser usage and other options such as platform in versions. You can click on Edit Chart Data to see all the different options for comparing usage stats. The Can I Use website also has browser stats and it actually uses the information from StatCounter but it displays the data in a table.
These are all the different versions with the usage percentage. The most recent versions are listed at the bottom. As you can see, IE6 and IE7 are hardly in use these days. The reason for this is since January 2016, Microsoft officially ended support for all older versions of Internet Explorer. Here's an extra resource if you're interested to know a little more. Even among modern browsers, there are still a few elements which vary a bit more in default styles such as the audio element.
Here's how it looks in Chrome. Let's see how it looks in Firefox. It's quite a bit different. For the most parts, the differences between modern browsers are much less than it was a few years ago; however, testing is important across different browsers. If you're new to CSS, try not to get to bogged down with cross-browser support. The first step is just getting to know how to use the language. Use a modern browser and just be aware that this should be explored in further detail later on in your web development journey.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property