在JS中如何检查CSS属性是否受支持？

Question

我希望能够检查用户的浏览器是否支持CSS属性pointer-events(请参阅文档)。例如，目前Opera和某些版本的IE并不支持它。

我想在JavaScript中运行检查，并根据它是否被支持来显示适当的HTML代码。有没有比检查用户代理更好的方法？

- Richard

---

通常你会检查用户代理是什么，从而知道支持什么或不支持什么。 - Endophage

@Endophage：通常你不这样做。特性检测是更好的方法。虽然在pointer-events的情况下，没有可靠的测试。 - thirtydot

@thirtydot 如果你只想做一些有趣的事情，那么特性检测是可以的。但如果你要检测很多特性，比如 Modernizer 中的所有特性，那就效率低下了。 - Endophage

@Endophage：我不确定你在说什么。Modernizr广泛使用特性检测 - 我甚至认为它根本不会“查看”用户代理。 - thirtydot

@thirtydot 我同意，我的意思是，如果你必须为每个功能使用现代化工具编写检查代码，那么阅读代码将变得低效且痛苦，而只需检查用户代理则更为简便。 - Endophage

Answer 1

对于非SVG内容，可以使用以下脚本进行操作：
https://github.com/ausi/Feature-detection-technique-for-pointer-events

您也可以在不使用Modernizr的情况下使用它：

var pointerEventsSupported = (function(){
    var element = document.createElement('x'),
        documentElement = document.documentElement,
        getComputedStyle = window.getComputedStyle,
        supports;
    if(!('pointerEvents' in element.style)){
        return false;
    }
    element.style.pointerEvents = 'auto';
    element.style.pointerEvents = 'x';
    documentElement.appendChild(element);
    supports = getComputedStyle && 
        getComputedStyle(element, '').pointerEvents === 'auto';
    documentElement.removeChild(element);
    return !!supports;
})();
if(pointerEventsSupported){
    // do something
}

- ausi

---

太棒了！感谢您发布这个！ - Serj Sagan

@SerjSagan 现在它也包含在 Modernizr 非核心检测中。如果你想使用 Modernizr，可以访问 http://modernizr.com/download/ 并在非核心检测中激活 css-pointerevents。 - ausi

Answer 2

我认为

if ("pointer-events" in document.body.style)

或者

if ("pointerEvents" in document.body.style)

在SVG内容的情况下，这应该是足够的。

- Knu

---

这段代码在IE9中返回真值，但是不能按预期工作。 - Artyom

@art 这可能是因为IE9没有将此SVG属性扩展到HTML内容。 - Knu

在 Firefox 中似乎恰好相反：你的语句返回 false，但 CSS 的效果是按预期实现的。 - Artyom

哦，我的错 - 没看到编辑。第二个变量在Firefox上正确返回true。 - Artyom

一般情况下可以接受，但不适用于作为HTML属性（而非SVG）的“pointer-events” - @Knu，您能否更新您的答案以反映这一点，以防其他人在将来感到困惑？ - Richard

@Richard 如果必须使用其中一个，请选择第二个变量。我想知道为什么 Webkit 浏览器支持第一个。 - Knu

Answer 3

以下内容在IE 9和Firefox中都为true：

if ('pointerEvents' in document.documentElement.style)

- clarkb86

---

在Opera浏览器中，它绝对不支持它作为HTML属性，所以恐怕那样做行不通。 - Richard

这不是一个答案，但它是真实的。 - taseenb