Web Developer Extension Re-Visited
Jul 7

Web Developer Extension Re-Visited

Web Developer Extension: I don’t remember where I heard about this one, but it’s a peach of an extension. We’ve talked about the Web Developer extension for Mozilla and FireFox before, but the latest version comes with the sweetest sidebar you could ever imagine…

You can open the stylesheet for the current page in a sidebar, make changes to the CSS, and the page changes in real time.

You cannot believe how handy this is. Play all you like, and watch your changes happen, then just copy all the CSS and paste it into the actual stylesheet (or you can save directly from the sidebar). If the page has inline styles, they open in the sidebar too under a different tab.

Add Web Developer’s ability to display the CLASS and ID of every element on the page, and you never have to touch the HTML to re-do the style. Just fiddle with the CSS in the sidebar, and if you ever need to figure out how to “get at” something, just display the CLASSes and IDs for a second, then hide them again.

If you need to figure out how the spacing on the page works out, just add a quick CSS rule to outline all the DIVs in, say, green. Or use Web Developer to outline them.

This is as close to CSS heaven as I’ve come.

by Deane   July 7, 2004 3:20 PM   |
  tags: 
CSS, Mozilla, FireFox

Comments

by Deane,   July 7, 2004 3:53 PM  

A word of warning -- don't change tabs or click away from the page you're working on. You'll lose all the style changes you've made.

by Simon Willison,   July 7, 2004 5:03 PM  

I've been using this feature for months, in the form of the ultra-handy Test Styles and Edit Styles bookmarklets from http://www.squarefree.com/bookmarklets/webdevel.html

The bookmarklets are extra useful because you don't need to restart your browser after installing them. They also persist styles across multiple pages on the site, which is pretty neat.

by Jim Amos,   July 11, 2004 10:33 PM  

Agreed. This is the coolest extension ever. I wonder if there could also be a way of editing xhtml directly through the browser as well. Negating the need for any external editors.

Add Comment

Want to advertise on this site? Contact FM.
Laser Toner Cartridges UK laser toner, toner cartridges, hp toner, lexmark toner, samsung toner, canon, toner, epson toner, oki toner, kyocera toner, xerox toner, remanufactured toner, compatible toner
Direct TV Deals Free 4 room direct tv deals. no equipment to buy. free fast professional direct tv installation. this is the best direct tv deal available anywhere.
SEO Article Learn from the experts with our SEO article.
rope light Shopping with birddog distributing, inc., gives you access to the lowest prices, the best customer service and the quickest delivery times possible.
Laptop AC Adapter We offer genuine factory direct replacement AC adapters.
Direct TV Best satellite TV deals.
Direct TV Deals Direct TV programming deals are varied and include packages containing from 50 channels up to over 250 channels.
8mm film to DVD Retain family memories with the only frame by frame digital restoration service in the United States for your 8mm film to DVD today
Rubber Stamp Shop for custom self-inking stamps, hand stamps, address stamps, label stamps, check endorsement stamps, check deposit stamps, date stamps, pre inks, pocket stamps, ink and much more!