XHTML and CSS development can be a lot easier with the proper tools. Mozilla‘s Firefox web browser can be a web template designer’s best friend when paired with the Web Developer extension.

Read on for a quick overview of what’s possible with Firefox and Web Developer.

The DOM Inspector

Firefox includes an optional accessory called the DOM Inspector which allows developers to view the computed CSS styles for any HTML element. One can also look at a web document’s entire markup tree, and click on elements of interest to examine their properties.

The DOM Inspector in action.

The DOM Inspector is available under the `Tools’ menu in Firefox. Please note that you need to select the “Developer Tools” option when installing Firefox.

Web Developer

The ability to use third-party extensions is one of Firefox’s greatest strengths. One such extension is called Web Developer—an extremely useful swiss army knife for examining web pages.

You can have Web Developer display all hidden form fields on a page, allowing you to view and edit their content. Other nifty magic tricks include converting GETs to POSTs, discovering broken image links, and much more. However, I have one favorite feature. Web Developer lets you view a site’s CSS (including imported files) and edit the style rules on the fly. You can change a background color, and it will instantly change in your browser window. I use this technology to rapidly prototype new stylesheets, and try out new layout ideas without going through the save, upload, view cycle.

Editing CSS in real-time.

Firefox is a powerful tool for web developers who need to deal with XHTML and CSS on a daily basis. I’ve but scratched the surface of what this application can do.