仅使用 CSS 检测对 CSS 属性的支持

Question

简短问题

仅使用 CSS，如何检测 background-size 属性是否受支持？如果不支持，我想提供一些后备CSS。我已经知道如何使用 Javascript 来做到这一点，但使用 CSS 会更干净。

长问题

我有一个高分辨率的精灵图像，需要在所有手机上看起来都很好，无论其确切的像素密度如何。通过使用 背景大小技巧，我可以适当地缩放精灵。

.sprite {
    background-image: url(sprite180x76.png);
    /* 180 / 2 = 90 */
    background-size: 90px auto; 
}

有些 iOS 和 Android 版本不支持 background-size 属性，因此精灵看起来会是应有的两倍大。对于这些旧系统，我想加载一个没有背景缩放的低分辨率精灵：

/* fake CSS */
@notSupported(background-size) 
    .sprite {
        background-image: url(sprite90x38.png);
    }
}

Answer 1

CSS 没有条件语句，因为它不是像 Javascript 这样的编程语言。尽管如此，我相信 CSS 作品中可能存在某种条件语句。

您必须依靠 JavaScript 来实现任何类型的 CSS 条件测试用例。

这意味着，您无法直接检测对 CSS 的支持。

然而，由于 CSS 的“级联”性质，CSS 确实有一个“技巧”，但它仅在需要用相同样式的较新代码替换某些旧代码时才可用。

这听起来很有趣，这里有几个例子：

-moz-border-radius: 6px;
-o-border-radius: 6px;
-webkit-border-radius: 6px;
-ms-border-radius: 6px;
border-radius: 6px;

在支持官方 CSS 的浏览器中，它将采用第 5 行所示的样式。而在旧版本的 Firefox 中，第 1 行将被应用，第 2-5 行将被忽略因为他们不为人知。

另一个（也许更好）的示例可能是：

background-color: #AAA;
background-color: rgba(0, 0, 0, 0.5);

此代码将为背景提供灰色，而较新的浏览器将为其提供透明度为 50% 的黑色，覆盖旧颜色。

希望能有所帮助。

干杯!

-- 更新 --

我刚刚遇到了一些可能有帮助的东西。在 Aaron Gustafson 的书“自适应网页设计”中，他提到如果给定的浏览器/渲染器不支持给定的选择器，CSS 将如何忽略整个规则。

有了上面的概念，如果你能找到一个在旧版本中未实现但在新版本中可用的选择器，你可以这样做：

/* fake CSS */
.sprite {
   background-image: url(sprite90x38.png);
}

[[ selector that is supported by newer browser/OS ]],
.sprite {
     background-image: url(sprite180x76.png);
     /* 180 / 2 = 90 */
     background-size: 90px auto; 
}

这个想法是，对于“旧”浏览器，你可以加载旧的 PNG，但对于较新的浏览器，它将加载更大的 PNG 并应用背景大小。

我唯一担心的是这是否会导致支持的浏览器加载两个图像但应用一个。

这仍然需要在一个版本的另一个版本中找到不受支持的选择器。 Quicksmode.com 可能会帮助您找到一个：

http://www.quirksmode.org/css/contents。 html

-- 更新 2 --

我把它放在评论中，但我会在这里添加它，因为它可能会有所帮助。我花了一些时间试图找出 iOS 3.1.3 支持哪些浏览器版本，以及哪些选择器可以与上述技巧一起使用。

我发现的是这个苹果开发者网站： http ://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariCSSRef/Articles/StandardCSSProperties.html

如果您执行页面搜索（ctr+f）背景大小，它表明 iOS 1+ 支持一个名为：

-webkit-background-size: length
-webkit-background-size: length_x length_y

这可能是一个可能的解决方案。如果在真正的之前添加它，则可以确保向后兼容性。

 -webkit-background-size: length
 background-size: length

希望这有助于找到替代解决方案，因为目前在 CSS 中不可能进行条件测试以查看是否支持规则的原始问题。

Answer 2

您（目前）无法检测对属性 A 的支持，并且无论是否支持，仅使用 CSS 为属性 B 提供不同的值……

除非浏览器对属性 A 和 B 的支持完全相同！然后说明如下：

selector {
    propertyA: valueA;
    propertyB: valueB;
}

要么都失败，要么都成功。

剩下的问题是找到一个与 background-size 具有完全相同支持的 CSS 属性:)
我正在考虑多背景：根据Standardista 中的 CSS 背景属性支持 但我无法在 iO 和 Android 中进行测试，只能在 bada/Dolfin 2.0 中进行测试（Samsung Wave；也基于网络工具包）。

这是一个小提琴：http://jsfiddle.net/PhilippeVay/2VaWu/
显示一个只有任何浏览器都应该显示的简单背景的段落，然后是另一个具有简单背景和（*）使用 background-size 调整大小的多背景的段落，只有现代浏览器才应该显示（较旧的浏览器应显示与第一段相同的背景）。
Fx9 和dolfin 2.0 都可以正确显示第二段。正如预期的那样，IE8 没有。

另一种解决方案是使用浏览器版本可以理解的选择器，该浏览器版本也可以理解背景大小，但其他浏览器版本不能理解。虽然 IE 比基于 Webkit 的智能手机更容易找到！

(*) 出于演示目的，使用具有更高特异性的不同 CSS 规则。在现实世界中，在多重背景之前只会定义一个具有简单背景的规则。