Hey Readers, Win 25 Citrify Premium Licenses How to Participate and Win!!! :-D . Stay tuned for more premium giveaways coming next by subscribing toRSS feed or Subscribe to App Sheriff - Sworn To Serve by Email. Good Luck Guys!

There are lots of free downloadable extensions and add-ons available on the internet for firefox and day by day demands are increasing . Somethings are better if they don’t get uninstalled from your firefox. In fact, they can make your firefox more efficient a. We give you the 15 Firefox addons that a CSS developer should think twice before uninstalling because they will make your life as a CSS Developer much easier :

Let me know, if i missed out any other valuable add-ons.

Show some love by bookmarking it . [ Bookmark this on Delicious]

Get updated with latest desktop and apps reviews and useful tools for Designers, Developers and Photographers. All you have to do is subscribe to our rss feed OR Get updates to your favorite email client and you can follow us on twitter as well.

1. Aardvark

Aardvark is a powerful and user-friendly selector utility that is used for selecting elements and performing various actions on them. For example: If you want to print this page, you can use this addon to get rid of unwanted elements. The more commonly used one is the feature to make the page more readable, as it makes it easier for analyzing the structure of a page.

Aadvark is very easy to use. You need to install the addon and then right-click on the page and select Start Aardvark from the popup menu. When you navigate through the mouse the page, a red rectangle will surface around the current block element, along with a label showing its type, and if they exist, its id, class, and style. Then you can perform various actions using your keyboard. For example: W to navigate wider, R to remove the element, I to isolate the element, V to view formatted source of that element, U to undo, Q to quit aardvark, and H for help, that is, a list of the 14 or so available keystrokes.

Aadvark is an extremely powerful new command for Javascript developers, that generates DOM code by selecting an element on a web page. It works well with Firefox compared to the other browsers.

Developer Site: http://karmatics.com/aardvark/

2. ChromEdit

chromEdit will not let you mess with Google Chrome. On the other hand, it is a simple user profile file editor. It gives access to various css scripts that you can implement in your website.

For example:

userContent.css which is used for adding user styles to the webpages.

userChrome.css is used for overriding UI style.

prefs.js to provide read only access.

user.js to make the changes in preference permanent.

Well, to add to it a basic ASCII editor suited for quick effect changes like disappearing styling menus would be possible. If you want to be more economical with time then a better approach would be selection by ID; though that requires DOM Inspector or XUL source knowledge.

Developer Site: http://cdn.mozdev.org/chromedit/

3. CSSMate

This addon has evolved the inline CSS Editing. This is a software which has been developed from EditCSS tool; in fact, all the extra features have been removed to create CSSMate. It can make each stylesheet load into a separate tab and has removed the save load clear functionality. An addon to this addon is the added in support for loading stylesheets that have a media type of "all" instead of "screen".

Developer Site: http://www.malard.co.uk

4. CSS Validator

It is always good to double check your work. With CSS Validator, you don’t have to do the double checking; the addon will do it for you! It validates a page using the W3C CSS Validator. The steps to be followed to implement this are very simple. You just need to add an option to the right-click context menu and to the Tools menu to allow for easy validation of the CSS of the current page. It will analyze and displays the results in a new tab. The only condition is that it will only work on pages that have a CSS file associated.

Developer Site: http://www.nu22.com/firefox/cssvalidator

5. CSS Viewer

CSSViewer is a simple addon to view the CSS page elements of a particular website. It is an addon to firefox. CSSViewer is actually an extension of a simple CSS property viewer.

Developer: Nicolas Huon

6. EditCSS

To be precise, EditCSS is a stylesheet modifier for sidebar. EditCSS makes this part really easy and well as intuitive attributed to its approach. It come with features like live inline previewing of styles and a unique grouping system, which is providing a lot of competition in this field because EditCSS is a bargain. Miscelleaneous features include CSS grabbing from other sites, favorites for often-used styles and font sets, etc.

Developer Site: http://editcss.mozdev.org

