短缺问题

只使用CSS的CSS属性的支持，我怎么检测到background-size属性支持？如果不支持，我想提供一些后备CSS。我已经知道如何用Javascript做到这一点，但它与CSS更干净。检测与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); 
    } 
}

来源

2012-01-10 JoJo

根据你的链接，新的背景属性（包括背景大小）完全支持早在iOS 4.0和Android 2.1。你真的会在操作系统上有很多（任何？）用户吗？这可能不值得担心。 – daGUY 2012-01-10 21:37:59

办公室里有一个人在使用iOS 3.1.3，他不会批准网站，直到他的手机上的网站看起来不错。 – JoJo 2012-01-10 22:53:37

然后他使用原始iPhone吗？我相信即使是iPhone 3G也可以升级到iOS 4.尝试解释说因为他使用的是5年前的手机，它根本无法支持你想要做的事情...... – daGUY 2012-01-11 16:15:36

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行的风格说火狐，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

- UPDATE 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可能。

来源

2012-01-10 20:19:34 jmbertucci

...但这也有点不相干，除非你提供一个有关这个问题的例子... – Ryan 2012-01-10 20:23:12

@Fozzyyuw：在你的例子中，所有浏览器都会显示较大的精灵，因为所有浏览器都能理解“背景图像”。后者的'background-image'规则将覆盖前一个相同的规则。 – JoJo 2012-01-12 07:31:56

@JoJo您错过了查找浏览器不支持的选择器的关键点。这个“技巧”已经被用于定位老的IE浏览器，比如属性选择器“[foo]，.sprite {/ * rules * /}”只会在支持属性选择器“[foo]”的浏览器中呈现，不支持的选择器通过逗号关联，这会导致整个规则被IE 6忽略。在我的示例中，这个想法是将“小”精灵分配给所有浏览器，然后给这个大精灵设置背景大小到所有可支持特殊选择器的浏览器。 – jmbertucci 2012-01-12 16:31:56

你不能（现在）检测支持物业A和，给予或不这种支持，提供不同的值性质B仅适用于CSS ...

...除非对浏览器的支持属性A和B完全一样！然后按下面的说明：

selector { 
    propertyA: valueA; 
    propertyB: valueB; 
}

都会失败或两者都成功。

剩下的问题是要找到具有比background-size :)
我在想multi-background完全相同的支持CSS属性：它应该（不）在IE6/7/8的工作根据CSS Background Properties support in Standardista但我不能在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规则，用于演示的目的

（*）。在现实世界中，在多重背景之前只会定义一个简单背景的规则。

来源

2012-01-10 22:09:23 FelipeAls

检测与CSS仅

短缺问题

长的问题

回答

相关问题