【问题标题】：Detect support for CSS property with CSS only仅使用 CSS 检测对 CSS 属性的支持
【发布时间】：2012-01-10 19:39:20
【问题描述】：

小问题

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

长问题

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

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

有一些 iOS 和 Android 版本是don't support the background-size property，所以精灵看起来会比它应该的大两倍。对于这些旧系统，我想加载一个没有背景缩放的低分辨率精灵：

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

【问题讨论】：

根据您的链接，新的背景属性（包括 background-size）早在 iOS 4.0 和 Android 2.1 就已完全支持。你真的会有很多（任何？）用户使用比这更旧的操作系统吗？这可能不值得担心。
办公室里有 1 个人正在使用 iOS 3.1.3，他不会批准该网站，除非该网站在他的手机上看起来不错。
那他用的是原装 iPhone 吗？我相信即使是 iPhone 3G 也可以升级到 iOS 4。试着解释一下，因为他使用的是一部 5 年的手机，它根本无法支持你正在尝试做的事情......
@supports rule

标签： iphone css mobile mobile-safari

【解决方案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--

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

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

如果您对 background-size 进行页面搜索 (ctr+f)，则表明 iOS 1+ 支持名为：

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

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

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

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

【讨论】：

...但这也有点无关紧要，除非您提供与问题有关的示例...
@Fozzyyuw ：在您的示例中，所有浏览器都会显示较大的精灵，因为所有浏览器都理解background-image。后一个 background-image 规则会覆盖前一个相同的规则。
@JoJo 您错过了找到浏览器不支持的选择器的关键点。此“技巧”已用于针对较旧的 IE 浏览器，例如属性选择器“[foo], .sprite{ /* rules */ }”只会在支持属性选择器“[foo]”的浏览器中呈现，因为这不支持的选择器通过逗号绑定，这将导致整个规则被 IE 6 忽略。在我的示例中，想法是将“小”精灵提供给所有浏览器，然后将大精灵与背景大小适用于所有可以支持特殊选择器的浏览器。
诀窍是查看您是否还可以在不支持“背景大小”规则的同一浏览器/操作系统中找到不受支持的选择器。由于 CSS 如何忽略不受支持的选择器的整个规则块，这让您可以做一种 1:1 的技巧。我承认，如果没有不受支持的选择器可以映射到“背景大小”规则，这可能是不可能的。这可能需要一些试验/错误。
这里使用了这个概念：csszengarden.com/?cssfile=062/062.css IE6 呈现不同。随着浏览器获得更好的支持，这个技巧变得更难使用，但可能还有一些东西可用。不幸的是，在这种情况下，如果 CSS 规则发现错误的选择器，它不会停止解析规则集。否则，您也可以在规则块中使用这个技巧概念。

【解决方案2】：

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

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

selector {
    propertyA: valueA;
    propertyB: valueB;
}

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

剩下的问题是找到一个与background-size具有完全相同支持的CSS属性:)
我在考虑 multi-background ：根据CSS Background Properties support in Standardista，它应该（不）在 IE6/7/8 中工作，但我无法在 iOs 和 Android 中进行测试，只能在 bada/Dolfin 2.0 中进行测试（三星 Wave；同样基于 Webkit）。

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

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

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

【讨论】：