Detect selector support

by James Long

JavaScript

// This is just a "poor man's console" so we can test in IE6.
var console = (function (cn, undef) {
    
    function isBool(obj) {
        return obj === !!obj;
    }

    if (cn.log === undef) {
        cn.log = function () {
            var renderedArgs = [],
                i = 0,
                il = arguments.length;
            
            for (; i < il; i += 1) {
                if (isBool(arguments[i])) {
                    renderedArgs.push(arguments[i] ? 'true' : 'false');
                } else {
                    renderedArgs.push(arguments[i]);
                }
            }
            
            alert(renderedArgs.join('\n'));
            
        };
    }
    
    return cn;
    
}(typeof console === "undefined" ? {} : console));


    
function supportsSelector(selector) {
    var doc = document,
        el = doc.createElement('style'),
        supported = false,
        theRules;
    
    // IE seems to need a type to recognise a stylesheet.
    el.type = 'text\/css';
    
    // This ASSUMES that IE will always give stylesheets a styleSheet method.
    // Watch this space for errors.
    if (el.styleSheet) {
        el.styleSheet.cssText = selector + '{}';
        // May as well save some typing.
        theRules = el.styleSheet.rules;
        // IE7 and 8 map '::before' to ':before' so we can't simply 
        // check that our selector is the same as the returned one.
        // The selectorText of any unrecognised selector is 'UNKNOWN' and 
        // unrecognised Pseudo-elements come back as ':unknown', so we can
        // check for that.
        supported = (theRules && theRules[0].selectorText
            && theRules[0].selectorText.toLowerCase().indexOf('unknown') < 0);
    } else {
    
        // Standards-based browsers need the stylesheet to be appended to the
        // DOM, but they will allow us to simply give the style tag some text.
        el.appendChild(doc.createTextNode(selector + '{}'));
       ...