5 Things I Hate About CSS3

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:

  1. Forget CSS3 and use traditional development techniques.
  2. 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.
  3. 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!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.ins0mniac.com Patrick Thomas

    “I can’t believe their clients were pleased with the result.”

    Hear, hear!

  • http://prosevisions.com Prose

    Regarding #1,2,3: css3generator.com

  • Ben

    1. Get a decent IDE. I’m using netbeans which supports css3 + vendor prefixes
    2. You should be using a pre-processor such as less or sass. Abstract the vendor prefixes so you don’t need to worry about them.
    3. Netbeans, Eclipse. They’re out there and I haven’t even googled for more yet.
    5. All browsers are different. It’s called progressive enhancement. Same reason why you shouldn’t give your client a design as a jpg.. quickly mocking up a html example is easy, and sets reasonable expectations about browser limitations..

    All solvable problems. Honestly you should do some basic research before posting articles. Just another reason why i’m tempted to remove sitepoint from my rss feed, lack of well researched and quality articles….

  • http://pmdesign.com.ar Pedro Mourelle

    Hi Craig. I see all your points and I just can’t assign any of them to CSS3. All you mentioned here are problems existing since previous versions, not just in CSS3. This ‘ugly’ points are something developers are dealing with since a while, and now -in almost all cases- is a little less annoying to deal with.
    I think CSS3 is a really good thing, far from perfection, but a step higher in CSS evolution and HTML standards.
    Just want to add that all of this CSS hate-points are easily avoidable (and 100% recommended to do so) using CSS pre-processors like LESS or SASS and some JS helpers for older browsers.

  • http://www.paulund.co.uk Paul

    Craig…surely the pros greatly outweigh the cons when it comes to using CSS3?

    • http://www.optimalworks.net/ Craig Buckler

      Absolutely. I write lots of CSS3 articles and think it’s stunning – responsive design in particular.

  • Toby

    @Ben:

    1. This is web dev we are talking about, not java dev. Why anyone would voluntarily tie an anchor called netbeans/eclipse around their neck is beyond me.

    2. Despite their current raging popularity, CSS pre-processors are not a magic bullet solution to everything CSS and they introduce their own set of problems into the workflow (debugging/source mapping).

    3. See #1.

    5. “Progressive enhancement” is the name for a chunk of extra time & effort that is required when making use of newer browser features. It’s a perfectly legitimate thing to talk about in an article called “5 Things I Hate About CSS3″.

  • Phil Anderer

    CSS and HTML complexity must die. The more powerful the microscope the further up our collective ars*s we get.

  • http://thebasementofthealamo.com/ Mark

    I do agree that it is a pain to keep up with the vendor prefixes. I think most web designers have found a deep rooted hate for early IE browsers too.

  • Craig

    “the day they are unified will eventually come” As long as Apple, Google, Microsoft and Mozilla are the primary players this will NEVER happen.

  • Christian

    Now there’s all sorts of CSS3 generators out there.

  • http://www.visnos.com Mike McDaid

    Want I most dislike about css3 is the performance difference across browsers for things like CSS transitions and animations. With CSS hardware accelerated producing super smooth results in some cases, to quite shoddy jerky performance. This reflects badly on the website, yet it is totally out of control of the developer unless they drop the feature.

  • http://www.electricmayhemsolutions.net Adrian Robertson

    It’s the lack of support across different browsers I find most frustrating

    Even IE9 and IE10 doesn’t support some nice, seemingly simple features (although clearly better support than IE8), like transitions, without having to write something for IE-centric browsers

    There are also many differences (or so I have found) between what is supported in webkit vs other engines. Many CSS3 tutorials start with the disclaimer “only works in Chrome / Safari”, though admittedly sometimes this could be just that the example CSS is only using webkit as a vendor prefix

    For these reasons I tend to use the pieces of CSS3 that degrade acceptably, and therefore agree with point 5.2. As something of a part-time freelancer I can’t afford to spend a lot of time figuring out solutions that will work on all browsers, or flip IE to a Javacript solution. I’m sure I’ll get there eventually

    CSS pre processors that people have mentioned is an interesting point, so keen to have a look at those

  • http://gauravmishra.com Gaurav M

    Having Something to moan is great. At least each time there is a fresh feeling with a new thing.
    Industry needs new terms & words to moan, for the freshness.

    CSS3 or CSS4 will always give mixed feelings. But those, who are delighted whether client, dev or designers.. will always demand for that.

  • Ryan

    Thanks for the article Craig. Although I think you’re playing devil’s advocate here (to an extent) I feel like your list of complaints is rather thin. We’re in a much, much better place today than we were even a few years ago, when browser support for CSS functionality was far worse. Gone are the days, for instance, of worrying about transparent PNGs.

    The introduction of and wider acceptance of browsers like Chrome has made developing for the web an absolute breeze in comparison to what it was like prior to CSS3. I’m happy to reference a CSS3 handbook now and again if the tradeoff is rounded corners, drop shadows, transitions, etc.

    • Ryan

      Yikes. I just realized that transparent PNGs are unrelated to CSS. Bad example :) To explain my idiotic statement… I was thinking of IE6 and how we have less to worry about today than we did in the recent past, when old browsers like IE6/7 drove most of us crazy. While the browser market is still fragmented, the general level of support for CSS is much better than it was before. So, while you make valid points above, I think it’s all child’s play and that we have it relatively easy today ;)

  • Ben

    @Toby

    1. Netbeans & Eclipse, like other IDE’s, isn’t language specific. I use it for php, ruby, java, oh and also basic html/css editing….

    2. I didn’t say they were perfect, however they do solve the issue raised by this article. Hell it would be possible to write tools to help with debugging if that’s the gripe. Personally I’ve been using LESS for a couple of years now and debugging hasn’t added any extra dramas. In fact I’ve found my less code is very portable and has saved a lot more time they re-writing css constantly.

    3. See #1. Also non-ide’s such as Notepad++ have extensions to support css3 + vendor prefixes, if IDE’s aren’t your cup of tea.

    5. I’m guessing you’ve never seen a visually impaired person try to use a website before – Progressive enhancement serves a very good purpose.

    “chunk of extra time & effort” – really? progressive enhancement just means taking a different approach to your css & javascript. It’s a mindset, not extra work. You still need to code css and javascript, just the approach is slightly different. Also progressive enhancement helps with SEO..

  • http://www.rackservers.com.au/ Rob RS

    I totally share Craig’s frustration in what is on one hand a stellar leap in flexibility and interactivity, and on the other hand a segregated mess of over-complication… It’s all very good having these tools available but another thing actually making clients aware of the issues in using them. I really like point four, in particular – we simply have to accept that users have such a wide range of browser capabilities that pages are going to appear different. I also hope that the potential encourages users to upgrade their browsers to take advantage of it!

  • http://www.leachcreative.com Andrew

    CSS3 is great and all but all these vendor fixes, along with all the new properties that they are adding….makes it a pain. With CSS 2.1 It took me about 2 hours, to learn the basics, and you could base most everything else off that basic skill set. Not the case with CSS3, I still don’t even know how to use some of the stuff they added in CSS3 at a “professional” level yet, or even how to make it “compatible” with older browsers.

  • http://haunschild.de Marc Haunschild

    Stop moaning, get hard boiled! There is even a book out there about hard boiled web design! – although it is much less hard boiled, than it promises to be. Anyway – no whining there!
    Just take the chances, CSS3 gives us – or write CSS2.1 – who needs people using CSS3 and crying out, that it is work in process, not implemented completely in any browser…? ;-)