HTML Decor I
One of the advantages of CSS is the capability to provide styling information to many web-pages using one (or several) external stylesheets. Not only does this reduce duplication, cutting down the size of each page, it also means that pages don't need to be regenerated whenever styles are updated.
There is still, however, significant duplication in web-pages - banners, navigation, and footers are usually the same for many pages of a site, if not the whole site. Any changes to the structure or text in these generic sections will require regenerating all pages. (Although, if your pages are dynamically generated this is going to happen anyway).
What if there was a way to specify this page decor in an external file? Unadorned web-pages could be sent to the browser which could then add the decor from a common file. It turns out there are a few options to do this.
XBL would be ideal.
An XBL binding would specify what decor to add to the
body element of the page.
XBL even keeps the inserted elements in a separate namespace,
so you don't have to worry about
class attributes in the decor
clashing with those in the HTML document.
Linking to the XBL document containing the decor binding could be done with a processing-instruction at the top of the page.
<?xbl href="decor.xml" ?> <html> ...
XML Stylesheets can completely rewrite the structure of the document so this task is well within its scope. They are intended for converting XML to HTML, so a HTML file might have to be served as XML for this to work.
Linking to an XML stylesheet for decor can be done with a processing-instruction at the top of the page.
<?xml-stylesheet href="decor.xsl"> <html> ...
The decorations could be coded into the script, and the script modified for every section of the site and updated every time the decor is changed. But it is probably preferable to have one script for all web-pages and give each web-page a link to the decor it should have (following the model of external stylesheets).
If the decor file is a HTML file then it can be viewed directly in the browser.
Adding this to web-pages would look something like:
<html> <head> <link rel="decor" href="decor.html"> <script src="/decor.js"></script> ...
In the next few articles on this topic I will provide some sample code for each of these solutions, investigate their limitations, and demonstrate how to use HTMLDecor.
I'm referring to banner, navigation and footer sections as page decor, not because they aren't important, but because they aren't the main content of the page. Alternate terms that might be as appropriate are frame, wrapper, overlay, skin, chrome and branding.
The former would be appropriate for providing HTML decor.