Editing CSS live in Firefox

Summary

Firefox + Web Developer Extension = Live CSS Editing if that makes sense to you, you probably don’t need to read on any further, except perhaps the “caveats” section.

Trusting a WYSIWYG editor for CSS can be quite inaccurate and after viewing a site within Firefox and IE it can be quite different than intended. This leads CSS developers into the Edit→Save→Reload→repeat↩ cycle.

What if you could edit the CSS that Firefox is using without having to go through this cycle?

Firefox and the Web Developer Extension

Firefox’s saving grace is the support for extensions.¹ There’s a few extensions that appear on just about everyone’s top ten list of extensions for Firefox (here’s one list). Chris Pederick’s Web Developer Extension is one of those. Use it to manipulate cookies, style sheets, forms, images as well as get helpful information about the web page.

Editing CSS

The way I use CSS is by writing semantic HTML and then individually styling elements of my site. Sure a lot can be done without having to look at a page. If I want to mimic this site, I can try for:

body {
	     color: white;
	background: #333;
}

h2 { 
	color: #f6861a; /* orange */
}

Depending on how imaginative you are, you can get quite far without viewing a page. Now, however, you can just open up your unstyled page, select Edit CSS under the CSS menu of the Web Developer Extension and see the changes as you make them. You can throw Dreamweaver out. This is what you really need.

The greatest advantage of this is if you need to do pixel moving. Let’s say you have a complicated layout with absolutely positioned divs. Now you can move them a pixel at a time until they look just right.

Caveat

One major hang-up that I have with the Edit CSS feature is that it breaks relative references if you use url(). For example. Let’s say you have a /theme folder for your web site’s theme. Under the /theme you have theme.css and background.png. In theme.css you have:

body {
	background: url(background.png);
}

This will work fine, url() is relative to the file containing the CSS. When you go to Edit CSS, however, the relativity is broken, because Edit CSS adds the CSS to the currently viewed document. Therefore unless your CSS is in the same directory as your web page, anything relatively linked with url() is broken.

If this is a show stopper for you, use absolute references whenever possible. Of course with themed sites, this is often not possible. I’m sure someone clever can make some changes to this extension to fix it.

What about Internet Explorer

This method does leave out IE. You will still need to do some back and forth when looking at IE. There are a few things that can alleviate this process.

• Use standards compliance mode. Having a similar enough box-model to work with will eliminate most of the differences noted in IE and Firefox.
• Know the problem areas. There’s a few spots in IE that are problem areas. PNG is one, negative margins are another. If you know what they are, then when you use them you’ll be aware that you’ll need to adjust them for IE.
• If you use hacks use the same ones. If you use a “hack” to make IE cooperate, try sticking to the same hack. It makes your code easier to read, and consistancy makes life a bit easier.

If you do all that, you’ll probably still save quite a bit of time in your CSS development.

CSS Vista

CSS Vista is a promising product. I tried it out recently (May 2006) and decided it isn’t stable enough to be useful. I would like it to be more integrated with IE as well as be a lot faster. I’m sure when they release 0.2, the stability will improve. It may have been a fluke with my laptop as well. Try it out, it might be able to be a good solution for Internet Explorer (and Firefox). Unfortunately it’s Windows only.