Top-5 Best Firefox Add-Ons for CSS Developers
(5 votes, average: 4.60 out of 5)
Loading ...
There is an increasing number of tools available to Web developers, but with so many choices it can become difficult or even overwhelming to find out which ones are worth you’re while. I’ve chosen five add-ons for Firefox that I believe will increase the efficiency and quality of your CSS development.
Let’s run down the list of the top-5 Firefox plug-ins for CSS developers, with an overview of each of their features and benefits.
1. Web Developer Toolbar
You’ll be hard-pressed to find something this add-on CAN’T do! I’ve been using the Web Developer Toolbar for years and I’m still finding new ways to use the functionality that if offers.
One of the most useful tools you’ll find within the toolbar is called “Display Element Information” in the “Information” drop-down menu. With this function activated, you can click on any element on the page and get that element’s attributes, position, properties, ancestors and children.
Notable Features
- HTML and CSS Validation
- Ability to Disable Javascript, CSS, cookies, images, and even your cache
- Display Block Size
- Display ID and Class Details
- Display Ruler that you can drag to measure the size of anything in your browser window
If you’re going to go with only one plug-in, the Web Developer Toolbar is it!
2. FireBug
You’ve probably heard a lot about FireBug – you may even have it but don’t know just what to do with it. As far as CSS development is concerned, it has several great features.
FireBug gives you the ability to edit a page’s CSS live! You can edit the CSS and actually see the changes you make in your browser instantly. This feature makes FireBug invaluable in the design of a Web site. I like to use it to see how different fonts, font sizes, and colors look in an easy and extremely fast manner. Instead of editing your CSS file, re-uploading it, and then refreshing your browser, just edit it in FireBug and see those changes as soon as you press enter (or tab).
Notable Features
- Test changes you make to your styles instantly
- View the download time of your CSS files
3. ColorZilla
I can’t tell you how much time I’ve spent taking a screenshot of a page that has a color I like and pasting it in to Photoshop only so that I can get that color’s hex value.
With the Eyedropper tool, ColorZilla allows me to do that (and a whole lot more) much more quickly. In fact, it even has a color picker that looks almost exactly like that of Photoshop. Simply choose a color and you’re given that color’s Hex, RGB, CMYK, HSB, and Lab values.
Notable Features
- View a Page’s Color Palette
- Generate CSS Color Gradients
- Ability to Add and Manage Favorite Colors
This toolbar is not only utilitarian, but very fun to play with.
4. Dummy Lipsum
The role of this add-on is fairly obvious – Dummy Lipsum is an in-browser Lorem Ipsum generator. No longer do you have to visit a Web-based generator!
For those of you who have never heard of Lorem Ipsum, it is simply filler text that you can use as placeholder; or in the case of CSS developers, to see how your pages will look once they’re full of text. At some point we’ve all typed some random letters and then just copied and pasted them a thousand times to accomplish this, but no more! Lorem Ipsum is meant to look like a natural language, so you really get the feel for how your actual content will look.
Notable Features
- Generate filler text by number of words, paragraphs, bytes, or lists
- Copy generated text to clipboard
5. CSS Usage
As I develop my CSS, I’m constantly adding and removing rules. Despite my vigilance, I always end up with some code in my files that isn’t even being used – that’s where CSS Usage comes in.
This add-on is actually an add-on of an add-on… It’s not as confusing as it sounds, it’s just an extension of FireBug. CSS Usage allows you to scan the current page and find which CSS rules are actually being used. You can then export the “cleaned” CSS file, thus eliminating rules that aren’t in use.
Notable Features
- Reduce File Size and Bandwidth use by cleaning up your unused CSS
- Include multiple pages so even if a single page isn’t using a rule, it won’t be eliminated
Choosing the right plug-ins is essential, and it all comes down to personal preference. Just because it didn’t make the list doesn’t mean it isn’t a good add-on.
Which add-ons do you use? Please comment below if you know of an add-on for Firefox that you think that other CSS developers would find useful!
Loading ...
DeveloHost
Thanks for the share! It’s nice to have a guide on which plugins will make web development easier.
Thanks for these. I’d also add the “yslow” plugin for firefox to the list. While it’s not strictly css related, it can show you if your CSS is not optimized (one of the criteria).
Thanks for sharing the above!