How do I present alternate content for non-WebKit browsers when using webkit-image-set?

Question

I'm using webkit-image-set to make my images look all nice and pretty for users using a Retina Display.

Since this CSS selector doesn't work on an img tag, I have some HTML and CSS that looks like this (as exhibited in Apple's WWDC 2012 session):

<div id="iconImage">
</div>

div#iconImage {
width:152px;
height:152px;
background-image: -webkit-image-set(url(WebsiteIcon.png) 1x, url([email protected]) 2x);
background-size: 152px 152px;
margin-left:auto;
margin-right:auto;
}

Looks great on my Retina MacBook Pro! Of course, not when I'm using Firefox: it's just a blank spot, as I'd expect. I'm sure it doesn't show anything at all when viewed in IE either. Nor is it very accessible.

So, what can I add to the above code to make:

1. An image (probably the low resolution version) display in
2. Maybe some kind of text or alt text or something so that it's a bit more accessible to impaired visitors.

Answer 1

You can't do alt text for CSS backgrounds (not least because backgrounds should not be used for semantically meaningful images), but doing the fallback background is easy:

background-image: url(whatever);
background-image: -webkit-image-set(url(WebsiteIcon.png) 1x, url([email protected]) 2x);

non-WebKit UAs will ignore the second declaration, while WebKit will ignore the first because the second overrides it.

Answer 2

Perhaps you could create another class specifically made for non-webkit browsers.

div#iconImage.nonWebkit {
    background-image: url(WebsiteIconNonWebkit.png);
}

And then detect a non-Webkit browser using jQuery

if (!$.browser.webkit) {
    $('#iconImage').addClass('nonWebkit');
}