Question

我想测试浏览器是否支持特定的css属性属性。对于css属性，我可以像

那样做

var overflowSupport = document.createElement("detect").style["overflow-y"] === ""

但是，如果我必须检查特定的类或属性，该怎么办？例如，我想测试对

的支持

overflow-y:auto

并使用它来滚动支持的大div，并在其他地方使用iScroll。

我该怎么做？请帮助。

Answer 1

有点老问题，但我想我会在这里分享我的发现，特别是因为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（供应商是否有前缀）支持的说法：

最新的nexus7（Android 4.1.1）：是的
Android 2.3.x：否
iOS＆gt; = 5：是
iOS＆lt; 5：没有

滚动溢出的功能检测

如果要为元素提供滚动行为，我建议使用特征检测。

以下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
    }
};

Answer 2

如果为dom样式指定了无效值，则会被拒绝。因此，这应该有效：

var testOverflowEl = document.createElement( "x-test" );
testOverflowEl.style.overflowY = "auto";
var overflowSupport = testOverflowEl.style.overflowY === "auto";

Answer 3

选项<{Arnaud Brosseau的答案肯定值得勾选。

无论如何，请考虑使用 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 */
}

在浏览器中测试对overflow-y：auto的支持

3 个答案:

溢出属性支持

滚动溢出的功能检测