And, yes, it requires using things like multiple background-images, background-size, background-position, background-clip etc.

I see no problem w/ that. Having a gradient syntax that repeats things you can already do w/ other parts of background-* seems rather redundant.

Anyway. Whatever their concerns are, hopefully they don’t change the core of the syntax. We’ve been finding the new proposal way way more useful than the old syntax.

You’re right about the WebKit syntax, it only allows a decimal or percentage value.

According to this bug report the WebKit team are looking at the new syntax but have one or two concerns.

#commentform input[type=“text”]:focus, #commentform textarea:focus {
background-color:#FAEAE6;
}

without specifying a colour, so I get almost unreadable grey text on a pinkish background with my dark system theme.

For sites I visit a great deal I override bad behaviour in stylish, but it’d be nice if you fixed it.

I have the following on my website:
background-image: url(images/background.jpeg), –moz-linear-gradient(#92dbd6, #077582 1152px, #022228);

The intent of this is to provide a gradient from #92dbd6 to #077582 while a 1152px background image loads, and continue from the #077582 final colour on the backgroudn image down to #022228 to offer a seamless shading to dark.

This is, as far as I can tell, impossible in the webkit syntax.
It is a shame since this is a real world example I could use immediately. In Safari or IE, you simply see the background colour of #077582 so the image seems to shade to that on long pages.

In theory I can use background-position and only:
–webkit-gradient(linear, left, left bottom, from(#077582),to(#022228))
That would offer nothing while the image loads, but at least offer a gradient.

*however* webkit has ditched –webkit-background-position and –webkit-background-position-x

So if I did that I’d screw up firefox, which seems quite unfair.

I also tried:
background: url(images/background.jpeg) top left repeat-x, –webkit-gradient(linear,left top, left bottom, from(#077582), to(#022228)) 1152px left repeat-x / 100% 100%;

Which seems to me to be how the CSS3 spec example says to do a combined background — my theory was firefox and other browsers would simply throw out this rule due to the –webkit

However webkit ignores this rule too.

So, my site remains linear-gradient free in webkit.

Basically it boils down to the webkit syntax only supporting percentages in stops, and not supporting pixels for the begin/end (I could do left 1152px, left bottom otherwise)

The Firefox syntax is far more flexible, I hope it becomes standard.

Same in radial gradients as I hope you discovered, with variable size boxes. I had to ditch webkit radial gradiants on variable boxes ’cause they were also unusable.

This post was mentioned on Twitter by stopsatgreen: New blog post: CSS gradient syntax: comparison of Mozilla and WebKit http://bit.ly/6tyBAL/...