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

Brad Kemper wrote:
>  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.

There’s really no need to hijack another specification. Just define a 
new at‐rule:

h1 { background: transparent url("image.png"); }
@missing resource("image.png") { /* missing is a synonym for disabled, 
blocked, unsupported, malformed, inaccessible, incomplete, etc. resources */
    h1 { background-color: black; }
}

Another Potential Scenario:

<object type="image/png" data="image.png">
    <p>This is a sentence.</p>
    <p>This is a sentence.</p>
</object>

object { display: block; margin: 1em; background: crimson; }
@missing resource("image.png") {
    object { background: transparent; }
    object::before { content: "Fall‐Back Content:"; display: block; 
color: red; font-weight: bolder; }
}

— Patrick Garies

Received on Sunday, 6 April 2008 07:50:10 UTC