Re: Stand-in color before images load

On Tue, 29 Mar 2005 08:48:03 +0100 (BST), David Woolley  
<david@djwhome.demon.co.uk> wrote:

>
>> div {
>> background-color: #fff;          /* white bg in div */
>> }
>>
>> h2 {
>> color: $fff;                     /* white text in header */
>> background-image: url(cool.png); /* a dark yet transparent image */
>> background-standin-color: #000 ; /*the bg will be black till image
>
> This doesn't degrade gracefully.  If you set a foreground colour, you
> must set a background colour that contrasts, and you must do using the
> same generation of CSS attributes as used to set the foreground colour.

After the shift to CSS based on supported-properties which might indeed  
solve the degrade problems but get rejected for some reason, and thinking  
some of us would really really like this standin-colour thing when working  
with transparent BG images (just because we care about accessibility), and  
bearing in mind David Woolley's comments on degradation and accessibility  
for old generations, I change this proposal just a little bit.

When background-standin-color property is understood by the user agent,  
the background-color property will be set to "transparent". When the image  
is succesfully loaded, the color used in background will be set to  
transparent so we can see out alpha BG in its full glory. Here's the  
example:

--
div { background-color: #fff; /* white bg in div */ }

h2 {
color: $fff;                     /* white text in header */
background-image: url(cool.png); /* a dark yet transparent image */
background-color: #000; /* bg color for old browsers, we can keep our
                            accessible for old browsers, even though
                            our alpha bg image will look awful   */
background-standin-color: #000 ; /* user agent who understands this line
                            will override background-color -as if it is set
                            to transparent-. It will keep background color
                            as #000 until the bg-image is fully loaded. */
--


And no, it is not hard to check if the image is fully loaded.

This way, for authors who care about accessibility, the problem is solved,  
even if it would not look ultra-nice on older browsers. If the author  
would prefer his page to look nice even for older-browsers, he may omit  
background-color and use just background-standin-color, keeping it  
accessible for new generations only when images are not loaded.

-- 
Emrah BASKAYA
www.hesido.com

Received on Sunday, 10 April 2005 13:45:03 UTC