Question

How could I check with “simple” JavaScript if the browser supports the HTML5 input type attribute color? (Note: I don’t want to use Modernizr)

Answer 1

A good way can often be to look through the Modernizr source code. Here is the relevant chunk:

// Run through HTML5's new input types to see if the UA understands any.
//   This is put behind the tests runloop because it doesn't return a
//   true/false like all the other tests; instead, it returns an object
//   containing each input type with its corresponding true/false value

// Big thanks to @miketaylr for the html5 forms expertise. http://miketaylr.com/
Modernizr['inputtypes'] = (function(props) {

    for ( var i = 0, bool, inputElemType, defaultView, len = props.length; i < len; i++ ) {

        inputElem.setAttribute('type', inputElemType = props[i]);
        bool = inputElem.type !== 'text';

        // We first check to see if the type we give it sticks..
        // If the type does, we feed it a textual value, which shouldn't be valid.
        // If the value doesn't stick, we know there's input sanitization which infers a custom UI
        if ( bool ) {

            inputElem.value         = smile;
            inputElem.style.cssText = 'position:absolute;visibility:hidden;';

            if ( /^range$/.test(inputElemType) && inputElem.style.WebkitAppearance !== undefined ) {

              docElement.appendChild(inputElem);
              defaultView = document.defaultView;

              // Safari 2-4 allows the smiley as a value, despite making a slider
              bool =  defaultView.getComputedStyle &&
                      defaultView.getComputedStyle(inputElem, null).WebkitAppearance !== 'textfield' &&
                      // Mobile android web browser has false positive, so must
                      // check the height to see if the widget is actually there.
                      (inputElem.offsetHeight !== 0);

              docElement.removeChild(inputElem);

            } else if ( /^(search|tel)$/.test(inputElemType) ){
              // Spec doesnt define any special parsing or detectable UI
              //   behaviors so we pass these through as true

              // Interestingly, opera fails the earlier test, so it doesn't
              //  even make it here.

            } else if ( /^(url|email)$/.test(inputElemType) ) {
              // Real url and email support comes with prebaked validation.
              bool = inputElem.checkValidity && inputElem.checkValidity() === false;

            } else if ( /^color$/.test(inputElemType) ) {
                // chuck into DOM and force reflow for Opera bug in 11.00
                // github.com/Modernizr/Modernizr/issues#issue/159
                docElement.appendChild(inputElem);
                docElement.offsetWidth;
                bool = inputElem.value != smile;
                docElement.removeChild(inputElem);

            } else {
              // If the upgraded input compontent rejects the :) text, we got a winner
              bool = inputElem.value != smile;
            }
        }

        inputs[ props[i] ] = !!bool;
    }
    return inputs;
})('search tel url email datetime date month week time datetime-local number range color'.split(' '));

Cut down to just detect type=”color”,

var supportsColorInput = (function() {
    var inputElem = document.createElement('input'), bool, docElement = document.documentElement, smile = ':)';

    inputElem.setAttribute('type', 'color');
    bool = inputElem.type !== 'text';

    // We first check to see if the type we give it sticks..
    // If the type does, we feed it a textual value, which shouldn't be valid.
    // If the value doesn't stick, we know there's input sanitization which infers a custom UI
    if (bool) {

        inputElem.value         = smile;
        inputElem.style.cssText = 'position:absolute;visibility:hidden;';

        // chuck into DOM and force reflow for Opera bug in 11.00
        // github.com/Modernizr/Modernizr/issues#issue/159
        docElement.appendChild(inputElem);
        docElement.offsetWidth;
        bool = inputElem.value != smile;
        docElement.removeChild(inputElem);
    }

    return bool;
})();

As you can see, it’s not the most trivial thing, and can change; that’s why including something like Modernizr can be a good idea.