代码之家  ›  专栏  ›  技术社区  ›  darkhorse

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

  •  0
  • darkhorse  · 技术社区  · 4 年前

    :focus-visible

    1 回复  |  直到 4 年前
        1
  •  1
  •   Rio A.P Munyaneza Ishimwe Peace    4 年前

    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);
    
    };

    https://gist.github.com/paulirish/441842