使用 webkit-image-set 时，如何为非 WebKit 浏览器呈现替代内容？答案

【问题标题】：How do I present alternate content for non-WebKit browsers when using webkit-image-set?使用 webkit-image-set 时，如何为非 WebKit 浏览器呈现替代内容？
【发布时间】：2012-10-16 21:38:56
【问题描述】：

我正在使用 webkit-image-set 让我的图像对于使用 Retina 显示器的用户来说看起来都非常漂亮。

由于这个 CSS 选择器不适用于 img 标签，我有一些看起来像这样的 HTML 和 CSS（如 Apple 的 WWDC 2012 会议所示）：

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

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

在我的 Retina MacBook Pro 上看起来很棒！当然，不是在我使用 Firefox 时：正如我所料，它只是一个空白点。我敢肯定，在 IE 中查看时它也不会显示任何内容。它也不是很容易获得。

那么，我可以在上面的代码中添加什么：

图片（可能是低分辨率版本）显示在
可能是某种文本或替代文本或一些东西，以便残障人士更容易访问。

【问题讨论】：

标签： html css internet-explorer firefox webkit

【解决方案1】：

你不能为 CSS 背景做 alt 文本（尤其是因为背景不应该用于语义上有意义的图像），但做后备背景很容易：

background-image: url(whatever);
background-image: -webkit-image-set(url(WebsiteIcon.png) 1x, url(WebsiteIcon@2x.png) 2x);

非 WebKit UA 将忽略第二个声明，而 WebKit 将忽略第一个，因为第二个会覆盖它。

【讨论】：

完全同意我在这里做错了事，但在某种程度上，因为它是针对 iPhone 应用程序的，而且我是 Apple 的粉丝，反正我不在乎。但是 - 为了便于访问 - 在 div 中放置一些与我的背景颜色相同的文本（白色）怎么样？
但是由于您定义了两次背景图像，这不会无效吗？
@KobiTate 定义两次并没有什么无效的。当然不会比使用 -webkit 的东西开始更无效
@bpapa 如果您设置与文本颜色形成对比的背景颜色（而不是背景图像），那将起作用...否则，我看不出它在浏览器中如何工作为可访问性禁用了图像加载但未使用文本阅读器。

【解决方案2】：

也许您可以创建另一个专门为非 webkit 浏览器设计的类。

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

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

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

【讨论】：

我刚刚使用以下 jsFiddle jsfiddle.net/acBLr 进行了测试以确保它在 Firefox 中有效
你的 CSS 不能与那个 JS 一起工作......更重要的是，像这样的浏览器嗅探通常是一个坏主意。
@KobiTate：您将.nonWebkit 类添加到#iconImage，因此CSS 选择器应该是div#iconImage.nonWebkit（注意缺少空格）。
@KobiTate 正如 daGUY 所说，你有一个额外的空间，它完全改变了选择器的含义。
@BorisZbarsky 不是故意放空格的。固定。