Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// 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

This comment has been minimized.

Show comment
Hide comment
@jahvi

jahvi Oct 4, 2011

Strange but it returns false on :nth-child on chrome 14 but true on :last-child for example, should it wok properly with :nth-child?

jahvi commented Oct 4, 2011

Strange but it returns false on :nth-child on chrome 14 but true on :last-child for example, should it wok properly with :nth-child?

@jahvi

This comment has been minimized.

Show comment
Hide comment
@jahvi

jahvi Oct 4, 2011

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

jahvi commented Oct 4, 2011

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

@paulirish

This comment has been minimized.

Show comment
Hide comment
Owner

paulirish commented Oct 4, 2011

kay

@RyanS

This comment has been minimized.

Show comment
Hide comment
@RyanS

RyanS 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.

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

This comment has been minimized.

Show comment
Hide comment
@laurenod

laurenod Sep 28, 2012

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

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

@laurenod

This comment has been minimized.

Show comment
Hide comment

can't**

@RaphaelDDL

This comment has been minimized.

Show comment
Hide comment
@RaphaelDDL

RaphaelDDL May 21, 2013

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

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

@grrowl

This comment has been minimized.

Show comment
Hide comment
@grrowl

grrowl Jul 17, 2014

This doesn't work on IE9:

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

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