How to detect if browser support specified css pseudo-class?

Question

What's concept of detecting support of any css pseudo-class in browser through JavaScript? Exactly, I want to check if user's browser supports :checked pseudo-class or not, because I've made some CSS-popups with checkboxes and needs to do fallbacks for old browsers.

ANSWER: I'm found already implemented method of testing css selectors in a Modernizr "Additional Tests".

Answer 1

You can simply check if your style with pseudo-class was applied.

Something like this: http://jsfiddle.net/qPmT2/1/

Answer 2

stylesheet.insertRule(rule, index) method will throw error if the rule is invalid. so we can use it.

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

If you're OK with using Javascript, you might skip the detection and go right for the shim: Selectivizr