By Daniel Glazman (Disruptive Innovations SARL), 30-aug-2004
Original idea from Laurent Jouanneau (Disruptive Innovations SARL)
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 :-)
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.
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:
and in XHTML 1.0, add:
An HTML overlay is an XML document. The simplest HTML overlay you can write is the following one:
<!DOCTYPE HTMLoverlay PUBLIC "-//DI//DTD HTML Overlay 20040830//EN"
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:
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" />
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.
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!
Copyright (c) Disruptive Innovations 2004 - this work is licensed under the Mozilla Public License