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".
You can simply check if your style with pseudo-class was applied.
Something like this: http://jsfiddle.net/qPmT2/1/
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
If you're OK with using Javascript, you might skip the detection and go right for the shim: Selectivizr