You knew this was coming. Yes, I still love CSS3 and use it every day — but that doesn’t mean I’m happy with everything. To counterbalance Viki Hoo’s 5 Things I Love About CSS3, here are five things which frustrate me…
1. Property Overload
How often did you consult manuals or reference materials when writing CSS2.1 code? After learning the basics, I suspect you only required a cursory glance now and again.
Those days are gone. Perhaps it’s just me but the sheer volume of new tags is overwhelming. Even when I know a property exists it’s impossible to recall the values. Has anyone learned the all the background gradient and border image options?
While CSS3 definitely saves time, you’ll need to consult online manuals or tools every few minutes.
2. Vendor Prefixes
Vendor prefixes are absolutely necessary. I use them and accept it’s the price to pay for cutting-edge techniques. That doesn’t mean I have to like them. Other developers don’t either — otherwise we wouldn’t be heading for a CSS3 catastrophe.
At best, prefixes result in clunky repetition. At worst, they use completely different syntaxes. There are JavaScript and server-side pre-processors which help ease the burden but none are perfect. After all, if a property doesn’t work in a particular browser is it a problem with your CSS, the browser, or the automatic code-creation tool you’re using?
3. Developer Tools
It’s difficult for any IDE vendor to keep up with the rapid pace of CSS3 development. Does anyone know of an editor which supports all the new properties and syntaxes with all the vendor-prefixed differences? I don’t.
It’s not all bad; there are a number of great online CSS3 tools. However, you still won’t find many decent validators.
4. Browser Support and W3C Politics
Browser vendors have different priorities and release schedules. While it’s easy to pick on IE (IE9 doesn’t support text shadow), even webkit isn’t consistently ahead of the game (Chrome doesn’t support separate animation of pseudo elements). One browser will always be more capable than another, but hype and marketing often get in the way of development. How often have you assumed a browser supports property X, written some code and found it doesn’t work?
The major vendors belong to the W3C and work together to agree standards. In reality, they’re competitors:
- Apple has been accused of implementing iPhone/iPad-specific features which are promoted as an “HTML5 standard” but never submitted to the W3C.
- The proposal to support webkit prefixes in non-webit browsers could break CSS3 as we know it.
- The lethargic rate of the standards approval process highlights the disagreements and political battles.
It’s frustrating. Developers are caught in the crossfire but there isn’t a simple solution. And, before anyone suggests it again, dropping all but one of the rendering engines is not an option and will stagnate innovation.
5. Silly Shim Shenanigans
CSS3 rounded corners have save hours of time during every project. There’s no need for convoluted layouts or multiple background images. Unfortunately, they won’t work in IE8 or previous incarnations of the browser. You therefore have three options:
- Forget CSS3 and use traditional development techniques.
- Accept that no two browsers render the same. IE8 is three years old and was released before the industry jumped on the HTML5 bandwagon. Pages viewed in IE8 will look different (and uglier) to IE9, Firefox, Chrome, Safari and Opera.
- Try and make IE8 look good using JavaScript shims which normally implement old IE-specific filters.
I recommend option two. You may need to educate your clients but their costs will be reduced and, ultimately, it may persuade users to upgrade their browser.
Unfortunately, I keep find sites which add a plethora of shims in a futile attempt to achieve pixel perfection. While pages may look better, it results in bulky code and IE8 often becomes frustratingly slow. I can’t believe their clients were pleased with the result.
In Summary
CSS3 is great. In terms of practicality, it’s progressed faster and is more useful than HTML5 or the assorted JavaScript APIs.
Browser compatibility is an issue but Viki is confident that “the day they are unified will eventually come”. I’m not convinced. We will reach a point when CSS3 is fully implemented but we’ll be moaning about CSS4 by then!
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
