javascript - 如何检测对样式的 “scoped”属性的支持

是否存在用于确定用户浏览器是否支持“样式”元素上的“范围”属性的推荐测试？

最佳答案

我认为没有推荐的考试，但是我只写了一个，我会推荐

var is_scoped = (function(s) {
    s.setAttribute('scoped', 'true');
    return !!s.scoped;
})(document.createElement('style'));

用作

if ( is_scoped ) {
    // scoped styles are supported
}

FIDDLE

当前范围内的样式仅在最新的Firefox中受支持。

写得更冗长一些，更容易看到正在发生的事情

var style = document.createElement('style');
style.setAttribute('scoped', 'true');
var is_scoped = style.scoped === true;

我们创建一个样式标签，并将scoped属性设置为true。
在支持范围的浏览器中，该浏览器还设置了基础scope属性，因此style.scope在支持的浏览器中将为true，在不支持的浏览器中，它将为undefined。

这是检查支持多种功能的常用方法，并且与scoped一样有效。