colorSupport = (function()
{
var
p = document.createElement(‘p’),
s = { rgb:false, rgba:false, hsl:false, hsla:false };
try { p.style.color = ‘rgb(1,1,1)’ ; s.rgb = /^rgb/.test(p.style.color); } catch(e) { };
try { p.style.color = ‘rgba(1,1,1,0.5)’ ; s.rgba = /^rgba/.test(p.style.color); } catch(e) { };
try { p.style.color = ‘hsl(1,1,1)’ ; s.hsl = /^hsl/.test(p.style.color); } catch(e) { };
try { p.style.color = ‘hsla(1,1,1,0.5)’ ; s.hsla = /^hsla/.test(p.style.color); } catch(e) { };
s.alpha = ( s.rgba || s.hsla ) ? true : false ;
p = null;
return s ;
})()

// return:
{ rgb:false|true, rgba:false|true, hsl:false|true, hsla:false|true, alpha:false|true }

// call like:
if( colorSupport.alpha ) …
if( colorSupport.rgba ) …

What do you mean by “I agree with you that you should be lazy about checking supported properties.”?

As for saving the result of the function, if you read my whole article, I do save it – just in a different way, since I don’t want the function to be run at all until it’s actually needed.

Something akin to this:

var supportsRGBa = (function(){
var supported;
var check = function(){
if( supported != null ) return supported;
//regular function here
};
return check;
})();

Haven’t tested that function but it should work.

About your solution:
1. I agree on the createElement part, should probably change that.
2. I don’t like the idea of checking rgba support (or any other feature support) from the start, although I’m aware that this is the approach favored by most libraries. The reason is, that it might not be actually needed. I understand that the overhead isn’t probably significant, but if you think about checking multiple features and bugs, and the list will constantly grow, it will end up being significant one day. And what will you do then? Tell the users to change all their scripts to use a function instead of a constant (since it will take lots of years to be able to assume getter support)?

I took a bit different approach – without the need to check script element’s style and then having to restore it. Simply creating a dummy element (and later null’ing it) seems to work just fine (and it doesn’t require script element to be present in a document )

I’m also not sure why you need to cache the result when it can be simply stored in a boolean. That boolean is what you would use later on in the app (so the check is only executed once)

var IS_RGBA_SUPPORTED = (function(){
var value = ‘rgba(1,1,1,0.5)’,
el = document.createElement(‘p’),
result = false;
try {
el.style.color = value;
result = /^rgba/.test(el.style.color);
} catch(e) { }
el = null;
return result;
})();