Skip to content

Instantly share code, notes, and snippets.

@paulirish
Created June 17, 2010 08:27
Show Gist options
  • Save paulirish/441842 to your computer and use it in GitHub Desktop.
Save paulirish/441842 to your computer and use it in GitHub Desktop.
// selectorSupported lovingly lifted from the mad italian genius, diego perini
// http://javascript.nwbox.com/CSSSupport/
function selectorSupported(selector){
var support, link, sheet, doc = document,
root = doc.documentElement,
head = root.getElementsByTagName('head')[0],
impl = doc.implementation || {
hasFeature: function() {
return false;
}
},
link = doc.createElement("style");
link.type = 'text/css';
(head || root).insertBefore(link, (head || root).firstChild);
sheet = link.sheet || link.styleSheet;
if (!(sheet && selector)) return false;
support = impl.hasFeature('CSS2', '') ?
function(selector) {
try {
sheet.insertRule(selector + '{ }', 0);
sheet.deleteRule(sheet.cssRules.length - 1);
} catch (e) {
return false;
}
return true;
} : function(selector) {
sheet.cssText = selector + ' { }';
return sheet.cssText.length !== 0 && !(/unknown/i).test(sheet.cssText) && sheet.cssText.indexOf(selector) === 0;
};
return support(selector);
};
Modernizr.addTest('targetselector',function(){
return selectorSupported(':target');
})
@jahvi
Copy link

jahvi commented Oct 4, 2011

Nvm I actually need to test for :nth-child(n)

@paulirish
Copy link
Author

kay

@RyanS
Copy link

RyanS commented Mar 5, 2012

So I am not sure if anyone cares about this but just in case. I was trying to use this test to see if attribute selectors were supported input[type='text'] but ie7 was saying that it didn't even though it did. So I checked out how http://www.css3.info/ was doing their selector tests and ripped out some of their stuff.

First I have styles defined for input[type='text'] {padding: 10px} in an external stylesheet that is loaded before Modernizr. Then I add this test:

Modernizr.addTest('attribute-selector', function () {
        var 
          defaultView = document.defaultView,
          element = document.createElement('input'),
          body = document.createElement('body'),
          style = 'padding';

        element.type = 'text';
        body.appendChild(element);
        document.documentElement.appendChild(body);

        if (defaultView && defaultView.getComputedStyle) {
          var css = defaultView.getComputedStyle(element, null);
          value = css ? css.getPropertyValue(style) : null;
        } else if (element.currentStyle) {
          value = element.currentStyle[style];
        }

        document.documentElement.removeChild(body);
        return value === '10px';
 });

I could be doing something wrong with the above Gist but in case any one else tries to go down this path maybe this will help you.

@laurenod
Copy link

I'm sure this works great - but I can implement... an example would be very useful...

@laurenod
Copy link

can't**

@RaphaelDDL
Copy link

Awesome function, thank you very much.
Also thanks to javier, I wanted to test exaclty what he found, :nth-child(n).

@grrowl
Copy link

grrowl commented Jul 17, 2014

This doesn't work on IE9:

>> selectorSupported('div ~ div')
false
>> selectorSupported('div + div')
false

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment