如何检测浏览器是否支持指定的css伪类？

Question

什么是通过JavaScript在浏览器中检测任何CSS伪类的支持的概念？确切地说，我想检查用户的浏览器是否支持:checked伪类，因为我已经制作了一些带有复选框的CSS弹出窗口，并且需要为旧浏览器做回退。

答：我发现已经在Modernizr的"Additional Tests"实施检验CSS选择器的method。

Answer 1

你可以简单地检查是否应用与伪类你的风格。

事情是这样的：如果规则是无效http://jsfiddle.net/qPmT2/1/

Answer 2

如果你有使用Javascript OK，你可以跳过检测和去正确的垫片：Selectivizr

Answer 3

stylesheet.insertRule(rule, index)方法将引发错误。所以我们可以使用它。

var supportPseudo = function(){ 
    var ss = document.styleSheets[0]; 
    if(!ss){ 
     var el = document.createElement('style'); 
     document.head.appendChild(el); 
     ss = document.styleSheets[0]; 
     document.head.removeChild(el); 
    } 
    return function (pseudoClass){ 
     try{ 
      if(!(/^:/).test(pseudoClass)){ 
       pseudoClass = ':'+pseudoClass; 
      } 
      ss.insertRule('html'+pseudoClass+'{}',0); 
      ss.deleteRule(0); 
      return true; 
     }catch(e){ 
      return false; 
     } 
    }; 
}(); 


//test 
supportPseudo(':hover'); //true 
supportPseudo(':before'); //true 
supportPseudo(':hello'); //false 
supportPseudo(':world'); //false