如何检测样式的“作用域”属性的支持

Question

是否有建议测试用于确定用户的浏览器是否支持“样式”元素的“作用域”属性？

Answer 1

我不认为有推荐的测试，但我刚写了一个，我会推荐它

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;

我们创建一个样式标记并将范围属性设置为true 在支持范围的浏览器中，这也设置了基础范围属性，因此style.scope在支持浏览器时为true，而不支持的浏览器则为undefined。

这是检查众多功能支持的常用方法，它与scoped的效果相同。

Answer 2

你可以试试这个..

var is_scoped = (function(s) {
    return 'scoped' in s;
})(document.createElement('style'));