Any way of detecting whether a browsers console is able to render colors?

Question

Is there a way of checking to see if a browser is capable of using console colors without sniffing?

console.log('%c Oh my heavens! ', 'background: #222; color: #bada55'); 

For example that in chrome 26+ and firebug will print colored output.

Answer 1

This is one of these few cases where browser version detection seems the valid way to go. To minimize the dangers of this approach make sure to use a blacklist rather than a whitelist, no matter how unintuitive this might feel right now (to make sure you don't leave out new future browser as happened with a lot of old netscape focused code). I am aware that this isn't the answer you wanted to hear, but as console.log is a native function and it's effect can in no way be observed, so as far as I can see the only option is to do browser version detection.

Answer 2

I wrote Console.js https://github.com/icodeforlove/Console.js to allow us to do this a bit easier

Console.styles.register({   red: 'color: red',   underline: 'text-decoration: underline',   bold: 'font-weight: bold' }); 

then you can just do this

console.log('red text '.red + 'red underlined text'.red.underline + 'red bold text'.red.bold); 

it will gracefully degrade like this