Anytime I want to show off what the web can do with a simple blog I have to pull up this awesome site. I was on A Very Cool Site about Hackery, Math & Design, and the question was asked "how did he do that?"
So it was time to open my console. This is what I found.
Which lead to the question "how did he do that?"
How that is done.
I you are not aware already, there are quite a few methods available in the global
console object. If you are not familure I recommend the Mozilla Developer Network pages on
console. Some methods of importance are:
- log (duh)
These are old news and I wont go into them in detail here. Just look them up on the MDN docs.
So then how was it done?
Scroll ahead to the
console.log will take in its first parameter some string wrappers.
%f for float,
%s for string, and so on. At the very bottom of the page you will see the
%c, which wrapps the remaining text in some style as the second parameter.
console.log("%cHello", "color: red;");
Will render as:
Results across browsers
In the console. From the screen shots below you will see that this works will all modern browsers (although, I don't have direct access to a PC with IE or
Edge at the moment, but I will assume they work too).
This doesn't work in Edge.