What is a data protocol?

In a few words, it’s a way to embed any data (like GIF images, for example) into text documents such as HTML or CSS. So, instead of linking to an external file, you can do something like this:

HTML

[html]<IMG
SRC=’data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAA wAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfz gFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiO Spa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZ eGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81 M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7′
ALT=’Larry’>[/html]

The data protocol is not something new, it is dated all the way back to 1995, when it was proposed. And in 1998 it became known as RFC2397.

The following elements and/or attributes could make a use of the data protocol:

• object (images only)
• img
• input type=image
• link
• CSS declarations that accept a URL, such as background, backgroundImage, and so on.

Let’s look at some examples:

CSS

[css].img { background: url(data:image/png;base64,iVBORw0KGgoAAAANSU hEUgAAAAIAAAACCAIAAAD91JpzAAAABnRSTlMAAAAAAABupgeRAAAABmJLR0QA%2FwD %2FAP%2BgvaeTAAAAEUlEQVR42mP4%2F58BCv7%2FZwAAHfAD%2FabwPj4AAAAASUVO RK5CYII%3D) fixed 1px 0; }[/css]

JS

[javascript]var img = new Image();
img.style.width = ’100px’;
img.style.height = ’100px’;
img.src = ‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCA IAAAD91JpzAAAABnRSTlMAAAAAAABupgeRAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAA AEUlEQVR42mP4%2F58BCv7%2FZwAAHfAD%2FabwPj4AAAAASUVORK5CYII%3D’;
document.all.myBody.appendChild(img);[/javascript]

Why would you want to use a data protocol?

The most obvious reason could be the portability.

You might be familiar with the Greasemonkey add-on to Firefox and some other browsers. It allows you to write small bits of JavaScript to customize web pages with new features or change the look of the entire site alltogether. For example, you could write a script to add “Download” button to every movie on YouTube site. To make this button look like it “was there” you could create a little image and apply it to the button with a style. That image could be embedded in your JS file with a data protocol. This way you wouldn’t have to worry about packaging all your files in a ZIP archive and unpackaging them in the right location on the target system. All you have to download is a single JS file. Great, isn’t it?

P.S.

Please note that there are some limitations to keep in mind when dealing with data protocol. First, RFC1866 limits lengths of some attributes to 1024 characters, so if base64 encoded string is too long the object might appear broken in the browser. Second, to be on a safe side try to keep the entire base64 string on one line. Splitting it with line break/carriage return characters might break the data.

Also, most modern browsers (such as Firefox, Safari and Chrome) would support data protocol, but IE7 and older will not, so you might want to provide some alternative for the older browsers.

For more information visit the following sites:

• IETF: RFC2397 – The “data” URL scheme,
• IETF: RFC1866 – Hypertext Markup Language – 2.0
• MSDN: data Protocol
• Motobit: online base64 encoder/decoder

This document specifies Best Practices for delivering Web content to mobile devices. The principal objective is to improve the user experience of the Web when accessed from such devices.

It’s a good step toward making the Web accessible to millions of small screen devices, not blessed with a combination of iPhone’s hi-res LCD and a powerful Safari browser.

The document is available from W3C’s web site http://www.w3.org/TR/2008/REC-mobile-bp-20080729/

It explains how to address IE7 compatibility issues in CSS.
In short, there were several bugs in CSS parser of IE6. Some CSS constructs (filters) that were applied by IE6 are ignored by IE7 and above – like “* html”. We could take advantage of these broken filters to create IE6-specific rules.

For example, first define a style that will look fine in IE7:

[css]#box { top: 2px; }[/css]

then (below that rule in CSS file) use CSS filter “* html” to override it with IE6 style:

[css]* html #box { top: 4px; }[/css]

This second rule will be ignored by IE7 and above, but will fix the problematic style in IE6.

There’s another approach to fixing IE6/IE7 issues – it’s conditional comments.

Consider the following code that should be placed in the HEAD section of HTML:

[html]<!–[if IE 6]>
<link rel="stylesheet" type="text/css" href="/css/ie6.css" />
<![endif]–>[/html]

The <!–[if IE 6]> and <![endif]–> tags are used to filter out content that will be parsed by IE6 browser only, any other browser will ignore anything that’s inside these tags.

For more info see About Conditional Comments on MSDN or more user-friendlier explanation at  Quirksmode.

http://www.irt.org/faq.htm