IE10 in the Windows 8 Release Preview supports the W3C Candidate Recommendation for CSS Gradients in their unprefixed form. IE10 also supports the older CSS Gradients syntax from the W3C Working Draft of 17 February 2011 behind the vendor prefix -ms-. This blog post describes the differences between the old and new syntax and behavior and provides some insight into the change.
[h=2]Key Changes[/h] Should you choose to simplify your CSS by making the move from vendor-prefixed CSS3 Gradients to unprefixed CSS3 Gradients, there are some key syntax changes to be aware of. Many gradient generators have provided cross-browser markup, including markup for unprefixed gradients. In many cases, the unprefixed markup is no longer valid according to the CSS Image Values W3C Candidate Recommendation that covers gradients. Here are the changes you should be aware of.
[h=3]Linear and Repeating Linear Gradients[/h] [TR]
[TH="width: 10%"] [/TH]
[TH="width: 45%"] Working Draft [/TH]
[TH="width: 45%"] Candidate Recommendation [/TH]
[/TR]
[TR="class: dif"]
[TD] Direction Keywords [/TD]
[TD] The top, bottom, left, and right keywords describe the gradient line’s direction via its starting point. [/TD]
[TD] The preposition “to” precedes the keywords top, bottom, left, and right keywords describe the gradient line’s direction via its ending point. [/TD]
[/TR]
[TR="class: ex"]
[TD="align: right"] Example [/TD]
[TD] -ms-linear-gradient(top, orange, black); [/TD]
[TD] linear-gradient(to bottom, orange, black); [/TD]
[/TR]
[TR="class: eximg"]
[TD] [/TD]
[TD][/TD]
[TD][/TD]
[/TR]
[TR="class: dif"]
[TD] Corner calculation [/TD]
[TD] Corner keywords specify a gradient line drawn from that corner to the opposite corner. [/TD]
[TD] Corner keywords are preceded by “to” and specify a gradient line beginning from the quadrant specified and ending in the opposite quadrant. The center point of the gradient line intersects a line drawn between the remaining two corners. [/TD]
[/TR]
[TR="class: ex"]
[TD="align: right"] Example [/TD]
[TD] -ms-linear-gradient(top left, fuchsia, yellow); [/TD]
[TD] linear-gradient(to bottom right, fuchsia, yellow); [/TD]
[/TR]
[TR="class: eximg"]
[TD] [/TD]
[TD]
[/TD]
[TD]
[/TD]
[/TR]
[TD] Angle Direction [/TD]
[TD] 0deg is a gradient line pointing to the right. Angles increase in a counterclockwise direction. [/TD]
0deg is a gradient line pointing to the top. Angles increase in a clockwise direction. Old angles can be converted to new angles using the formula new = abs(old
More...