如何使用 JavaScript 检查浏览器是否支持焦点可见？

Question

这个问题相当简单。我想检查浏览器是否支持焦点可见（

:focus-visible

）或不使用 JavaScript。我该怎么做？

Answer 1

console.log(selectorSupported(":focus-visible"))

function selectorSupported(selector){
  
  var support, link, sheet, doc = document,
      root = doc.documentElement,
      head = root.getElementsByTagName('head')[0],

      impl = doc.implementation || {
              hasFeature: function() {
                  return false;
              }
      },

  link = doc.createElement("style");
  link.type = 'text/css';

  (head || root).insertBefore(link, (head || root).firstChild);

  sheet = link.sheet || link.styleSheet;

  if (!(sheet && selector)) return false;

  support = impl.hasFeature('CSS2', '') ?
  
              function(selector) {
                  try {
                      sheet.insertRule(selector + '{ }', 0);
                      sheet.deleteRule(sheet.cssRules.length - 1);
                  } catch (e) {
                      return false;
                  }
                  return true;
                  
              } : function(selector) {
                
                  sheet.cssText = selector + ' { }';
                  return sheet.cssText.length !== 0 && !(/unknown/i).test(sheet.cssText) && sheet.cssText.indexOf(selector) === 0;
              };
   
  return support(selector);

};

所有功劳来自 Modernizr https://gist.github.com/paulirish/441842。

Answer 2

每个支持

:focus-visible

的浏览器也支持

CSS.supports()

API。

所以这应该有效：

window.CSS && CSS.supports && CSS.supports("selector(:focus-visible)")

或者在 ECMAScript 2020 中：

window.CSS?.supports?.("selector(:focus-visible)")

Answer 3

try{document.querySelector(':focus-visible');}catch(e){console.log(':focus-visible not supported');};