User Stylesheets

From CSS Discuss

Jump to: navigation, search

User stylesheets are stylesheets which a user can add to author styles to control what they see. One particular use of user stylesheets is for diagnostic purposes - see Diagnostic Css .


Activating user stylesheets in the browser

Browsers vary in the ease with which you can toggle a user stylesheet on and off as you move from site to site. At present, only Opera permits the use of multiple user stylesheets simultaneously.

  • Opera Select Style from the View menu. Toggle User Mode on, then select one or more of the user stylesheets shown. Opera contains some useful predefined user style sheets for diagnostic and accessibility purposes. See Opera User Stylesheets.
  • Mozilla Firefox users must store their user stylesheet in a particular directory. See Mozilla User Stylesheets.

Bookmarklets for user style sheets

Bookmarklets are ideal for storing user style sheets that you only want to use occasionally and creating one-time user style sheets.

  • The User Style Bookmarklet Maker makes a bookmarklet to apply CSS of your choice. Once you type the CSS and name the bookmarklet, you can drag it to your personal toolbar and apply the style sheet on any site with one click. It works in IE for Windows and in Mozilla.
  • Test Styles creates a window into which you can type CSS rules that are automatically applied to the document you were viewing before clicking the bookmarklet. You can use it to make a "one-time user style sheet", to experiment with new styles for your site without editing any files, or for Diagnostic Css . It only works in Mozilla.

Making your site user stylesheet friendly

Adding an ID="yoursite" attribute to the Template:BODY element of each of your site's pages allows visitors to define their own styles for your site by combining CSS's ID selectors with descendent selectors:

 /* --- default heading 1 style --- */
 H1 {font-family: Helvetica, sans-serif;}
 /* --- a heading 1 style just for your site --- */
 #yoursite H1 {font-family: Impact, sans-serif;}
 /* --- a different heading 1 style for another site --- */
 #anothersite H1 {font-family: Univers, sans-serif;}

There was a suggestion to apply the site-wide ID to the Template:HTML element, but that's not valid HTML. Template:BODY is the highest element with an ID attribute.

If a lot of people adopt this technique, two sites might choose the same ID. One way to avoid namespace collisions is to use a munged form of your domain name or Web address as the ID, for example by replacing punctuation with hyphens: Template:ID="www-bighost-com--myaccount".

You can extend this technique to individual pages by wrapping a page's contents in a Template:DIV with an Template:ID attribute that's unique among your site's pages. For example, you could use a munged relative URL: Template:ID="weather-todaysforecast". I use this on my personal site; you can customize how the site, a particular section, or even an individual page appears in your browser.

More discussion of this technique can be found at Tech Notes /css.tip.2.html, which has more discussion on avoiding namespace collisions.

The technique was invented by a poster on the comp.infosystems.www.authoring.stylesheets newsgroup and publicised by Eric Meyer .

-- Mark Irons


Personal tools