Why be restricted to how HTML5 and CSS can perform responsive layout? Why not intercept the entire DOM before it is rendered or resources are downloaded, process it as you like and then and only then render it? This is what Capturing is all about.

A recent Mozilla blog post alerted us to a really interesting and perhaps groundbreaking approach to working with HTML. Web apps are often described as HTML5 apps or at best HTML5/JavaScript apps but most of us realize all too well that the top dog in the relationship is JavaScript.

A web app is a JavaScript app that is forced to use HTML as its markup language for the UI. While HTML is evolving it isn't really doing it fast enough for the sorts of clever things that we can create with code. There are some approaches that force HTML to take its subservient role, but these often have drawbacks such as the use of non-standard attributes and basically the loss of the semantic aspects of HTML. Of course, you could argue that the semantic aspects of HTML are out of place in anything other than a fairly static web page that presents some text and perhaps a few pictures. Even in this case there are potential problems - try building a web page that loads exactly the right resources for the client it finds itself in.  

Usually resources start to load along with the rest of the content and, if you add a JavaScript function that works out what resources are really needed, it is usually too late to do anything about it. For example,  how do you download a bitmap of the right resolution to suit the resolution of the client's display? In the future the answer might well be to  use the W3C's proposed picture element which supports media selectors and only downloads the resolution that matches the client's media. 

For example: 

<picture>
 <source src="/small.jpg">
 <source src="/medium.jpg"
             media="(min-width: 450px)">
 <source src="/large.jpg"
             media="(min-width: 800px)"></picture>

There are ways of implementing schemes for loading pictures of the correct resolution using data attributes, for example, and JavaScript to set the src property of the image tag to the correct filename, but these all have disadvantages - mainly of modifying the use of HTML.

Capturing is a new open source library that achieves a number of things that you might have supposed were impossible for JavaScript. It is the base that the latest version of Mobify.js is built on. 

First, it modifies a standard page as it loads into the client so that all resource loading is stopped. That is, the page loads all of the HTML but any images and resources are not loaded and the page isn't displayed. Next, it provides the page's DOM as an object to any JavaScript you care to write. The JavaScript can modify the DOM in the usual way and then finally it can ask Capturing to render the DOM back to the page.

In short, Capturing gives you access to the page's DOM before the HTML has been rendered or any resources loaded.

For example, if you have an image tag on the page then Capturing will  represent that image tag in the DOM it passes to your code. However, any files specified in the src attribute will not be loaded. Your code can modify the src attributes to refer to files with the appropriate resolution for the client and then render the DOM to the page. 

This takes us well beyond the sort of responsive design you can achieve using the current HTML5/CSS 3 standards. In fact it takes us into another level of using HTML as a markup language - one that can be custom-processed before the standard rendering engine gets to work with it.

The examples on the Mobify.js site should give you some ideas, but in many ways its examples are conservative. You could take the principle much further by extending HTML5 in any way you cared to - inventing your own domain specific markup language and then processing it to standard HTML before rendering it. With this technology the web page is set free from HTML. 

Of course, you might not want to do this as any browser with JavaScript turned off will fail to render the page correctly - however, there might even be applications for this sort of behavior.