Blog

My disappoint about CSS3

20 January 2012 / 1 Comments

Hello all,
today I just want to write few words about my personal opinions on CSS3 (wallpaper here).

The last revision of the style sheets introduced many amazing features such as media-queries, but I think that there are also some things that are simply useless by the facts.

One of them is the CSS3 gradients: you need to write tons of lines to just render a gradient. Oh, and you are not sure that the gradient will render correctly on every browser! Take a look at these lines:

background-image: -o-linear-gradient(bottom, rgb(231,97,176) 14%, rgb(255,127,212) 57%, rgb(255,166,255) 79%);
background-image: -moz-linear-gradient(bottom, rgb(231,97,176) 14%, rgb(255,127,212) 57%, rgb(255,166,255) 79%);
background-image: -webkit-linear-gradient(bottom, rgb(231,97,176) 14%, rgb(255,127,212) 57%, rgb(255,166,255) 79%);
background-image: -ms-linear-gradient(bottom, rgb(231,97,176) 14%, rgb(255,127,212) 57%, rgb(255,166,255) 79%);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.14, rgb(231,97,176)), color-stop(0.57, rgb(255,127,212)), color-stop(0.79, rgb(255,166,255)) );
background-image: linear-gradient(bottom, rgb(231,97,176) 14%, rgb(255,127,212) 57%, rgb(255,166,255) 79%);

What?? Do I need to remember all of this to write a stupid two-colors gradient? I'm going to use PNG's again, they renders equally in all browsers. When all browsers will adopt the same syntax, I'll use this feature.

Now, let's take a look at the drop-shadow CSS3 syntax:

-o-box-shadow: inset 0 5px 10px yellow, 0 1px 1px green;
-webkit-box-shadow: inset 0 5px 10px yellow, 0 1px 1px green;
-moz-box-shadow: inset 0 5px 10px yellow, 0 1px 1px green;
box-shadow: inset 0 5px 10px yellow, 0 1px 1px green;

Again, it's so verbose! Millions of years ago each browser adopted its own prefix (or syntax). Why the hell should I write four lines to get a single feature that browser like IE renders like pizza + yogurt?

Shadows are older than computers, and here on 2012 they are still under development on modern browsers (yes, IE8-9 should be modern). The result is that they simply doesn't work as I expected.

I really hope that in a near future browsers will adopt the same syntax on features that can be really useful for developers - but now they are like a Shakespeare poem. What do you think about it? Any comment is welcome here!

@dwightjack You don't need prefixes for box-shadow any more. Have you looked into @prefixfree?

— Lea Verou (@LeaVerou) Gennaio 20, 2012

Feel free to download the "I don't believe in CSS3" wallpaper if you like it!