CSS3 gradient in IE10

The IE10 support for the Preview CSS gradient in Windows 8 release. IE10 also supports the older CSS gradient syntax, which is located after the vendor prefix-ms-, in the work draft of the working-list published on February 17, 2011. This blog post will introduce the differences between the new and old syntax and behavior, and conduct an in-depth study of the changes that have taken place.

Key changes

If you choose to switch from a CSS3 gradient with a vendor prefix to a CSS3 gradient that uses an unprecedented prefix, you need to be aware of some key syntactic changes. Many gradient generators offer cross-browser tags, including those with no prefix gradients. In many cases, the prefix tag will no longer be valid, based on the options proposed by the Consortium for the CSS image values that cover the gradient. Here are the changes you should notice.

Linear gradients and repeated linear gradients

Work Draft alternative recommendations direction the keywords top, NRC, left, and right keywords describe the direction of the gradient line by the beginning of the gradient line. The preposition "to" precedes the keyword top, NRC, left, and right keyword, which describes the direction of the gradient line by the end of the gradient line. Example-ms-linear-gradient (top, orange, black);   Linear-gradient (to NRC, orange, Black); Corner Calculation Corner key specifies a gradient line between two diagonal lines. The corner keyword is positioned after "to" and specifies a gradient line starting from a specific quadrant and ending with the opposite quadrant. The midpoint of the gradient line crosses another diagonal. Example-ms-linear-gradient (top left, fuchsia, yellow);   Linear-gradient (to NRC right, fuchsia, yellow); The angle direction 0deg is the gradient line pointing to the right. The angle value is incremented in a counter-clockwise direction. 0deg is the gradient line that points to the top. The angle value is increased clockwise.   The old angle can be converted to new angles using the formula new = ABS (old−450) mod 360. Example-ms-linear-gradient (200deg, lime, magenta); Linear-gradient (250deg, lime, magenta);

Radial and repeating radial gradients

Work Draft alternative suggestions position position keyword or length describes the center position of the gradient. The position keyword or length must be positioned after the preposition "at" to describe the center position of the gradient. The position is specified after the gradient shape and dimension, if present. Example-ms-radial-gradient (center, aqua, Black);   Radial-gradient (at center, Aqua, Black); Dimension keyword gradient dimensions are defined by one of the following six keywords: farthest-corner, farthest-side, Closest-corner, Closest-side, contain, and vinyl. The gradient dimensions are defined by the following four keywords: Farthest-corner, farthest-side, Closest-corner, and Closest-side. Contain and vinyl are no longer valid, they correspond to the nearest end and the most far. Example-ms-radial-gradient (circle vinyl, lime, black);   Radial-gradient (Circle Farthest-corner, lime, black); Dimension and shape syntax the radial gradient specified with a length must specify the transverse diameter and length of the longitudinal diameter. Radial gradients can be specified only by a single diameter length of a circle. Example-ms-radial-gradient (center, 50px 50px, red, black);   Radial-gradient (Circle 50px at center, red, Black);

Background knowledge

The CSS3 gradient is defined in the CSS image value and in the consortium alternative recommendations for the replacement content module level 3. The gradient content is first added to the 2009 gradient specification. The content will be based on the gradients introduced in WebKit, but the syntax is improved. At that time, WebKit implemented the-webkit-gradient (). The CSS workgroup has repeatedly studied the functionality and changed the syntax. Radial and linear gradients are specified using separate property values Linear-gradient () and Radial-gradient (). Time flies, and a few years later all the major browsers, such as Chrome, Firefox, IE10 Platform Preview 1 and Opera, introduced support for the CSS gradient version described in the February 17, 2011 issue of the Web publishing work draft.

When the working draft was carefully reviewed, the Working group made a number of recommendations for change, which, after some discussion, culminated in the implementation of the changes in the specification. The important changes described in the previous table have improved the old specification by addressing the problem of clarity and consistency. For example, in the old angular coordinate system, the positive angle will increase in a counter-clockwise direction. Conversely, the positive corners of CSS conversions and SVG conversions will increase clockwise. Because of specification changes, the angle that describes the CSS gradient can be consistent with all other CSS angles, and the positive angle will increase clockwise.

In the process of changing the gradient syntax, although the specification is in the working draft phase, compatibility is still a cause for widespread concern. Not all cases can be compatible, but a large amount of existing content can continue to run. The default values will remain unchanged so that their rendering does not change. As far as the gradient direction is concerned, the required preposition "to" can not only enhance the clarity, but also change the valid syntax. The existing content of the previous prefix gradient using the old syntax becomes invalid, so you need to use a version with the vendor prefix.

Update your prefix gradient

With the current CSS3 gradient running steadily, we encourage you to update your gradient markers to correct the alternate recommended prefix gradient syntax. The Internet Explorer 10 Developer's Guide contains a comprehensive update document with no prefix syntax. Because IE10 supports the prefix version, you can also delete a gradient instance with-ms-prefixes. If you are using a corner keyword or angle to describe the gradient direction, you may want to confirm that the gradient is still present as required.

Adding the correct prefix gradient support will keep your content from becoming obsolete while gradients with vendor prefixes are still available in IE10 and other browsers.

-internet Explorer project manager Jennifer Yu