You've probably been hearing a lot about "skins" in Mozilla lately.
Skins are sets of files that allow you to change the look and feel of the "chrome"
in your Mozilla browser. Mozilla uses the same engine to display its UI
(buttons, drop-down menus, etc.) that it uses to display web sites like the one
you are probably visiting right now.

Mozilla skins use Cascading Style Sheets to define the rules
for the appearance of buttons and other UI elements. For instance, you
might want your "back" button to be red with a yellow border. In this same way,
user style sheets can also control the look and feel of your browser's UI
as well as any site you may be visiting. In short, a user style sheet is
a CSS file in your user profile that contains style rules controlling
how your browser displays visual elements. User style sheets act like an
additional layer of style control over your entire browser and can vary depending
on which profile you are using for that browser session.

Why does Mozilla have user style sheets?

If you look at this link: (http://www.w3.org/TR/REC-CSS1),
you'll find a section that talks about a User Agent. This is another way
of referring to your browser. CSS specifies that all User Agents should have
a default style sheet that displays elements in some routine manner, which can
act as a basis for displaying web content.

Mozilla takes this concept of a User
Agent a step further and allows a style sheet for each profile you
use. You could, for example have two different profiles in Mozilla that could
result in two very different looking browsers when you sign on. This would
be useful, for instance, if you were sharing a computer with someone who is
vision impaired or has some degree of color blindness. Your profile could have
certain settings, and his or hers could modify the browser easily to accommodate
those special needs.

I can hear you asking me, "OK, so what can I do with this?" I hear and obey; so here's the scoop.

Please tell me what cool things I can do with Mozilla style sheets

Before I go into some detail as to how to set up and use user style sheets,
I'd like to take a moment and give you some idea as to what they can do.
I hope this will give you some incentive to try them out for yourself and take
advantage of this powerful, yet virtually unknown feature in Mozilla. User style sheets
give you a centralized way to try out new style rules -- without even knowing
where in the world that visual element is stored, or even if it's XUL or
HTML that is affected. Here are some examples:

Force all links on web pages to be underlined, even if the site author styled
them differently.

Shrink all images to 10X10 pixels until you move your mouse over them (a
simple "banner ad filter").

Test out potential skin changes without having to create a new package/directory/etc.

Test out XBL changes without having to edit existing XBL bindings.

Share company-wide style information within a work-group (make the browser
look similar to everyone in that group).

Change the "throbber" based on which web site you are in.

Debug your XUL code by creating CSS that outline elements you choose.

Create a remote style sheet on a server and inherit it on multiple browsers
(using @import).

Create your own look and feel for any web site you wish!

These are just a few of the many kinds of things you might want to try out
using this new feature. It's really quite amazing to be able -- from
a single file (or set of files) -- to control the look and feel of everything about
your browsing experience. And if you combine this with XBL (more about that
in a later article), the possibilities are endless.

How to create a user style sheet

Perhaps I've piqued your interest? I hope so. Otherwise you've probably
skipped this part and are happily skimming some other news article by now. Still
here? Great -- now the fun begins. Let's dive right in and talk about how
to get your own Mozilla browser set up to use the user style sheet feature.

There are a few obvious things you need to do to begin with. Download a recent
build of Mozilla and fire it up -- to make sure it's up and working
OK. Any build around M16 should have this feature working pretty well. If you
don't know where to get a recent build, try going to http://www.mozilla.org
and clicking the download link. I'd recommend getting the version called M16
itself since it's most likely more stable than any given daily build.

Next, you need to have some idea of profiles and how they work. I won't go
into too much detail here except to say that a profile is a set of preferences
and IDs that acts as a distinct user. If you have only one profile --
which most people do -- you will automatically be logged in with that profile.
If you create more than one manually (through the profile manager), you will
be asked later, when Mozilla starts up, which profile you wish to use. I'd
recommend that you go ahead and create a second profile now before continuing.

For instance, if you are running Windows, you could look in your Start
menu under Program Files --> Mozilla Seamonkey and choose Profile Manager.
You will get the dialog asking you to pick or create a new profile. There's
one user style sheet for each profile.

It's useful to have more than one profile. I have one for my regular browsing,
one for debugging Mozilla, and another for a "minimal" view, which has all
the images removed for fast browsing. Having multiple profiles allows you to
separate out your work and home life, for example, since all the bookmarks and
other settings stay with each profile. If you need additional help with setting
up an additional profile, refer to the "Help" option in your browser.

Creating user.css:

After you've created a profile, quit Mozilla and go to the "users50"
directory (wherever it might be -- depending on your OS). Inside this directory
there will be a subdirectory for every name in your profiles list. Pick the
directory that corresponds to the profile you just created for this exercise
and create inside that directory a new one called "chrome."

Now, finally, create inside "chrome" a text file called "user.css". That's
it! That's all there is to it. Now, before you start styling your browser
like crazy, let's test things out a bit.

Testing user.css:

Fire up your favorite text editor (I use super Notetab in Windows, BBEdit on the
Mac, Pico on Linux), and place these lines into your fresh blank user.css file:

Be sure you type this information in carefully. You can probably keep this
file open (unless you're in MS Word or something -- shame on you), and you
can now re-launch Mozilla. Choose the profile you created the user.css inside
and hit OK. Go to http://www.mozilla.org
and look at the carnage we've inflicted on that site, as well as the way
we've "improved" the browser's look and feel.

Fig. 1 User-inflicted style changes.

If for some reason nothing seems to have changed, and your browser doesn't
look something like the image above, then you either edited the wrong file,
you have a CSS error, you launched with the wrong profile, you used the wrong
users50 directory, or you have a really early version of the browser. Keep trying
-- it may seem daunting at first, but once you have it, you will find the
control you now have over your browser to be quite empowering.

Let's look at the two rules you added to your user.css. The first causes
all links to have a big red border around them. You must include the "!important"
because in CSS this allows you to override the other existing style sheet rules
which may have some greater precedence. To understand the second rule,
you must have some understanding of XUL.

Virtually every UI element in Mozilla
has some dependency on a tag called BOX. So what the second rule did
was to show you exactly where and how all the "boxes" in XUL are constructed.
This is a really fast and simple way for XUL developers to debug their code
by seeing a visual hint as to how the XUL is laid out. Let's take a look
at some more examples.

Style sheet examples:

The disappearing browser:

Ever heard of the "Invisible Man"? Well you can have your very own "invisible
browser." Try out the style setting below:

box {
opacity:.33!important;
}
body{
opacity:.33!important;
}

Fig. 2 The invisible browser.

These settings allow you to see what happens when your browser and web sites
are viewed at 33% opacity. You are affecting XUL by setting the BOX tag to be
transparent, and you're affecting HTML by setting the BODY tag to be transparent.
User style sheets apply to both browser chrome and HTML content. You can use
a variation of this to make virtually any element in the browser "semi-transparent,"
such as the drop-down menus. Opacity is still a work-in-progress in Mozilla,
so don't be suprised if you eventually crash the browser fiddling with this.

Popping images:

Do you find banner ads annoying? Do you wish you could simply push them out
of the way, unless you wanted to see them? The set of CSS rules below will force
all browser images to be 20px by 20px by default -- but when you hover over
them, they "pop" back to the correct size. This give you the effect of seeing
just the textual content, unless you choose to view the images

As I move my mouse over each tiny image, Mozilla causes them to immediately
jump back to their normal size. It's an interesting effect, and it hints at the
possibility of some creative soul coming up with a really dynamic set of style
rules for Mozilla-viewed sites.

Background theme image:

One element of the browser that many people like to change is the background
for the panel that contains the navigation (the largest toolbar panel). The
rule below allows you to do just that:

You might comment out the second line if you wanted a solid color.
The mozilla-banner.gif is the image from the mozilla.org homepage. I placed
that image in the same directory as my user.css file, and it loaded just fine.
Note that you just as easily could have placed a browser URL in that field,
such as URL("http://www.foobar.com/images/image399.gif") and fetched an image
from the Net. One possible use for this may be that you fetch an image from
the server that gives you an idea what time of day it is -- a dawn image for
morning, a sunny image for midday, stars for night time, etc. It adds a new
dimension to the browser experience.

Reversed buttons:

This is not a particularly interesting example, but it illustrates an important
point. You can also effect XBL bindings via a user style sheet:

This example causes the icons on your personal taskbar (the one that has a
"home" button on it) to be moved from the left to the right of the text associated
with that button. I'll go further into XBL at a future time, but I mention it
here because this type of user style sheet could help XBL developers
test out changes or new elements they are working on more rapidly, since instead of searching
for the right CSS or XBL file to change, you could prototype it in your chrome
directory.

Target practice:

This simple style changes the cursor to a crosshair whenever it is over browser
"chrome":

box{
cursor: crosshair!important;
}

This serves to illustrate that you can also control other elements in the browser
-- such as the cursor. Any element that can be selected or controlled is
at your mercy. (No screenshot here, you'll need to try this one out yourself.)

Change that throbber!

Another popular element to change is the "throbber," that ubiquitous element
displayed at the upper right of most browsers to tell you it's "busy."

Fig. 7 You can customize the throbber in the upper right corner of the browser.

The first CSS rule tells Mozilla which image to display when it's not doing
anything -- the static state. The second rule, which uses the CSS2 "attribute
selector" feature, changes the image to an animated state. Note something
really interesting here: I could just as easily have placed a regular HTTP URL in
that URL definition, and this would have allowed you to fetch the throbber dynamically
off the web. Perhaps you have a dynamic throbber server which changes every
few minutes

Parting thoughts

User style sheets are incredibly powerful and fun. They allow you to take total style control of your browser. You can modify
just about any element that is accessible to the browser either through web
pages or through the browser "chrome." This alone makes them more powerful than
skins, which typically only affect your chrome. You can use user style sheets
to debug your XUL code, change your throbber, or make all your links olive green
and blinking, if you like. They tap into the heart of Mozilla -- which allows customizing and empowers the user.

User style sheets allow you to have a central location for the management of
your own personal style. You can virtually configure things the precise way
you like them and even control how other web sites appear to you. Skins are
great for large, sweeping changes that you want to make to your UI, while user
style sheets allow you to pick and choose elements for yourself.

I've only scratched the surface of this feature in my short time using it. I'm sure there are
imaginative souls out there who will take this and really run with it --
perhaps developing another whole class of reusable style sheets. Please feel
free to ask me questions or tell me about your experiments with user style sheets!
My email address is andreww@netscape.com.