Re: Stand-in color before images load

On Mar 30, 2005, at 4:56 AM, Laurens Holst wrote:

>>> I think that perhaps a different solution would be better
>>> for that, though. Perhaps something like this:
>>> | p { background: transparent url("marble.png", "marble.gif"); }
>> I like that in addition to the above.
>
> Hmm... If you have a mechanism to specify alternate images... why not 
> allow a colour as the last parameter?
>
> p { background: url("marble.png", "marble.gif"), transparent;  }
>
> or
>
> p { background: url("marble.png"), url("marble.gif"), transparent;  }


I like this a lot. How would it mesh with the multiple-backgrounds in 
the CSS3 working draft? It uses the same basic syntax, although mixing 
color with images.

Along these lines, a backwards-compatible tweak might suffice: make 
property declarations only valid if all of their described values are 
valid (i.e., the image in a url() loads).

p {
	background: #f93;
	background: #fc9 url(orange.gif);
	background: #fff url(orange.png);
}

Last one wins -- in CSS2.1, you'd only put the last one. Previous ones 
are alternates. The color in each declaration only renders if the image 
in that declaration loads. In this case:

No images: the paragraph has an orange background color.

No pngs: the paragraph has an orange color halfway between white and 
the default color, which the gif can be anti-aliased to match.

Loaded png: the white background is masked by the png's alpha 
transparency, making it a nice, graduated orange.

Downside: user-agent would have to try to load all images, or do some 
fancy footwork to render all properties without condition, then step 
backwards through those that might fail until one works. Also, the 
parsing mechanism is affected, which is fairly fundamental.

-- 

	Ben Curtis : webwright
	bivia : a personal web studio
	http://www.bivia.com
	v: (818) 507-6613

Received on Wednesday, 30 March 2005 18:44:31 UTC