Am I the only one to think that using a number of aspects of CSS3 right now really sucks? The potential it offers is great, but does anyone really think doing something like this for a gradient is a productive use of time?

    background: #9880cc; /* Old browsers */
    background: -moz-linear-gradient(top, #9880cc 0%, #bab3cc 93%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9880cc), color-stop(93%,#bab3cc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #9880cc 0%,#bab3cc 93%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #9880cc 0%,#bab3cc 93%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #9880cc 0%,#bab3cc 93%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9880CC', endColorstr='#BAB3CC',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #9880cc 0%,#bab3cc 93%); /* W3C */

Once upon a time, not that long ago, the trend setters/leaders of the web development community would have lynched you if you so much as dared to use a proprietary tag, be it in the css or the html. Now they’re actively encouraging the above kind of usage?! It’s ridiculous! Firefox, Chrome, Safari, IE and Opera all require different proprietary rules, and then you have the W3C recommended way and then the fallback for older browsers.

A Transform in CSS3 is just as bad:

-moz-transform: scale(0.8) rotate(deg) translate(px, px) skew(deg, deg);
-webkit-transform: scale(0.8) rotate(deg) translate(px, px) skew(deg, deg);
-o-transform: scale(0.8) rotate(deg) translate(px, px) skew(deg, deg);
-ms-transform: scale(0.8) rotate(deg) translate(px, px) skew(deg, deg);
transform: scale(0.8) rotate(deg) translate(px, px) skew(deg, deg);

And this time it’s not the rule value that’s different for each, it’s the rule name!

I think HTML5 (well, XHTML5 for me – I do love a properly closed tag!) and CSS3 are great, don’t get me wrong, and I think we’ve already seen a lot of examples of wonderful sites and demos created using them. But surely how it’s getting there and the asinine number of rules we have to put in for each browser is a major step backwards in what people were trying to achieve only a few years ago? (Ie, a nice compliant standard way of doing things.)

Incidentally; there are a couple great sites that help out doing fancy new CSS3 stuff:

The Ultimate CSS Gradient Generator
CSS3 Generator

Using sites like those can save a bit of sanity.