Re: [css3-images] Color as an image type

Tab Atkins Jr.:
> Now, we have the image fallback function … - if you just provide a fallback color and no images, it'll return an image of that color - image(yellow).

That part of the ED currently reads:

  <image-list> = image( [ <image-decl> , ]* 
                        [ <image-decl> | <color> | <gradient> ] )

  <image-decl> = [ <string> | <url-token> ] [ snap? && <resolution> ]?

This way, you exclude ‘image(<gradient>, <color>)’ which might be useful for backwards compatibility. Therefore <gradient> would have to be a superset of <color>, but then <color> would be unnecessary in the production quoted above. 

  <image-list> = image( [ <image-decl> , ]* 
                        [ <image-decl> | <gradient> ] )

Also, you might prefer a CSS gradient over a gradient from a picture resource for clients that support the former. So you should rather use one of those, if I’m not missing something:

  <image-list> = image( [ [ <image-decl> | <gradient> ] , ]*
                          [ <image-decl> | <gradient> | <color> ] )

  <image-list> = image( [ [ <image-decl> | <gradient> ] , ]*
                          [ <image-decl> | <gradient> ] [ , <color> ]? )

  <image-list> = image( [ <image-decl> , ]* 
                        [ <image-decl> | [ <gradient> , ]? <color> | <gradient> ] )

Something else; the definitions of the two gradient variants can be described like this:

  <gradients>   = [ <direction> , ]?
                  [ <options> , ]? 
                  <color-stops>

  <direction>   = <start> || <angle>

  <color-stops> = <color-stop> [ , <color-stop> ]+

where <start> and <options> differ among the two, i.e. <options> being empty for linear gradients and

  <options> = [ [ <shape> || <size> ] | [<length> | <percentage>]{2} , ]? 

for radial ones. I wonder whether <start> could be unified to the one from radial gradients, i.e. (the normative references are still missing btw.)

  <start> = <bg-position>

where it’s currently one of background position’s subsets for linear gradients:

  [ [top | bottom] || [left | right] ]

so you can only select edges and corners. In the section on <color-stop>, which btw. should be moved to section 5.3 because it’s a feature common to both types, you already (implicitly at least) allow negative values and values beyond 100%. If you define the angle for corner-only uses as towards the center of the rectangle, which is equivalent to using the opposing corner, as it is specified now, that would be usable for arbitrary starting points, too. The only edge case would be “linear-gradient(center center, yellow, blue)” which should probably be all blue.

JFTR, the current definitions:

  <linear-gradient> = linear-gradient(
	[ [ [top | bottom] || [left | right] ] || <angle> , ]? 
	<color-stop> [ , <color-stop> ]+
  )

  <radial-gradient> = radial-gradient(
	[ <bg-position>                        || <angle> , ]? 
	[ [ <shape> || <size> ] | [<length> | <percentage>]{2} , ]? 
	<color-stop> [ , <color-stop> ]+
  )

  <color-stop>  = <color> [ <percentage> | <length> ]?

  <bg-position> = [
      [ top | bottom ] 
    |
      [ <percentage> | <length> | left | center | right ] 
      [ <percentage> | <length> | top | center | bottom ]? 
    |
      [ center | [ left | right ] [ <percentage> | <length> ]? ]
   && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
  ]

Received on Monday, 29 November 2010 22:40:01 UTC