Blog

My disappoint about CSS3

20 January 2012 / 3 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!

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

Comments (3)

  1. Álvaro Carneiro

    2012-01-24 11:39

    I hate the prefixes too, but i use lesscss and ready! (i not tried yet with gradients)

    Reply

  2. Vitall

    2012-04-23 15:49

    Funiest thing I have seen in a long time, but please keep up your opinion and keep using pngs, so there is more customers for real coders, that also care for a websites performance (and for the performance of a webserver) + don't have as much time as you bviusly have (since writing all these lines, still beats to have to go back to Photoshop and co, to make some minor corrections).Also if you want to use the same gradient in different sizes, a PNG loses extreme quality, duo to scaling (unless you want to use an own png for each different sized box).Also make some reading why there are syntaxes, they are there, so you can make corrections, for the case something unintended happens.And for PNG rendering: Chrome renders them different to Firefox and IE 9 / 10 dose here the best job, as soon you use alpha values, so much for your theorys, you might want to buy some glasses .....

    Reply

  3. Abil

    2012-05-10 21:15

    Your answer shows real intellignece.

    Reply

Leave a Comment

* required