Matthew Buchanan portrait by Photobooth SF

About thie author

I’m a designer and practitioner of fine typography in Auckland, New Zealand. I co-founded a design and development studio, Cactuslab, in 2001, and a social network for film fans, Letterboxd, in 2011. I design themes for Tumblr, speak occasionally about web techniques and typography, and think up reasons to visit New York City.

Matthew Buchanan

Posted on Monday, 5 May 2008

Timelapse CSS

When building website templates, I’m constantly switching between a view of my CSS code and a view of the page I’m working on in a browser. At my most fevered I’m switching from one to the other after every couple of amendments, to ensure my additional rules are having the intended effect. Over time, were I to record this incremental buildup, it would paint a reasonably good picture of my approach to converting a design comp to a CSS layout.

With this in mind, I thought it might be useful to try to capture the process automatically and then play it back. I’ve seen this done using a collection of manual screen captures, but that didn’t seem a particularly elegant or easily reproducible solution. I first considered using a TextMate macro to do the heavy lifting with regard to the CSS file, but my friend and colleague offered a much better solution: the contents of stylesheets are exposed in the DOM, so JavaScript could probably be used to apply the CSS rules in sequence, and the result recorded with screencasting software.

As a proof of concept I cobbled together a (stylistically unsound) function to traverse the stylesheets of the current page (in reverse order) and remove a property from each rule every tenth of a second.

function timelapseRemoveCss() {
    var interval=0;
    for(var i=document.styleSheets.length-1;i>=0;i--){
        rules=document.styleSheets[i].cssRules;
        for(var j=rules.length-1;j>=0;j--){
            var attributes=rules[j].style.length;
            for(var k=0;k<attributes;k++){
                interval+=100;
                var timeout = "document.styleSheets["
                    +i+"].cssRules["+j+"].style"
                    +".removeProperty(document"
                    +".styleSheets["+i+"].cssRules["
                    +j+"].style["+0+"])";
                setTimeout(timeout,interval);
            }
        }
    }
}

This ran fine in Safari and produced the intended effect, when called via onload, of slowly stripping back a fully styled page to its bare markup (alas, a few weeks late for CSS Naked Day). I captured the output using the screen-recording feature in Snapz Pro X.

Now, my original intent was to watch the styles being progressively applied to a page, not removed, but by this time it was midnight so I cheated and simply reversed the direction of the recorded footage. Here’s the final result, and for comparison an earlier version in which the rules were removed in the incorrect order within each stylesheet (same end result, but more haphazard in the telling).

I still wanted to see if it was possible to apply the rules sequentially, with the goal of producing a bookmarklet that could be run on any site. My colleague tried a couple of approaches, working around the lack of an addProperty function by storing a copy of the CSS rules as they were removed, and produced a small library of functions to accomplish the task.

Unfortunately, while we succeeded in applying the CSS rules sequentially from an in-page script, we were tripped up at the final hurdle by the cross-site scripting implications of our premise: Safari and Firefox (and presumably IE) do not allow access to the document.styleSheets array from a script on a different host, making a bookmarklet impossible.

I’ve made the Timelapse CSS script available for anyone wanting to make their own timelapse video. If anyone manages to defeat the XSS issue, let me know.

Update: Croatian developer Mislav Marohnić has produced a bookmarklet that sidesteps the above issues and gradually removes the CSS from any (non-Strict) page. So I revisited our script and hey, it turns out it works on most sites, just not the site we used to test it on. Drag the bookmarklet below to your bookmarks bar and try it out on this site or another.

Timelapse CSS

Loading…