Re: Stand-in color before images load

Mikko Rantalainen wrote:
>>> background-color: #fff;          /* white bg in div */
>>> color: $fff;                     /* white text in header */
>>> background-image: url(cool.png); /* a dark yet transparent image */
>>> background-standin-colour: #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.

You could solve that problem easily by making the "standin-color" 
overwrite the current color instead of the other way around.

Like

  color:#fff;
  background:#000 url(foo);
  background-color-imageload:#fff;

... or so.

A more general way however, to detect whether or not images are being 
load for the complete document could save a lot more issues that might 
come up. Something like

  :supported("image/gif","image/png") div#contact{
   ...
  }

... I'm not sure if :supported would be the correct name, but that can 
be sorted out. Another way would be to integrate this in 
css3-mediaqueries. For example, you only want the stylesheet/style rules 
to apply for devices that support both print and SVG.

  @media "screen and (supported('image/svg+xml'))"

... or so.


-- 
  Anne van Kesteren
  <http://annevankesteren.nl/>

Received on Tuesday, 29 March 2005 11:05:16 UTC