简短的问题

Question

简短的问题

仅使用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);
    }
}

Answer 1

CSS没有条件语句，因为它不是像Javascript这样的编程语言。虽然，我相信在CSS的工作中可能会有某种条件语句。

你必须依靠JavaScript来实现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行将被忽略，因为它们是未知的。< / p>

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

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中进行条件测试以查看是否支持规则。

Answer 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（Samsung Wave;也基于Webkit）。

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

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

（*）为了演示的目的，使用具有更高特异性的不同CSS规则。在现实世界中，只有一个规则在多个背景之前定义了简单的背景。

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

简短的问题

长问题

2 个答案: