Timelapse CSS
Date : 2008 05 13 Category : Tech & Development
Ajaxian
Matthew Buchanan had a little fun and created a Timelapse CSS example that lets you walk through the process of how a browser would put together a page if it was a human artist:
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.
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.
PLAIN TEXT JAVASCRIPT: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); } } } }