7. IE Tab

The perennial problem: If i design for IE how will it look in Mozilla and vice versa? Well, due to this glitch many of the website developers face they are not able to deliver solutions in time as it takes a lot of time to test in both browsers. Hence, the IE TAB addon in Mozilla will be a great tool for the web developing community as it will significantly reduce the time in testing and troubleshooting phase. This addon will display how the webpage will be displayed in IE with a single click and with another click, back to Firefox. Ahoy! This is not magic.

Developer Site: http://ietab.mozdev.org/

8. Style Sheet Chooser II

Style Sheet helps to keep your website in vogue. The Style Sheet Chooser II provides alternative styles for the website and implementthought the webpage. By installing this addon, the Style Sheet Chooser II will replace Firefox’s built-in style sheet switcher. This functionality can be accessed in Mozilla via the [View]->[Page Style] menu item, one-click stylesheet rotating Toolbar icon and Statusbar icon. Using Extension preferences, Icons by switched between On/Off.

Developer Site: http://wood.sandbox.cz/style-sheet-chooser

9. Firebug

Firebug is a holistic addon for Firefox. It adds a whole lot of tools for Firefox which helps you to access the development with a single click. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page! The “INSPECT” tool is the favorite tool of the developers. If you want to check any object in any website, all you need to is to click on the object and inspect it!

Developer Site: http://getfirebug.com/

10. YSlow

Y be Slow? Thats the exact question this addon is going to answer. In fact it is addon to addon. YSlow is a Firefox add-on to integrate with Firebug tool for Firefox. YSlow analyzes web pages and suggests ways to improve their performance which is based on a set of rules for high performance web pages. There are three predefined rulesets or a user-defined ruleset to test the performance of a page. It offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint.

Developer Site: http://developer.yahoo.com/yslow/

11. Webdeveloper Tool

This is an amazing developing tool. It adds more functionality to your firefox. It provides extra menu selections for using and disabling different cascading style sheets so you can test them out.

Developer Site: http://chrispederick.com/work/web-developer/

12. Dust-Me Selectors

Yet another useful addon for Firefox, the Dust-Me Selectors finds unused CSS selectors. It is compatible with only version greater than 1.5. The Dust-Me extracts all the selectors from all the stylesheets on the page you’re viewing. It then analyzes that page to see which of those selectors are unused. Then this data is then stored so that when testing subsequent pages, selectors are removed from the list as they’re encountered.

There are two modes of implementation: individual or spider an entire site, and in both cases you will get a details of selectors which are not used anywhere. In other words, they are dust and you can get rid of it.

Developer Site: http://www.sitepoint.com/dustmeselectors/

13. CodeBurner

CodeBurner literally burns codes for programmers. An tool for Firebug, CodeBurner has become an indispensable tool for web developers. It displays syntax, code samples, and browser compatibility information in a small dock located at the bottom of the browser. The tool was was created for SitePoint by James Edwards, a Javascript pundit.

The latest version of CodeBurner which has been released does not rely on Firebug- in nerdy terms it’s a standalone extension, and for the early bird it comes bundled with a free book! Why don’t you go and get yours?

Developer Site: http://tools.sitepoint.com/codeburner

14. GridFox

GridFox is an extension that will overlay a grid on a selected website. It applies grid on top of any website you open in Firefox. The real use of GridFox is to customize, or allowing you to create the exact grid you designed your layout around.

GridFox is extremely easy to use. Once you had added it, right click on any website and select the GridFox menu and the addon will impose a grid on the website. You can then toy around with GridFox and fit it in your website.

Developer Site: http://www.puidokas.com/portfolio/gridfox/

15. CSS Usage

The CSS Usage addons allows you to quickly and securely inspect the CSS code behind a webpage, so that you can see which lines of that code are used.NOTE: The CSS Usage add-on is cross-platform and it works on Windows, Linux and Mac OS.

Developer Site: http://spaghetticoder.org/cssusage/