Often unnoticed feature of FireFox Web Developer Toolbar

The "Edit CSS" sidebar

[MatthewHSE]

There are all kinds of recommendations of the FireFox Web Developer Toolbar extension [extensionsmirror.nl] on this board, and people are right in saying it's a great tool. But one feature in particular stands out to me as an extremely useful tool for beginning (and expert) users of CSS. That's the "Edit CSS" feature.

After installing the Web Developer extension in FireFox (and restarting the browser, of course) you'll see the new toolbar. Pull down the CSS menu, then select "Edit CSS." This opens a sidebar with all the CSS for the page. You can make changes to the CSS in the sidebar, which are updated on the page in real time.

Naturally, this simplifies debugging incredibly. Also, it's a great way to come up with fresh designs. Just try going to csszengarden.com, open the Edit CSS sidebar, clear out the CSS, and start with a clean slate. You'll be surprised what this can do for your understanding of clean, source-ordered semantic markup.

Additionally, the Edit CSS feature allows you to easily over-ride annoying background colors or images on websites you're trying to read, etc.

I know many people here are already aware of all these features, but I thought some might find the information useful. The Web Developer extension is invaluable to any web developer, and the CSS features are particularly useful to those trying to get through the first learning curve of CSS.

[kiwibrit]

Wow. Thank you for that.

[danmccarthy]

Thanks! I use the web developer extension all day, every day, but I have never used the edit css function. I'll have to check that out tonight.

[createErrorMsg]

matthewHSE, I'll add two small caveats about using the "Edit CSS" sidebar to tweak documents in production.

One, users should make sure to use the toolbar's save option before closing the sidebar if they wish to keep any of the changes they've made to a page. Otherwise, the page reverts to the saved CSS and their changes are lost.

Two, users should be careful about having both the "Edit CSS" sidebar and a copy of the CSS document in question open (say, in Notepad) at the same time. Changes to one will not update the instance of the other. I speak from experience when I say that you can work for an hour tweaking a layout with the toolbar, only to unthinkingly click "Save" in Notepad and wipe out all of your changes.

Otherwise, it is a nifty little feature and definitely a plus when learning the practical effects of CSS properties.

Nice post.

cEM