RE: first IE10 preview available, with multicol, flexbox, grid and gradients

I believe the spec directly or indirectly indicates they should work in the following locations:
1. background-image and background (with or without layers)
2. list-style-image and list-style
3. border-image
4. generated content

Supported in first IE10 preview:  usage 1.
Not supported in first IE10 preview but stay tuned: usages 2, 3, and 4.


Quick note on the Preview:
Contrary to some confusion expressed in blog commentary, the # numeric syntax is a limitation of the CSS Gradient Maker demo -- not of the product code.


More details...

IE doesn't support border-image generally, so gradient support is moot for them unless that changes.

For list-style-image (aka "bullets"), linear looks a bit out of place unless you like rectangles or rotated "pointy dashes".  Radial has some value, but you have to be careful with your color stops, and use "contain" with a final transparent stop at <= 100%; unless of course, again, you really like rectangles.

For generated content the spec is a bit hazy (IMO), but it seems reasonable that authors will want the functionality.


Something to think about for CSS.next:

If list-style-image supported layers, you could combine the "pointy dashes" to make somewhat more interesting colored arrows.  Of course, to control the direction they point you need to get creative with transforms as well.

Here's an example:
 div {
  width: 1em;
  height: 1em;
  background-image: -moz-linear-gradient(top right, transparent 25%, red, orange, yellow, green, transparent 75%),
                    -moz-linear-gradient(top left, transparent 50%, blue, indigo, violet);
  background-image: -ms-linear-gradient(top right, transparent 25%, red, orange, yellow, green, transparent 75%),
                                  -ms-linear-gradient(top left, transparent 50%, blue, indigo, violet);
  background-image: -o-linear-gradient(top right, transparent 25%, red, orange, yellow, green, transparent 75%),
                    -o-linear-gradient(top left, transparent 50%, blue, indigo, violet);
  background-image: -webkit-linear-gradient(top right, transparent 25%, red, orange, yellow, green, transparent 75%),
                    -webkit-linear-gradient(top left, transparent 50%, blue, indigo, violet);
  background-image: linear-gradient(top right, transparent 25%, red, orange, yellow, green, transparent 75%),
                    linear-gradient(top left, transparent 50%, blue, indigo, violet);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
 }

- Brian


> -----Original Message-----
> From: www-style-request@w3.org [mailto:www-style-request@w3.org] On
> Behalf Of Philippe Wittenbergh
> Sent: Wednesday, April 13, 2011 7:05 PM
> To: Alex Mogilevsky
> Cc: www-style list
> Subject: Re: first IE10 preview available, with multicol, flexbox, grid and
> gradients
> 
> 
> On Apr 13, 2011, at 6:11 AM, Alex Mogilevsky wrote:
> 
> > ... and CSS Gradients too!
> 
> Do gradients apply to all properties where <image> is allowed, or only to
> background-image ?
> IOW, can gradients be used for list-style-image, or border-image (which IE
> apparently still not support) ?
> 
> (I can't test, no suitable OS here…, donations accepted)
> 
> 
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.com/

> 
> 
> 
> 
> 
> 
>

Received on Thursday, 14 April 2011 03:07:05 UTC