The State of Browser Support - CSS3

Another consideration that will usually go into whether or not you use a piece of CSS3 is how well-supported it is by major browsers, or the browsers of your particular users. While there are times when you may add more experimental and poorly supported CSS, perhaps as a little Easter egg for a particular browser, usually it’s not practical to spend time adding CSS that will be seen by only a tiny sliver of your audience.

But in order to know which pieces of CSS3 are going to be seen by a good chunk of your audience, you need to know what browsers are currently in wide use.

Browser Market Share
Browser usage is always changing and hard to establish with certainty, but Figure below shows the most used browsers in October 2010, rounded to the nearest percentage. These figures come from the well-trusted and broadly-sourced statistics from Net Applications.

Browser usage share for October 2010

Browser usage share for October 2010

Note how small IE 6’s portion of the pie has become (compared to its peak near the start of 2006, when it had roughly 85 percent of the market, and IE 5.x had roughly 5 percent). While it’s certainly not insignificant, now there are a few more Firefox 3.6 users than IE 6 users; when other versions of Firefox, Chrome, Safari, and Opera are thrown in, IE 6 actually has far fewer users than more modern and standards-compliant browsers do. Often, the first question asked when a blogger shows a cool CSS technique is “But how does it look in IE 6?” However, given current browser statistics, it’s just as relevant to ask how it looks in Firefox.

That’s not to say you should ignore testing in IE 6 or block its users from your sites. We believe your content should be accessible in all browsers, and it’s not hard to make a web page that looks decent and is easy to use in IE 6. But it’s becoming increasingly impractical to spend a ton of time agonizing over making your page look spectacular for a decreasing segment of the audience. Of course, if your particular audience is heavy on the IE 6 users, do what you need to do. As We mentioned earlier, you have to decide what and how much CSS3 makes sense for your own site. Tailor it to the project and users, not to generic overall browser-share statistics.

But unless your own site’s statistics are very different from the overall population, we can no longer use the excuse that non-IE users are a fringe group that doesn’t need special attention. All the time spent making your page look great in IE 6 and 7 might be just as well spent on making it look great in non-IE browsers. And using CSS3 is one of the easiest ways to make your sites look great in non-IE browsers—and even occasionally IE too.

How the Major Players Stack Up
Luckily, the most stable pieces of CSS3 that we’d want to use do have good browser support already. We’ll go over detailed browser-support information in each chapter when we explain each property, technique, or selector, but it’s helpful to get a big-picture view of where the browsers stand. We’ve given each a letter grade that we feel sums up their overall support of properties, selectors, and values new to CSS3.

Safari 5, Safari for iOS4, and Chrome 5: B+. While Safari and Chrome are not the same browser and do have differences in how they render some CSS3 properties, they do share the same Webkit rendering engine and have a nearly identical level of CSS3 support.

They support most of what is new to CSS3. Their edge comes from supporting animations, which no other browsers do. Safari 5 is also the only browser to support 3D transforms. Their main failings are that their gradient syntax is non-standard and their implementations of the multi-columns and flexible box layout modules are buggy and incomplete. They also don't support the template layout or grid positioning modules, but no browsers do yet.

Safari 4 and Safari for iOS3: B. Apple’s mobile operating system, called iOS, is currently at version 3 on iPads and original versions of iPhone and iPod Touch, as well as newer versions of iPhone and iPod Touch whose users have not yet updated. The version of Safari on iOS3 matches up to the desktop version of Safari 4. Safari 4 has mostly the same level of CSS3 support as Safari 5, just no 3D transforms and some minor syntax problems with a few properties.

Firefox 4: B+. Firefox 4 supports all of the same things as Safari 5, except animations and 3D transforms. It makes up for that “lack” with a more standards-compliant gradients syntax, a slightly better implementation of the multi-columns layout module, and support for the calc function, which no other browser supports. It too has a buggy and incomplete implementation of the flexible box layout module.

Firefox 3.6: B. Firefox 3.6 supports generally the same things as Firefox 4, except transitions and calc.

Opera 10.6: B. Opera 10.6 supports mostly the same things as Firefox 3.6, but not gradients or flexible box layout. It supports transitions, which Firefox 3.6 does not.

Opera 10.5 and Opera Mobile 10.1: B-. Opera Mobile 10.1 corresponds to the 10.5 version of the desktop version. These versions of Opera support generally the same things as Opera 10.6, but are a little bit more buggy on a few properties.

IE 9: C+. IE 9 is still a beta as we write this, but for now, it supports roughly half of what the other major browsers so. The upside is that the pieces it supports, it supports well, and without a browser prefix.

IE 8, 7, and 6: D-. Unsurprisingly, since these browsers were released far before CSS3 was well developed, IE 8, 7, and 6 support almost no CSS3. They all support @font-face and the word-wrap property. IE 7 and 8 also support CSS3 attribute selectors. IE 8 also supports box-sizing.

These varying levels of browser support mean that your pages will look different in different browsers. This is OK, and frankly unavoidable, whether you use CSS3 or not. Web pages have never been able to look identical everywhere because of the user-controlled nature of the medium. And today, there’s an even wider variety of devices, monitors, browsers, and settings that people use to browse the web, so you’re even less likely to create a page that looks identical everywhere.

As long as you focus on making pages that are usable and accessible for everyone, the cosmetic differences shouldn’t matter much. That’s part of the philosophy behind progressive enhancement.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

CSS3 Topics