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.
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.
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.
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!
- 1 Create Your Own Yeoman-Style Scaffolding Tool with Caporal.js
- 2 How to Improve Site Performance (and Conversions) with Dareboost
- 3 Why You Need to Know About Sketch's New File Format
- 4 Fetching Data from a Third-Party API with Vue.js and Axios
- 5 Make Your Own Social Network, Game Server, or Knowledgebase! - Sourcehunt