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

Question

是否有推荐的测试来确定用户的浏览器是否支持“style”元素上的“scoped”属性？

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，在不支持的浏览器中为 未定义。

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