HTMLoverlays

People, have you ever dreamt of a simple, nice, powerful, cross-browser mechanism to drastically reduce the size of your web pages, something that could allow you to simplify your web pages, preserving only the real content in your pages and externalizing all your navbars, ads and stuff? No, it's not an iframe, we have a much better offer...

Those of you orbiting around the Mozilla planet have already heard of XUL Overlays. For others, it's probably a new strange beast so let me explain to you in just a few words what it is: overlays on a document are just a way of specifying some contents of a given element in an external file. At load time, the contents of the file you are requesting and the contents of the overlay are merged, based on the element's id, and the browser will then render the resulting document tree. For instance:

As you can see above, the "requested document" is much smaller than the final document since we have removed all the "presentational" stuff to focus on the informational content. The good news here is that you can do that for all your pages in your web site. They can all share the same overlay. All in all, you will reduce a lot your monthly bandwidth usage just because your docs will be smaller, because the overlay will be loaded only once by the browser, and you'll improve readability and maintainability of your markup by a factor of 100 :-)

Ok, there is a cost. But it's cheap. You have to add a script element into the head of all your pages. The JavaScript file loaded by that element will be loaded once by the browser and cached for all the pages sharing the little trick explained in this article. So overall, it's a good win. It works absolutely fine in Gecko-based browsers and Internet Explorer >=5 on Windows. I have not tested other browsers or other platforms. The speed is ok, and I bet you'll never notice a web page uses an overlay.

So let's be a bit more technical now... People, Disruptive Innovations is glad to introduce HTML Overlays, based on an idea by Laurent Jouanneau, and implemented by the author of this article.

1. Add HTMLoverlay's knowledge to an HTML document

requested document	<div id="navBar"/> <div id="main"> <p>Facts about our company: blah blah blah</p> </div>
overlay	<div id="navBar"> <a href="index.html">Home</a> <a href="products.html">Products</a> <a href="news.html">News</a> <a href="company.html">About us</a> </div> <div id="main"> <hr/> <h6>Copyright (c) OurCompany 2004.</h6> </div>
resulting document	<div id="navBar"> <a href="index.html">Home</a> <a href="products.html">Products</a> <a href="news.html">News</a> <a href="company.html">About us</a> </div> <div id="main"> <p>Facts about our company: blah blah blah</p> <hr/> <h6>Copyright (c) OurCompany 2004.</h6> </div>

That's the simplest part. Copy the file HTMLoverlay.js to your web site just where you want. Then add one element inside your document's head element. In HTML 4.x, add:

    <script type="text/javascript" src="where_you_want/HTMLoverlay.js">
    </script>

and in XHTML 1.0, add:

    <script type="text/javascript" src="where_you_want/HTMLoverlay.js" />

That's all.

2. Create an overlay

An HTML overlay is an XML document. The simplest HTML overlay you can write is the following one:

<?xml version="1.0"?>
<!DOCTYPE HTMLoverlay PUBLIC "-//DI//DTD HTML Overlay 20040830//EN"
          "http://disruptive-innovations.com/zoo/20040830/HTMLoverlays.dtd">
<HTMLoverlay/>

HTML overlays are conformant to this DTD (also available in text/plain). Basically, an HTML overlay is an XML document where all XHTML 1.0 elements are allowed as children of the root element and where all elements but the root element have three extra attributes: insertbefore, insertafter, and position. The first two attributes contain the ID of an element in the document the overlay will be applied to. The position attribute contains an integer value.

Each element inside your HTMLoverlay element, root of you HTML overlay, specifies an elemental overlay. If an elemental overlay has an ID, and if there is an element in the target document with a matching ID, the contents of that element and the contents of the elemental overlay will be merged. If there is no element with matching, nothing is done.

Every child element of an elemental overlay in an HTMLoverlay document can carry three extra attributes that are copied into the overlayed document:

insertbefore: its value should be the ID of an element child of the target element; if there's such a matching element, the clone of the element overlay's child will be, at merge time, inserted before that one.
insertafter: same as insertbefore, but the clone is inserted after instead of before. This attribute is used only if the insertafter attribute is absent or is not used because there is no matching ID in the target document.
position: specifies a position index in the list of children of the target element. Used only if insertbefore and insertafter attributes are absent or unused.

Example:

requested document	<div id="main"> <p id="content">blah blah</p> </div>
overlay	<div id="main"> <p id="header" insertbefore="content">navigation</p> <p id="footer">copyright</p> </div>
resulting document	<div id="main"> <p id="header">navigation</p> <p id="content">blah blah</p> <p id="footer">copyright</p> </div>

requested document

<div id="main">
 <p id="content">blah blah</p>
</div>

overlay

<div id="main">
  <p id="header"
     insertbefore="content">navigation</p>
  <p id="footer">copyright</p>
</div>

resulting document

<div id="main">
 <p id="header">navigation</p>
 <p id="content">blah blah</p>
 <p id="footer">copyright</p>
</div>

3. Link a document to this overlay

Again, that's very easy... Just add a link element in your document's head element. In HTML 4.x:

<link rel="overlay" href="myoverlay.xml">

and in XHTML 1.0:

<link rel="overlay" href="myoverlay.xml" />

4. Any known limitation?

Yes:

Don't use style attributes in your overlay... MSIE is unable to dynamically apply a style attribute :-/
The overlays are loaded synchronously for the moment. A future version will use async requests.

5. But...

I know what you are going to say: is it valid? The W3C HTML validator says it is, but the validator itself needs a validation since it should complain about the lack of a profile attribute on the head element. I'll fix that ASAP. Repeat after me : IT IS VALID.

6. And?

And that's all!!! You want to see a demo? Just click here and look at the source of the page you've loaded.

Please send all your comments or suggestions to daniel at glazman dot org, thanks!