Geek Out! - WordPress tips, XHTML/CSS illumination, and adventures in jQuery

Why I don’t get my hopes up about CSS3

If today I could use CSS3 on every site I built, it would be a dream come true, but the fact of the matter is that I can’t. That is to say, that I can’t rely on it. The reason is due to browser support and market share.

On this site, almost everything is CSS and CSS2. I don’t use CSS3 commonly in my markup for a simple reason: Not all browsers support it.

By “Not all browsers” I mean “Only the newest version of the best browser”. Text-shadow is now pretty universally recognized, but still not in IE, or earlier versions of every other browser. The problem is not the technology (although with Microsoft it is). The problem is the user. Upgrading browsers is seemingly a time consuming pain, so most people don’t want to do it if they can use the internet just fine with the browser they have.

The most egregious offender:

Internet Explorer (IE) is cause for many woes when it comes to web development. IE6 is the most riddled with bugs and standards non-compliant issues, but IE7 and IE8 still have their own quirks and screwups. Let me break this down in list format real quick:

Why can’t we use CSS3 with these browsers?

• A large amount of corporations have not upgraded the browsers on their computers, and the IT guys haven’t made it a priority since most employees shouldn’t be browsing the internet anyway, so a lot of companies have IE6 installed on their Windows PCs and haven’t upgraded.
• A large majority of web users think internet explorer is “the browser” when it comes to web browsing, because it came installed on their computer from the beginning.
• IE7 has the most market share (at the date of this writing) for web users, and it has a plethora of bugs and issues, and those problems aren’t going away.
• IE8 is close to a modern browser, but still doesn’t support all of what CSS3 has to offer. It doesn’t even support rounded corners.

So, effects like text-shadow, which is very handy when you want to add a little something extra to your site are the kind of thing that you can use, but not count on. Where effects like multiple backgrounds, multiple columns (pure css) and rgba only create code that is difficult to maintain (to name a few).

In summary, I’d love to use CSS3 in my markup. I especially look forward to CSS3 columns, but unless I’m designing for a very specific set of web savvy users (which is a small percentage), it’s not realistic yet.

Further Reading:

• Practical Uses of CSS3 – Viget Inspire
• CSS3 Preview
• W3Avenue.com – CSS3 Tips, Tricks and Techniques