javascript - 特征检测的最佳方法：focus-within 伪类

Question

我找不到任何使用 @supports 的语法与伪类一起使用，除非not它非常特定于该伪类。

检测浏览器是否支持焦点内的最佳方法是什么，因为我不想编写很多会在几个版本中改变的浏览器黑客？我正在使用 Node 和 npm，但不想为它导入整个包（通常不是处理事情的最佳方式）。

尝试读取浏览器版本字符串或使用当今的浏览器解析黑客不是一个好主意，因为当浏览器开始支持某个功能时将很难维护，因此我正在寻找除@supports 之外的功能检测方法。有没有办法在javascript中确定这一点？

标签： javascriptcssnode.js

Answer 1

由于它是一个伪类，因此是选择器的一部分，因此您需要@supports selector (…)这里的语法 - 但浏览器对此的支持还不是很好。（目前基本上只有 Firefox。）

通过一些快速研究，我发现了https://github.com/Modernizr/Modernizr/issues/2270 - 关于在 Modernizr 库中实施测试的讨论的一部分。用户 patrickkettner 建议以下 JavaScript 解决方案：

实际上！有一个更简单的方法。

document.querySelector抛出无效的选择器。你可以document.querySelector(':focus-within')在 try-catch 中调用，如果它不抛出它应该被支持。我们可能会找到一个给出错误结果的浏览器，在这种情况下，我们需要实际测试样式。然而，与此同时，由于它是一个现代功能，我们现在应该很好地进行嗅探测试

由于这个基本测试似乎仍然是 Modernizer 目前在这方面所做的一切（https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/focuswithin.js），我想这应该是安全的使用。