We are extremely excited to be able to provide vendor-prefixed support of CSS3 Gradients
in Internet Explorer 10 Platform Preview 1!
CSS3 Gradients comes from a subsection of the
CSS3 Image Values and Replaced Content specification, which is still in Working Draft status. Using
CSS markup, a gradient image is generated by the browser and can be rendered where
CSS images are permitted. In Platform Preview 1, CSS3 gradients can be used as a
background-image.
Why use CSS Gradients?
Gradients are popular among Web developers for creating aesthetically pleasing sites.
They’re often used as a way to create a sense of depth or to add a splash of color.
Backgrounds of text and menus are common places where subtle gradients can be found.
A few simple examples of subtle gradients used in the backgrounds of sites and menus
The most common way to achieve a gradient effect today is by using a raster image
where the gradient is desired. With CSS Gradients, a Web author doesn’t need to
create a separate image for the gradient. CSS Gradients enable CSS markup to describe
and generate a gradient image that transitions color seamlessly. Just like solid-colored
backgrounds, the gradient background can be specified entirely in CSS. On top of
that, the generated gradient image can depend on the size of the container to which
it is applied. For instance, specifying a radial gradient that spans the background
of the <div> element is simple even as the size of the <div> changes.
Using percent units, a single line of CSS markup is sufficient to apply a gradient
to multiple <div>s of different sizes. When raster images are used to display
gradients, the gradient’s fidelity can be lost when it needs to be resized. This
is common for gradients used in conjunction with the background-size property or
when rendering on different devices where zoom is a frequent action.
div { background-image: -ms-radial-gradient(yellow 0%, fuchsia 100%); }
applied to all 3 <div>s
Altering the appearance of a site is easy. All the necessary changes only need to
be made within the CSS stylesheet. Whereas using an external graphic resource will
often require updating the external resource through a separate graphic editor,
changing the color scheme of a site using CSS gradients doesn’t. CSS gradients give
Web authors more flexibility and makes tweaking a site’s appearance less tedious.
Especially with the advent of IE10’s more
adaptable layout models such as CSS3 Grid Layout, Flexible Box Layout, and
Multi-column Layout, the flexibility becomes more important.
The markup also tends to use less bandwidth. For instance, the markup of a simple
two-color linear gradient with the -ms- vendor prefix is 38 bytes. Even when
using four vendor prefixes and a non-prefixed version, the 198 bytes of markup is
still less than the equivalent 215 byte gradient in a 1×100 PNG format. That doesn’t
even count the markup to include the background image, and the assumption here is
that a very small repeating graphic can be used. Additionally, a separate image
file doesn’t need to be loaded, saving download time and bringing a speedier experience
to your users.
How to Use CSS Gradients
Shape and color stops describe a CSS gradient. Gradients can contain multiple color
stops, with an RGBA color and position specified for each one. CSS gradients are
available in two flavors: linear gradients and radial gradients. As suggested by
their names, they describe the shape of the gradient. Below are a couple examples
of the markup for a linear and radial gradient, and the subsequent rendering in
IE10 Platform Preview 1.
As can be seen with the linear gradient, the direction of the gradient line can
be optionally specified either through keywords (top or bottom, left or right) or
an angle, followed by a series of color stops. Each color stop requires a color
and can optionally have a position specified as a distance along the gradient line.
The generated linear gradient contains smooth color transitions between the color
stops.
background-image: -ms-linear-gradient(30deg, orange, yellow 50%, turquoise);
In a radial gradient, the position of the center of the gradient ellipse can be
optionally specified using the same syntax as background-position. The shape (circle
or ellipse) and size of the gradient can then be specified, either with keywords
or lengths/percentages.
background-image: -ms-radial-gradient(top center, circle cover, orange, yellow 25px,
turquoise);
You can add support for CSS Gradients to take advantage of the faster load time
and retained graphic fidelity, while continuing to provide users with an external
background image or solid color for browsers that don’t support CSS Gradients. Simply
make sure the CSS Gradient comes later in the cascade than the external image or
solid color. This way, browsers that recognize the gradient syntax will use the
CSS Gradient; browsers that don’t recognize it will ignore it and use the already-specified
background.
{
background: #FFFFFF;
background-image: -ms-radial-gradient(top center, circle cover,
orange, yellow 25px, turquoise);
}
Known Issues in IE10 PP1
IE10 Platform Preview 1 does not support color interpolation in the premultiplied
alpha color space. This means that interpolation between rgba() color stops with
different alpha values will appear less attractive than it otherwise should
be. This is particularly noticeable with a black, alpha value 0, color stop. When
transitioning to a transparent black color stop, the color transition will appear
to fade to a black color before becoming transparent, instead of fading directly
to more aesthetically pleasing transparent.
Gradient from orange to transparent black, rgba(0, 0, 0, 0), on a white background:
 |
 |
| un-premultiplied color space | premultiplied color space |
IE10 will support color interpolation in the premultiplied color space. This will
become available in a future Platform Preview.
Additionally, support for CSS gradients
in list-style-image and generated content will be available in IE10 and future preview.
Also bear in mind that repeating gradients in Platform Preview 1—available using
-ms-repeating-linear-gradient and -ms-repeating-radial-gradient in place of -ms-linear-gradient
and -ms-radial-gradient—reflect the gradient instead of repeating it. This, too,
will be fixed in IE10.
Interoperability Note for WebKit-based Browsers
At the time of writing, Safari 5.0.4 does not support the vendor-prefixed version of the
CSS gradient syntax as described in the current W3C working draft. Webkit began
with support for a vendor-prefixed version of a different syntax for CSS gradients;
that is the version that Safari currently supports. Recently, however, Webkit added
vendor-prefixed support for the standard version of the gradient syntax. Chrome,
also based on the Webkit rendering engine, supports the W3C draft version of the
syntax at this time (Chrome 10.0.648.204). While it is expected that Safari will adopt the standardized
version of the gradient syntax, it is important to note that if you want Safari
to display CSS gradients today, an additional gradient definition is needed.
Try It Out
Try out CSS3 Gradients in
IE10 Platform Preview 1. We’d love to hear your feedback. You can play with
our
CSS Gradient Background Maker on the
IE Test Drive site to get started and to generate interoperable markup.
Looking for a gradient solution for IE9? Try our
SVG Gradient Background Maker to generate SVG-based CSS background images
that work in IE9 and most other browsers today. By combining an SVG gradient background-image
with a CSS gradients background-image, you can create markup that works in IE9 and
current versions of all other browsers.
—Jennifer Yu, Program Manager, Internet Explorer Web Graphics