特征检测的最佳方法：在伪类中聚焦

Question

我找不到任何使用 @supports 的语法与伪类一起工作，除了not它非常特定于该伪类。检测浏览器是否支持焦点内的最佳方法是什么，因为我不想编写大量会在几个版本中发生变化的浏览器技巧？我正在使用 Node 和 npm，但不想为其导入整个包（通常不是处理事情的最佳方式）。尝试读取浏览器版本字符串或使用当今的浏览器解析技巧并不是一个好主意，因为当浏览器开始支持某个功能时很难维护，所以我正在寻找除@supports 之外的功能检测方法。有没有办法在javascript中确定这一点？

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），我想这应该是安全的使用。