Print

Tap the Power of Mozilla's User Style Sheets
Pages: 1, 2, 3

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…


img, a > img {
	width:20px!important;
	height:20px!important;
}
img:hover, a:hover > img {
	width:100%!important;
	height:100%!important;
}

Fig. 3 Images orginally load as tiny 20 x 20 pixel graphics ...

Fig. 4 ... then spring to full size when you mouseover.

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:

#nav-bar {
	background-color:green!important;
	background-image: url("mozilla-banner.gif")!important;
}

Fig. 5 Change the background.

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:


button, button.left {
behavior: url(chrome://global/content/xulBindings.xml#buttonright)!important;
}

Fig. 6 Reverse the button and text position.

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."


#navigator-throbber
{
list-style-image : url("applestill.gif")!important;
}
#navigator-throbber[busy="true"]
{
	list-style-image : url("applespin.gif")!important;
}

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.

Related Articles:

Extending the Mozilla Editor

Building a Game in Mozilla

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.

Andrew Wooldridge is a XUL and JS developer at Netscape Communications Corp.


Discuss this article in the O'Reilly Network Browsers Forum.

Return to the O'Reilly Network Hub.