04.01.2004 - Style Sheet Tweak

How many times do you find yourself manually futzing with a CSS file trying to get something right? I do it all the time...open it in Notepad via WS_FTP, do what I need to do, reload, get irritated, rinse, repeat. I know there are people out there that will tell me that maybe I should use a tabbed editor like Homesite that will let me have the CSS file open at the same time and then I can just hit some preview button to see how it looks, but dammit -- I like Notepad. There are probably even more people that think I shouldn't edit documents directly on the server, and to them I say...you're right.

So, to enable me to continue using an editor with a low memory footprint on the piece of crap Win2k box I'm forced to use at work and to keep me from constantly FTP'ing changes, I've written the Style Sheet Tweak favelet for Mozilla and Firefox.

When invoked, the favelet will parse through all the style sheets referenced by the document and give you a dropdown list of all the selectors. You pick one from the dropdown and it will populate a text area with all of the rules. You are then free to edit, remove, add to them and etc. When satisfied, hit the "Apply" button and see how badly the new rules break your page. I've also provided a handy "Reset" button that will restore the original rules to the selector.

That's an interesting approach, but I think I prefer Jesse Ruderman's edit styles ( http://www.squarefree.com/bookmarklets/webdevel.html ) - it lets you edit the style rules directly without first picking the selector you want to manipulate, which means you can add new selectors as well.Posted by Simon Willison on April 7, 2004 @ 8:35 pm

Really? I wrote the selector dropdown into it because I prefered it that way - seemed less cluttered and easier to work with, especially when invoked on a site that is not your own.
As for the new selectors - maybe I'll add that functionality to it.Posted by Steve on April 7, 2004 @ 8:47 pm