Today I was reading a web page, (something I do allot). The page had reams and reams of text, and not allot of formatting, so it was very hard to work though.

Now those of you that know me, know I am extremely partial to the web browser Mozilla FireFox.
I’m about to show you a couple of the reasons why I love it so much.

One of the benefits of FireFox is its extensions, these are small browser plug ins that easily add extensive extra functionality to FireFox. My two fav extensions are:
– Web Developer.
– EditCSS.

I’m going to focus on EditCSS in this little story to show how it can help you with every day browsing as it did me.

Anyway, I was trying to force myself to read this huge page full of text with no margins and only small paragraph breaks and it was hard work, so I decided to see what I could do about it. The EditCSS extension puts an entry on the right click menu called “Edit CSS” which I selected. It then opened a panel beside the page with all the CSS for that page in it. Any changes made to the CSS in that panel instantly effects the page beside it. (and any changes you make stay there once you close the side panel, only a refresh will remove them.)

So to make the page more readable, I added my first snippet to the sidebar CSS:
body{ margin-left: 20px; margin-right: 20px; }

That helped alittle, but the paragraphs where still not separate enough for my liking, so I added another:
p { padding-top: 10px; padding-bottom: 10px;}

Perfect! Now the page was broken up into clearly defined paragraphs that were much easier to read. I should note that using other CSS, I could have changed the background or text color, removed a distracting background image or anything else I wanted to. Brilliant stuff..

I normally use the EditCSS extension when I am developing pages and I need to play with the CSS to get it just right.
(so I can make changes to a pages CSS and get instant feedback on its effect, and then copy the changed/added CSS to the actual stylesheet once I get it perfect).

Its nice, and very handy to be able to use it for reading some of the really nasty pages on the net that often contain interesting or useful information, but are hard to read due to bad formatting, or bad choices of text/background colors, of background images that obscure the text etc.
I plan to cover the Web Developer extension at a later date, because it is potentially even more useful then the EditCSS extension for web developers.
For now, I’ll direct you to the page that details FireFox extensions, there are hundreds of really handy little addons for FireFox that make a good browser into a really excellent browser. FireFox browser Extensions.

I should add, that FireFox, and the extensions for it are free and developed by the Open Source community.

INSERT, I should note here, that the newest release of Firefox (0.9), appears to have the EditCSS extension, or at least parts of it, included by default. (actually it seems to include features that the EditCSS extension did) so you don’t need to manually install that one anymore. Since I love the ability to edit CSS on the fly, I think that inclusion was a brilliant idea.

regards

This article was posted on Tuesday, April 27th, 2004 at 11:49 pm