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".
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".
Share Improve this question edited May 2, 2015 at 1:37 Sam Hanley 4,7557 gold badges37 silver badges64 bronze badges asked Dec 16, 2011 at 9:08 RaidenRaiden 1351 silver badge6 bronze badges 2- 1 Modernizr detects many things like that. – user971401 Commented Dec 16, 2011 at 9:11
-
I know about Modernizr, but it's don't have tests for css3 pseudo-classes support, only pseudo-elements like
::before, etc. – Raiden Commented Dec 16, 2011 at 10:00
4 Answers
Reset to default 4For anyone still looking for a quick solution to this problem, I cribbed together something based on a few of the other answers in this thread. My goal was to make it succinct.
function supportsSelector (selector) {
const style = document.createElement('style')
document.head.appendChild(style)
try {
style.sheet.insertRule(selector + '{}', 0)
} catch (e) {
return false
} finally {
document.head.removeChild(style)
}
return true
}
supportsSelector(':hover') // true
supportsSelector(':fake') // false
You can simply check if your style with pseudo-class was applied.
Something like this: http://jsfiddle/qPmT2/1/
stylesheet.insertRule(rule, index) method will throw error if the rule is invalid. so we can use it.
var support_pseudo = 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 (pseudo_class){
try{
if(!(/^:/).test(pseudo_class)){
pseudo_class = ':'+pseudo_class;
}
ss.insertRule('html'+pseudo_class+'{}',0);
ss.deleteRule(0);
return true;
}catch(e){
return false;
}
};
}();
//test
support_pseudo(':hover'); //true
support_pseudo(':before'); //true
support_pseudo(':hello'); //false
support_pseudo(':world'); //false
If you're OK with using Javascript, you might skip the detection and go right for the shim: Selectivizr