CSS3 Gradients in IE10 Platform Preview 1
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 1x100 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
Comments
Anonymous
May 04, 2011
The comment has been removedAnonymous
May 04, 2011
I don't understand why you mention webkit in a IE blog post: do you have any plans to switch to webkit as alternative rendering engine for IE? ( this is a long awaited feature ). Thanks for your feedbackAnonymous
May 04, 2011
Maybe I'm missing something, but isn't the first orange example how it should work? If you have a color stop of black even if it's fully transparent, shouldn't the gradient fade through black? If you actually wanted the result in the first example but in the premultiplied space, how would you do it?Anonymous
May 04, 2011
Will these gradients work correctly with rounded corners? In IE9, if an element has rounded corners and a gradient, the gradient acts as if the corners are square and thus extends beyond the rounded corners.Anonymous
May 04, 2011
@sirshannon: Yes, the IE10 implementation of this feature will work correctly with rounded corners. The IE9 capability you're referring to is the legacy IE-specific -ms-filter property.Anonymous
May 04, 2011
great... good jobAnonymous
May 04, 2011
Nice stuff.Anonymous
May 04, 2011
The comment has been removedAnonymous
May 04, 2011
The comment has been removedAnonymous
May 04, 2011
For those wanting more information about the color interpolation, please refer to the second green paragraph here: www.w3.org/.../css3-imagesAnonymous
May 04, 2011
Very cool to see that IE10 will support CSS3 gradients. I hope support for text-shadow is somewhere in the development pipeline. :)Anonymous
May 04, 2011
Good work as always! Is there any chance of a post about the other CSS features you have planned for 10? I'm really hoping for text-shadow and border-image.Anonymous
May 04, 2011
@Premultiplied: Thanks for the link. Although I have to admit that I don't really get the reasoning behind it. Sure, for fully transparent colors this is cool, but for semi-transparent ones it is VERY unintuitive. Hopefully the spec will be changed to not using premultiplied colors.Anonymous
May 04, 2011
The comment has been removedAnonymous
May 04, 2011
"We are extremely excited" means in Microsoft-speech "finally our programmers managed to get the same thing done as the real browsers do for years". Please do deliver once and for all a really good browser, one that even works on XP. And please do a better job to convince all your big customers to abandon all your old browsers up to version 8. And please: no more useless marketing-driven postings. You donÄt do any good for your bad reputation as a "browser"-manufacturer.Anonymous
May 05, 2011
TAKE OUT ACTIVE X!!!Anonymous
May 05, 2011
Hello Internet Explorer Team! I'm sad to say this but.. You guys hardly don't listen.. This is true! Apple company does listen... I might switch from windows 7 to Mac os x :(Anonymous
May 05, 2011
I'm amazed at how many people here have so much free time they can spend it by trolling and saying stupid things. I wish WPF used that premultiplied thing though :(Anonymous
May 05, 2011
You do realize that "hardly don't listen" is another way of saying "do listen most of the time" right?Anonymous
May 05, 2011
It's time to make these forums login only, I think.Anonymous
May 05, 2011
Why is this not being put into IE9?Anonymous
May 05, 2011
@Liam Because IE9 already came out and this feature still isn't ready for widespread use?Anonymous
May 05, 2011
>Yes, the IE10 implementation of this feature will work correctly with rounded corners. Thank the heavens above. and this should have been released in in 9, along with text-shadow. One more headache will be gone, how many are left? Better super late than never.Anonymous
May 05, 2011
The comment has been removedAnonymous
May 10, 2011
The comment has been removedAnonymous
May 10, 2011
@Nicholas: Good question. No, these won't play well together. It's not a good idea to use -ms-filter markup with new IE9 or IE10 features.