WebKit blog: CSS3 linear gradient style syntax

Web page Production WEBJX article introduction: webkit update for CSS3 gradient style syntax.

Before, I in front of the observation published a " understanding of CSS3 linear gradient ", I believe many students have studied CSS3 gradient, most people will be entangled it, WebKit and Firefox syntax is very different AH. In fact, the syntax of Firefox can be more standardized than the standard of the same. Now that the good news is here, WebKit begins to optimize the syntax of the CSS3 gradient. I don't know why webkit used that type of writing that year (08).

The specific wording is better than the discussion, recently WebKit in its blog introduced the new style of the gradient , the new wording adopted the use of the English-language and Firefox syntax, that is, Split the-webkit-gradient into-webkit-linear-gradient and-webkit-radial-gradient.

Let's look directly at how the code is:

1 2 3 4 5

. selector{ Background:-moz-linear-gradient (left, white , Black );/*gradient for firefox*/ Background:-webkit-linear-gradient, /*new gradient for WebKit/ background:- Webkit-gradient (linear, 0 0, 0 100%, from (#white), to (#black));/*the old grandient for webkit*/ }

Of course, the radiation gradient is also optimized:

1 2 3 4 5

. selector{ background:-moz-radial-gradient (10% 30%, white , Black );/*gradient for firefox*/ Background:-webkit-radial-gradient (10% 30% )/*new gradient for WebKit * Background:-webkit-gradient (Radial, 0 10%, 0 30%, from (#white), to (#black)); Grandient for webkit*/ }

Well, WebKit and Firefox can finally use the same gradient syntax, and of course, when they can get rid of the private prefix best-the best time is IE9 can also perfectly support the gradient t_t

It should be noted that the new gradient syntax is only deployed to the nightly build version of the WebKit, Safari and chrome are not really implemented, but the estimate is not far away ~