我想测试浏览器是否支持特定的css属性属性。对于css属性,我可以像
那样做var overflowSupport = document.createElement("detect").style["overflow-y"] === ""
但是,如果我必须检查特定的类或属性,该怎么办?例如,我想测试对
overflow-y:auto
并使用它来滚动支持的大div,并在其他地方使用iScroll。
我该怎么做?请帮助。
答案 0 :(得分:8)
有点老问题,但我想我会在这里分享我的发现,特别是因为Inkbug给出的代码示例不能像你期望的那样工作。
overflow-y
自CSS2.1以来一直存在(但它最近已标准化,in the css3 spec)。出于这个原因,support on desktop browsers非常体面。
现在,您在此问的是,当我们在特定元素上指定overflow-y: scroll
时,滚动行为是否真的有效。
此行为最近在移动浏览器中引入。更准确地说,Apple在iOS 5中引入了-webkit
供应商前缀(参见Apple's documentation的第176页)。
我找不到Android的具体信息。
我可以说明对overflow-scrolling
(供应商是否有前缀)支持的说法:
如果要为元素提供滚动行为,我建议使用特征检测。
以下a gist显示了如何检测此scrolling-overflow
属性(它是integrated in Modernizr since)。如果你不想使用Modernizr,这里有一个更简单的版本,几乎完全相同:
/**
* Test to see if overflow-scrolling is enabled.
*/
var hasCSSProperty = function(prop) {
if (window.getComputedStyle) {
return window.getComputedStyle(document.body, null)[prop];
} else {
return document.body.currentStyle[prop];
}
};
var supportOverflowScrolling = function() {
if (hasCSSProperty('overflow-scrolling') ||
hasCSSProperty('-webkit-overflow-scrolling') ||
hasCSSProperty('-moz-overflow-scrolling') ||
hasCSSProperty('-o-overflow-scrolling')) {
return true;
} else {
return false
}
};
答案 1 :(得分:0)
如果为dom样式指定了无效值,则会被拒绝。因此,这应该有效:
var testOverflowEl = document.createElement( "x-test" );
testOverflowEl.style.overflowY = "auto";
var overflowSupport = testOverflowEl.style.overflowY === "auto";
答案 2 :(得分:0)
无论如何,请考虑使用 Modernizr 。
使用他们的addTest
和testAllProps
API函数,您可以轻松检查任何css属性支持:
Modernizr.addTest('overflow-y',function(){
return Modernizr.testAllProps('overflowY'); /* camel case here */
});
然后你可以用JavaScript检查它:
if(Modernizr.overflowY){
/* do something if supported */
}
但它也会在<html>
标记中添加一个类,以便您也可以在CSS上自定义规则:
.overflowY #element {
/* style for browsers supporting overflow-y */
}
.no-overflowY #element {
/* style for browsers NOT supporting overflow-y */
}