Re: fallback color for background-image (ISSUE-5)

On Apr 4, 2008, at 7:29 PM, Brad Kemper wrote:

>> I think you misunderstood me a little. I am still talking about  
>> cases where images, svg, and the like (perhaps even external style  
>> sheets) don't load, especially when they are used for backgrounds  
>> and content (the most common use case anyway) for but where other  
>> properties are set with expectation that they are available. So,  
>> for instance:
>>
>> #myElement {
>> 	background: url(black_shape_with_writing.png) transparent no-repeat;
>> 	color: white;
>> 	font-size:18px;
>> 	content: content;
>> 	}
>> #myElement:not-loaded {
>> 	background-color: black;
>> 	color:yellow;
>> 	font-size:10px;
>> 	content: "not loaded yet";
>> }
>>
>
> So the main difference with the way I have it is that if, for  
> instance, a background fails to load, that can be mitigated using  
> any number of properties. It wouldn't limit you to just using other  
> background properties (just because they happen to be part of the  
> background shorthand) in order to rectify the situation.

A couple more use cases:

You want to use a super-condensed uploaded font, which will allow you  
to have a single line of text in a fixed width space. But if it  
doesn't load for whatever reason, then you want to use a much shorter  
font-size so it can fit on 2 lines:

@font-face {
     src:url("empire.ttf");
     font-family: empire;
}

h1 {
	font-family: empire;
	font-size: 48px;
}
h1:not-loaded(font-family) {
	font-family: arial,helvetica;
	font-weight: bold;
	font-size: 20px;
}

Or, if a foreground image doesn't load, you might want something  
completely different to be shown:

#gallery img {
	display:block;
}
#gallery img:not-loaded {
	content: "image not loaded: " attr(alt);
	color: yellow;
	background-color: black;
}

I suppose this sort of thing could be done in some cases with media  
queries, if the media features on those could be extended to include  
checking for external resource loading. Something like this:

@font-face {
     src:url("empire.ttf");
     font-family: empire;
}

h1 {
	font-family: empire;
	font-size: 48px;
}

@media all and (src: ur("empire.ttf")) {
	h1 {
		font-family: arial,helvetica;
		font-weight: bold;
		font-size: 20px;
	}	
}

Or, getting back to backgrounds:

#myElement {
	background: url(black_shape_with_writing.png) transparent no-repeat;
	color: white;
	font-size:18px;
	content: content;
	}
@media all and (src: url(black_shape_with_writing.png)) {
#myElement {
	background-color: black;
	color: yellow;
	font-size: 10px;
	content: "some other text to match what was on the graphic";
}
}

I'd be pretty happy with that, actually, although I could understand  
why people might be reticent to add it to Media Queries in the CR  
phase. Would it "clarify its meaning" to say that the list of media  
features is a minimal requirement and not an exhaustive list? The  
line about "This specification defines media features usable with  
visual and tactile devices. Similarly, media features can be defined  
for aural media types" implies that it is not a complete list and  
that other features can still be defined.