Stupid Firebug tricks …

Rob WeaverMar 15, 2009

Recently I’ve been doing some web page work again, and trying to push the envelope on my CSS knowledge.

I was at a talk at 360|iDev where Brian Fling was talking about UI design, and he pointed out that your site should work without your CSS. Now while I know this as a design principle, it seems like something that we probably overlook more often than not.

So, out of curiosity, I thought I’d take a look and see what some of my pages look like without their stylesheets applied.

The first trick is Firefox with Firebug.

Firebug is a plugin that lets you debug and examine the contents of a page and do very interesting things, like modify your page on the fly. By loading up Firebug on one of my sites, it was an easy thing to browse to where the stylesheets are loaded. To start up Firebug, I normally just right click on the page and choose “Inspect Element” from the popup dialog box, or use the Open Firebug option from the Tools menu:

Once you have Firebug open, you can browse your HTML to where the stylesheets are loaded (normally in the HEAD section of your page):

The next trick is that with Firebug, you can change everything

In the above example, I have two stylesheets loading: a basic one (basic.css) and one for print layout (print.css). So to look at my site without the stylesheet, all I have to do is right click on the link that loads the sheet, and choose Delete Element:

Third trick: debugging missing link includes with Firebug is cool

One interesting thing to note, if you expand the link node, you’ll see the complete style sheet as it was downloaded from the server. I’ve found this very handy in finding issues like a typo in a stylesheet name, or a misconfigured server (which is very easy to happen with frameworks like Cake), since what displays is the actual return from the server (so for instance if you mispell the name, you’ll see the actual 404 file missing):

Once you’ve removed the link (or even change the name to a bad one as I did above), you’ll see your bare bones HTML, just like it would appear to a browser without styles. If your page was designed correctly, it should have basic navigation links at the top of the page instead of the menu bars, which make the site usable for a browser that isn’t using your stylesheets.