If you want to use css in your restartless addon, then you have wondered what the best way to do so is. There are many options, you could create xul/html elements to inject css, or you could simply alter the style attribute of elements you care about, but the other option (and the best one imo) is to use the nsIStyleSheetService to load css.

Loading and unloading

Use the loadAndRegisterSheet() method to load css at startup, and then use unregisterSheet() to unload the file during shutdown.

Getting CSS URL

You can use the bootstrap.js's "__SCRIPT_URI_SPEC__" constant to find the url of your css. For example, if you named your css file main.css and it was in a 'skin' folder in the root of your addon, then the url of the css file will be:

@-moz-document

You must use @-moz-document however to define which content or chrome page(s) the css rules that you are defining should run on. Userstyles have the same requirements.

Example

Here is a example where I separated the css from the bootstrap.js file for a addon called Search Tabs.

This morning I created a Jetpack module which makes it dead simple to include userstyles in a addon.

How to use

Here's a example:

In this example, the addon is loading a userstyle/css file located within it's "data" folder.

If you'd like to use this module, then it is available on github here for those of you that know how to use the addon-sdk. Otherwise, the module is also available on the Addon Builder here, and I have a example of how to use the module in the Addon Builder here. So give it a try!

UserStyles

For those of you that don't already know, a userstyle can be used to modify the css of any webpage (aka content) or Firefox window (aka chrome), and has been made popular by Stylish add-on for Firefox for which there is a site, userstyles.org, where thousands of userstyles can be found.

This userscript will expand the #main content field at userscripts.org with some simple CSS.

The Unpleasantry:

Currently the #main content div has a width set to 750px, which squeezes the little room the text I want to read has, leaves a ton of white space, and looks disgusting overall on a widescreen monitor.

The Alleviation:

The "Userscripts.org Expand Main Content Area" UserScript simply adds a little css to the page to allow the #main content div's width to automatically adjust to the size of your screen, which should help you read the page, and generally make pages shorter.

This userscript removes all CSS that is only for media="print", and makes the media="..screen.." into media="...screen..., print" so that what you see on the screen is what you will get for your print out of the page.

The Unpleasantry:

Currently if you print a webpage (or go to print preview) you may notice that most sites do not look the same as they do on the screen when you try to print one of their pages. This is because the page has CSS specifically designated for media="screen" which is different than the CSS they use for media="print".

The Alleviation:

Once you install the "Remove Print CSS (WYSIWYG)" UserScript there will be a Greasemonkey menu command that you can use called 'Remove Print CSS' which removes the media="print" CSS and makes the media="...screen..." CSS media="...screen..., print" CSS, which means that the same CSS used for your screen will be used when you try to print a page.

[More]