Question

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

答案：我发现在Modernizr method中已经实施了"Additional Tests"测试css选择器。

Answer 1

您只需检查是否应用了伪类的样式。

Answer 2

如果规则无效，

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

Answer 3

如果你可以使用Javascript，你可以跳过检测并向右移动垫片：Selectivizr

Answer 4

对于仍在寻找快速解决此问题的任何人，我根据该主题中的其他一些答案总结了一些东西。我的目标是使其简洁。

bestMove()

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

4 个答案: