Testing for CSS pseudo-class support with vanilla JavaScript
Yesterday, we learned how to check for CSS feature support with vanilla JS using CSS.supports(). Unfortunately, this method cannot be used to test for CSS pseudo-classes.
Fortunately, user cuixiping over on StackOverflow shared this useful helper method that let’s you do just that!
/**
* Test for pseudo-class support
* @param {String} pseudoClass The pseudo-class
* @return {Boolean} Returns true if supported
*/
var supportsPseudo = function (pseudoClass) {
// Get the document stylesheet
var ss = document.styleSheets[0];
// Create a stylesheet if one doesn't exist
if (!ss) {
var el = document.createElement('style');
document.head.appendChild(el);
ss = document.styleSheets[0];
document.head.removeChild(el);
}
// Test the pseudo-class by trying to style with it
var testPseudo = function () {
try {
if (!(/^:/).test(pseudoClass)) {
pseudoClass = ':' + pseudoClass;
}
ss.insertRule('html' + pseudoClass + '{}', 0);
ss.deleteRule(0);
return true;
} catch(e) {
return false;
}
};
// Run the test
return testPseudo();
};
To use it, pass in the pseudo-class you’d like to test.
if (supportsPseudo(':nth-of-type()')) {
// :nth-of-type is supported...
} else {
// :nth-of-type is NOT supported...
}
Browser Compatibility
This works in all modern browsers, and IE9 and above.