CSS Visualization

There’s been a lot of CSS discussions at TODCon, and in one particularly heated discussion we were talking over alternatives for visualizing and examining CSS layouts outside of trolling source code (my usual choice). So without further ado- here’s my three most indispensible CSS accessories…


First- a relatively new find for Mac/OSX developers, Xylescope is a standalone app that’s absolutely mindblowing. Surf your site in the browser pane, drill down into the CSS in painful detail on the right. Wow. ‘Nuff said- visit the Xylescope site and hit the ‘download beta’ link ASAP (the CC website’s in German, FYI).Secondly- the Aardvark Firefox extension is a great, lightweight way to show page elements in context right in my (your?) favorite open-source browser. ;)Keyboard shortcuts make this an incredibly easy-to-use extension, and you can demo the extension right inline in the download/install page. Nice.Third- a Firefox extension I’ve ‘blogged about before and still find indispensible- Chris Pederick’s EXCELLENT Web Developers’ Toolbar extension. I’d go into detail about the feature set, but suffice it to say it includes most everything you’d need for developing CSS-driven layouts and debugging them in context.Just for the record- I use Dreamweaver much of the time but in many cases (particularly debugging/polishing) prefer to work more lightweight- in BBEdit and browser for the final tweaks. It should go without saying that Firefox is my default browser… ;)P.S. sorry about the dupe/blank entry in MXNA/aggregators earlier.Call it postus interruptus…