---

O’Reilly.net: Tap the Power of Mozilla’s 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.
… 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. … 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”).
  • Cause Mozilla’s drop-down menus to be semi-transparent — like
    Apple’s OS X.
  • Change the background color of your Mozilla chrome.
  • 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!”

Complete
Story

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends, & analysis