Alternate Backgrounds

This came up while commenting on the Multiple Background syntax
(http://lists.w3.org/Archives/Public/www-style/2004Nov/0090.html).

Note that this proposed syntax conflicts with the existing proposed
syntax for Multiple Backgrounds (comma separation) on the grounds that
it's more consistent with existing CSS.

The purpose of specifying an 'alternate' background is as follows:
Currently, a background image can be defined for an element. It's
possible, depending on the background image, to define an image and
also a colour (which would show through if the image could not be
rendered). This limited 'alternate' functionality doesn't apply to
background images that contain transparency, of course.
This new syntax proposal allows for any number of 'alternate'
backgrounds to be specified with precedence in the same manner as for
font-family.

Consider the following syntax:
	node {
		background: url("bg1.svg"), url("bg_alt1.png"), url("bg_alt2.jpeg"), #000;
	}

This matches the operation of the font-family attribute - the UA
should attempt to use the first background if supported. If it cannot
support it then fall back to the second, the third, or if (in the
above example) images have been disabled then use the colour "Black".
Each comma-separated value can be a full-form background style (so
url, colour and position combined) but the UA should render only the
"first choice" background which it is capable of supporting (or which
the user has enabled support for).

The syntax is consistent with existing CSS and the functionality
desirable for a world of User Agents which will forever have varied
capabilities. This allows any future media format suitable for
backgrounds to take precedence over an older format, while maintaining
elegant degradation for non-supporting clients.

Possible problems/shortfalls:
Use of specific background-xxx attributes and precedence could become
syntactically confusing where a 3 item precedence list is defined for
background-image and background-color, for example.

e.g.
	node {
		background-color: #FFF, #F00, #000;
		background-image:  url("bg1.svg"), url("bg_alt1.png"), url("bg_alt2.jpeg");
	}

Consideration should be made for situations where one attribute
specifies more values than another (2 background-color values and 3
background-image values, for example).
The relationship between comma-separated values of background-xxx
attributes must be defined (perhaps to the effect of
"background-color[3] corresponds to background-image[3], if available,
or falls back otherwise", and vice-versa).

Also, since an unsupporting UA would probably ignore a CSS3 line
containing comma characters, it would probably be necessary to specify
a CSS2 compatible "background" attribute and then override it with the
new syntax if backward compatibility was desired.


Regards,

Ben

Received on Tuesday, 23 November 2004 12:33:44 UTC