I imagine every web designer has, at one point or another, wondered why HTML does not support some means of HTML insertion. You can find numerous hacks to provide this capability such as Apache Server Side Includes, AJAX solutions such as jQuery’s $.load, scripting solutions like PHP’s include(), and even middle-ware like recent posts I have been thinking about using CSS for more than it’s original purpose as “Style Sheet” to mean something broader and more useful, “Semantic Structure”. In other words, the HTML would specify only the what and the CSS would specify all of the how. I think this is best approach for the future of web standards as it creates very good separation-of-concern.
Interestingly, it occurs to me that this could potentially mean that HTML inserts should not be done in the markup at all, but rather in the CSS. Consider this simple pseudo example in Jaxer:
<html>
<body>
<jaxer:insert src="header.html"/>
Content of said webpage.
<jaxer:insert src="footer.html"/>
</body>
</html>
It is clear enough what the intention of this is even if you have never used Jaxer. Clearly this example is mixing content with structure. Using a CSS Insert instead (if CSS could do such a thing) we might have:
<html>
<body>
<span id="header"/>
Content of said webpage.
<span id="footer"/>
</body>
</html>
#header{
insert: url(header.html)
}
#footer{
insert: url(footer.html)
}
Taking it one step further, per my last post, our “HTML” can become XML:
<html>
<body>
<header/>
Content of said webpage.
<footer/>
</body>
</html>
#header{
insert: url(header.html)
}
#footer{
insert: url(footer.html)
}
CSS Inserts could be a very powerful tool. For example, changing the class of a div that has an insert style, rather than using an AJAX load. It would be interesting to explore the full potential of this idea –and it’s downsides. At the very least, it is clear that it would effectively allow us to work with HTML in much the same way as we can currently work with images in our CSS.
