Yavor Atanasov web portfolio

Weblog

2010
07.17

Pitfalls of CSS3

Everyone in the vast community of “web people” these days seems to be extremely excited about CSS3. Along with “HTML5″, “CSS3″ has become one of the big buzz words on the web. Browser leaders like Firefox, Chrome, Safari and Opera started adoption of CSS3 before the final specification has been released. This has made it possible for developers to tap into new style properties, selectors and even transformations. CSS3 is like the new playground that all children have been waiting for and now everyone wants to play. Everyone is excited, but is it for the right reasons?

The CSS3 “Image-less” Hype

Every day, while browsing through tweets and blogs, I find fascinated people spreading the word about “iPhone icons with just CSS3 and no images“, “CSS3 only monster drawing“, “CSS3 iPad no images“, “CSS3 pie chart“, “3D page layout with CSS3“, “CSS3 Animated under sea world“, “3D animated Super Mario, CSS3, no images” and many many more. Recently Smashing Magazine even announced a CSS3 design competition and if you are interested in the results, please do check them out.

CSS3 examples

All these examples are great little experiments, but they do not quite show what CSS3 is all about. Somehow they seem to define as a great accomplishment the ability to create a picture (even an animated one) on the screen without a single image using just CSS as a drawing and animating tool.

That, however, is completely off target. CSS is not a drawing tool and setting the background property to a bunch of meaningless div-s and arranging them together to form an image does not show you the strength of CSS3. On the contrary, it throws web design way back to square one when content and presentation were scrambled together in a hodgepodge of horrid mark-up.

The whole “no images, CSS only” concept might be in danger of going too far. CSS3 is not here to replace images on the web (I am not talking about content images, but styling images), not at all. It is here to replace old techniques of achieving round corners, shadows and gradients using images and poor mark-up. If someone needs a more complex graphic, then he/she should use an image and not try to “draw” one using CSS backgrounds and a bunch of DOM elements. Leave mark-up alone, its duties end when design starts. Besides, HTML5 will give us the canvas where we can actually draw.

Note: I realise that some of the aforementioned CSS3 examples are created probably just for fun and deprived of any serious meaning. However, they create the wrong hype around CSS3 and they fail to show its true advantages.

CSS3 is about HTML semantics

The mark-up, the mark-up, the mark-up! It is all about the mark-up. CSS3′s ultimate goal and reason for being is not to change the face of the web, but to smarten it. Despite all efforts and preachings of web gurus about web standards and semantic web, up until now “sleek Web 2.0″ design with shadows and rounded corners could not be possible without staining the semantics of the mark-up with meaningless div-s, spans-s etc.

Some say Web 2.0 was a revolution. Although that might very well be true, I reckon Web 2.0 has been mediocre in terms of semantics, accessibility and cross-browser/cross-device compatibility, inefficient in terms of performance and somewhat good looking but in a very very artificial way. CSS3 is loaded with the potential to facilitate the emergence of the next iteration of the Web – fast, smart, accessible, ubiquitous and beautiful.

CSS3 is about speed

If CSS3 is about semantics, it is about performance as well. That is because achieving ultimate semantic mark-up means using the minimum necessary amount of DOM elements. And since the DOM is slow, reducing its elements will inevitably boost performance.

Another speed enhancing consequence of CSS3 is the reduced number of HTTP requests due to the smaller amount of images that are needed for styling (the upper-mentioned shadows, rounded corners, gradients, etc.) Less HTTP requests means smaller load on servers, more efficient bandwidth usage and ultimately faster websites.

CSS3 is about subtleties

Design should always obey content. Design is there to make content easier to spot, read and digest. Beyond that there is just a thin strip allowing design to solely serve creativity very subtly. The true beauty of design resides within this subtlety. Small and “quiet” visual effects like slight shadows, gradients, soft round corners and very light transitions can really change the look and feel of a page.

Up until now achieving those subtle design effects could not be done without getting in the way of content semantics. And it’s those subtleties that reveal the true potency of CSS3. CSS3 will give us a chance to clean the web and make it beautiful “inside”. Now that’s what I find exciting.

3 comments so far

Add Your Comment
  1. It’s actually pretty amazing how difficult it is to achieve pure semantics. For example, I’m not even sure if CSS3 can change the fact that we sometimes use the CLASS attribute to simply link an element to a style without that CLASS attribute to have any semantic meaning (e.g. CSS frameworks)

  2. Nice article…not too much information there, but I like your opinion. As far as frameworks are concerned (the upper comment)…that’s why I tend not to use them :)

  3. Thanks guys. Yeah, there’s nothing ingenious in what I say, but that’s exactly where my point lies. HTML is simple and should be left simple..but I guess simplicity is not simple to achieve :)
    Otherwise I am thankful of CSS3 and I am very excited about it

Your Comment