Ajaxian

Tuesday, May 13th, 2008

Timelapse CSS

Category: Fun, CSS

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:

1.  
2. function timelapseRemoveCss() {
3.     var interval=0;
4.     for(var i=document.styleSheets.length-1;i>=0;i--){
5.         rules=document.styleSheets[i].cssRules;
6.         for(var j=rules.length-1;j>=0;j--){
7.             var attributes=rules[j].style.length;
8.             for(var k=0;k<attributes ;k++){
9.                 interval+=100;
10.                 var timeout = "document.styleSheets["
11.                     +i+"].cssRules["+j+"].style"
12.                     +".removeProperty(document"
13.                     +".styleSheets["+i+"].cssRules["
14.                     +j+"].style["+0+"])";
15.                 setTimeout(timeout,interval);
16.             }
17.         }
18.     }
19. }
20.  

Posted by Dion Almaer at 11:08 am