如何在使用webkit-image-set时为非WebKit浏览器呈现备选内容？

Question

我正在使用webkit-image-set来让我的图片在Retina显示屏上看起来更漂亮

由于这个CSS选择器不能用在img标签上，所以我需要一些HTML和CSS代码来实现这个效果（就像Apple在2012年WWDC会议上展示的那样）

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

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

在我Retina MacBook Pro上看起来很棒！当然，如果我使用Firefox时，它只是一个空白点，这是我所期望的。我确定在IE中查看时也不会显示任何内容。它也不太易于访问。

那么，我可以添加什么代码来实现以下功能：

1. 显示图像（可能是低分辨率版本）
2. 可能添加一些文本或alt文本，以便对受损访客更加友好。

- bpapa

Answer 1

你无法为CSS背景设置alt文本（至少不能将背景用于语义上有意义的图像），但是设置备用背景很容易：

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

非 WebKit 用户将忽略第二个声明，而 WebKit 将忽略第一个声明，因为第二个声明覆盖了它。

- Boris Zbarsky

---

完全同意我在这里做错了事，但是因为这是为 iPhone 应用程序而设计的，而且我本来就是苹果粉丝，所以我并不太在意。但是，为了可访问性，如果在 div 中放置一些与我的背景颜色（白色）相同的文本怎么样？ - bpapa

但是这样做不会导致验证失败吗？因为你定义了两次背景图片。 - Kobi Tate

@KobiTate 定义两次并没有什么不合法的地方。当然，这与一开始使用-webkit的东西一样无效。 - Boris Zbarsky

@bpapa 如果您设置了与文本颜色对比的背景颜色（而不是背景图像），那么它将起作用...否则，我不认为在禁用图像加载以提高可访问性但未使用文本阅读器的浏览器中会起作用。 - Boris Zbarsky

Answer 2

也许你可以创建另一个专门针对非 WebKit 浏览器的类。

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

然后使用jQuery检测非Webkit浏览器

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

- Kobi Tate

---

我刚刚测试了一下，确保这在Firefox中可以正常工作，使用以下jsFiddle http://jsfiddle.net/acBLr/。 - Kobi Tate

你的CSS与JS不兼容... 更重要的是，像这样的浏览器嗅探通常是一个坏主意。 - Boris Zbarsky

@KobiTate：你正在给 #iconImage 添加 .nonWebkit 类，因此 CSS 选择器应该是 div#iconImage.nonWebkit（请注意没有空格）。 - daGUY

@KobiTate 正如 daGUY 所说，你多了一个空格，这完全改变了选择器的含义。 - Boris Zbarsky

@BorisZbarsky 不是故意加空格的。已修复。 - Kobi Tate