Tuesday, May 13th, 2008

Timelapse CSS

Category: CSS, Fun

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.

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

Posted by Dion Almaer at 11:08 am
6 Comments

+++--
3 rating from 52 votes

6 Comments »

Comments feed TrackBack URI

Thats really nifty.

Comment by Jon Hartmann — May 13, 2008

Would be a lot more interesting if it actually reflected the build of the page. My CSS rules are organized not by time, but by element / group / page structure etc. It would be a good learning experience to see how others work with CSS to iron out quirks and different issues… however if I want to see a page with various levels of styling, I already have Firebug and Web Developor toolbar, and my imagination…. The point of the exercise was lost, IMHO.

Comment by doublerebel — May 13, 2008

That’d make for a pretty nifty FF plugin

Comment by patspam — May 13, 2008

This is great….. useless, but great! :-)

Comment by OndraM — May 14, 2008

yeah you could perhaps have your page pull your css files direct from the SVN repo (supposing you were using svn) and each x seconds using something like the function in ReCSS to pull the next version (he says off the top of his head). Or just manually take snapshots of the css files.

Comment by sfoster — May 14, 2008

I dont get it.
when would you use this?

Comment by Aphrodisiac — August 11, 2008

Leave a comment

You must be logged in to post a comment.