In Part 1, I discussed what the data: URI scheme is all about, its various usage scenarios and available browser support. Let’s see few examples in this post. Just copy and paste the following HTML code into a HTML file and open it any of Firefox, Safari, IE8, Google Chrome or Opera. Since today’s browsers are very forgiving, this bare HTML tag should work without any fuss!

KcjNYVqctyqdRPQ6SijFFchsf//Z’ alt=’data: URI for images’ />

If your browser supports data: protocol, the above puzzling lines should show a small picture (actually, the CEO of my company). OK, here is his name!

<!– IE8 won’t render this as it supports data: for image type OBJECT only –>
<object type=”text/html” data=”data:text/html,%3C%73%70%61%6E%20%73%74%79%6C%65%3D%27%63%6F%6C%6F%72%3A%67%72%65%65%6E%3B%66%6F%6E%74%2D%77
    You are probably running IE!

Note that I am not using Base64 encoding for the actual HTML markup data; rather I use URL escaping, the default data representation mechanism of the protocol, for the HTML bytes. As commented above, IE8 currently does not support data: protocol for HTML object contents, but others do. Stretching a bit more, the following example shows how CSS can be sourced from a data: URI.

    <title>The data: URI Scheme</title>
    <meta http-equiv=”X-UA-Compatible” content=”IE=8″ /> <!– For IE8 only –>
    <link rel=”Stylesheet” href=”data:text/css;base64,LmNzc0RhdGFEZW1vIHtmb250LWZhbWlseTpCcnVzaCBTY3JpcHQgTVQ7IGZvbnQtc2l6ZTozMHB4OyBib3JkZXI6ZG90dGVkIDNweCBibHVlO30=” />
    <span class=”cssDataDemo”>Using style class from CSS embedded using data: protocol.</span>

The <meta> tag is required only for IE8. Other browsers don’s use it as they allow data: for CSS content also.

Here is a bit interesting one!

    <title>The data: URI Scheme</title>
    <script type=”text/javascript” src=”data:text/javascript;base64,ZnVuY3Rpb24gc2hvd1RpbWUoKSB7YWxlcnQgKG5ldyBEYXRlKCkpO30gZnVuY3Rpb24gdXNlRGF0YVVyaSgpIHthbGVydChjb25maXJtICgnV291bGQgeW91IGNvbnNpZGVyIGRhdGE6IFVSSSBzY2hlbWVzIGluIGZ1dHVyZSBwcm9qZWN0cz8nKSk7fSBmdW5jdGlvbiBzaG93QXBwVmVyc2lvbigpIHthbGVydCAobmF2aWdhdG9yLmFwcFZlcnNpb24pO30=”></script>
    <!– Embedded JS –>     <span>JavaScript embedded using data: URI scheme. Don’t try this on IE8…</span>
    <br />
    <form action=”dummy.cgi”>
    <input type=”button” onclick=”showTime();” value=”Show Date & Time” />&nbsp;&nbsp;
    <input type=”button” onclick=”useDataUri();” value=”Your Choice!” />&nbsp;&nbsp;
    <input type=”button” onclick=”showAppVersion();” value=”Browser Version” />

Each button calls different JavaScript functions, all sourced from a base64-encoded script (you can decode it using an online base64 decoder or do Console.WriteLine (System.Text.Encoding.ASCII.GetString (System.Convert.FromBase64String (base64_encoded_data))), if you want to see the actual JavaScript code).

I hope now you’ve got a better understanding of data: and its several usage scenarios. But just keep in mind that overusing or using it in inappropriate contexts might negatively impact the web application performance.

UPDATE: Looks like the HTML markup code went haywire (likely due to Word 2007 which I use for blog posting) and a portion of the HTML got clipped off; fixed it and everything is fine now (in a scrollable view).

Almost no one doubts it, but still how powerful it is? Just go to and see it for yourself! These awesome visuals use only JS and JS-based frameworks (such as Prototype & JQuery); no Adobe Flash or Microsoft Silverlight! Not just that, these demos could also be stress testers for your browser’s JavaScript engine.

 “Google Gravity”, “Browser Ball” & “Ball Pool” are my favorites! There are other fun stuffs too. Another (game) example showing the prowess of JS is

 All these demos use the new <canvas> element introduced in HTML 5 spec and JS to manipulate it. <canvas> allows dynamic drawing/manipulation of graphics and images using JS in a web page. Possible usage scenarios include (but not limited to) showing dynamic graphs, charts, other data visualizations and creating interactive content without using any 3rd party components. Perhaps AJAX and <canvas> duo could make users’ web experience at par with Flash or Silverlight. Wouldn’t they?

<canvas> at present supported by Mozilla Firefox 1.5+, Apple Safari, Google Chrome 1.0+ and Opera; IE is yet to catch up (including IE8). So, see the above samples in <canvas>-aware browsers only.