Editing CSS on the fly in Firefox 11

As a developer, designing the look and feel of an HTML site using CSS can be a tedious task. Trying to get the dimensions of components or the colors of elements just right, can surely take its time. Thankfully over time, on-the-fly editing of CSS styles has been added to browsers and this is a great help. If you use Firefox or Chrome, you know what I am referring too, where you can right-click on an element on a page and then select "Inspect Element" using the context menu allows you to see all associated styles, make changes and see the effects of those changes directly on the page. 

There is one complaint I have with this on-the-fly editing method and that is that the UI used to make the changes is too small and can be a pain to work with sometimes. However with the upcoming Firefox 11 release, there has been a new feature added, called the Style Editor. You can access the Style Editor by hitting SHIFT-F7. What it does is display a floating window (see below), that allows you to access all the CSS files associated with the currently displayed page and then make changes on the fly. So nothing new there, but it's more akin to working in your favorite editor and even allows you to save the CSS to a file. It also provides Import functionality, which allows you to quickly load different CSS files and see the effect they would have on how your page looks.

I believe this to be a great development tool going forward, so get the Firefox and give it a try!