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

Question

小问题

仅使用 CSS，如何检测 background-size支持属性吗？如果不支持，我想提供一些后备 CSS。我已经知道如何使用 Javascript 执行此操作，但使用 CSS 更简洁。

长问题

我有一张高分辨率的 Sprite 图像，需要在所有手机上看起来都不错，无论其确切的像素密度如何。通过使用 background-size trick , 我可以适本地缩放 Sprite 。

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

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

/* 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 支持的浏览器版本，以及可能使用上述技巧的选择器。

我找到的是这个 Apple 开发者网站: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 中不可能进行条件测试以查看规则是否受支持的原始问题。