CSS Development, Redefined

One of the taglines currently being used by the Mozilla Firefox project is “Web Browsing Redefined.” Today I stumbled onto a Firefox extension which redefines CSS development. Editcss allows you to edit the CSS for a web page in real time, and see the results rendered in real time. It’s a simple concept, but an absolutely amazing experience to use it for the first time. I can’t wait until my next redesign or side project to really put this thing through its paces.

The editing pane shows up in the sidebar, the same place the history window appears. This turns out to be a good orientation, since most CSS files are long lists of short rules. The extension combines mulitple CSS files in the order they are processed, commenting each section with its origin (embedded, link, include). After editing is complete, you can save the final CSS to a file.

Both comments and pings are currently closed.

2 Responses to “CSS Development, Redefined”

  1. Lars Kellogg-Stedman Says:

    Not really new?<br/>

    There have been a number of “bookmarklets” out there that let you accomplish pretty much the same thing in existing Mozilla releases. Check out http://www.squarefree.com/bookmarklets/webdevel.html for a list. I frequently use the “edit styles” bookmarklet to futz around with site design. It’s great!

    It sounds like Firefox makes the whole process more integrated.

  2. Jason Says:

    You know me… always late to the party. The editcss project page in fact credits Jesse Ruderman’s bookmarklet as the inspiration for the extention (the same one you mentioned). I hadn’t seen either before. I just tried it out… The only real difference I see is that the editing pane is in the sidebar (instead of a floating window) when using the extention, and the integrated load/save feature. Either way, it sure beats the old type-save-refresh cycle I’ve used in the past.