Userstylesheets

This document is unfinished.

What are userstylesheets?

Userstylesheet is powerful method to make WWW-sites more usable and accessible to you. Userstyles are used in client side, and most current browsers support them in some form. Unfortunately most times the support is inflexible, allowing only a persistant userstylesheet.

Opera browser has always had best support for userstylesheets (AFAIK), but Opera 7 makes radical change to better, allowing multible alternative userstylesheets in addition to persistant. Unfortunately there is no UI for editing alternative personal stylesheets, how to do that explained in detail at my Opera customization page. I have no experience about using userstylesheets in Gecko based browsers or IE. There is help to how enable userstylesheets in some browsers on Css-discuss Wiki, with some other information.

Making a site userstylesheet friendly

Since big part of userstylesheet is making some your most often used sites behave as good as possible, it is great help if you identify your page good. In usenet discussion on comp.infosystems.www.authoring.stylesheets it was noticed that best way would be using unique id attribute for body element (because MSIE don't support it for html element). So best convention is to include url in id, best aproach is replace all non alphanumeric chars with dash (-), because those aren't allowed elements in id.

For example I use CSS signature "lr-iki-fi-personal". "personal" is added last, because I may sometime start using different style for some part of my site, and having it last allows using CSS selector |= to apply things in both lr-iki-fi-personal and lr-iki-fi-business by using rule [id|="lr-iki-fi"]. Don't use base level domains after the first one, in order to avoid dublicate body ids in different page (like-example-com-example-info, that may be subdomain of example.info or folder example/info on example.com)

Notice that you should not use two different body id's, unless you really use different style. So also when you use same style in two different domain, use same body id, or at least same start part of id

General userstylesheets

Things that are supposed make all pages look better. My general stylesheet is an example of this kind of styles.

Page Specific Userstyles

Things that are supposed make particular site(s) look better. My page specific stylesheet is an example of this kind of styles.

The problem with page spesific styles is to only apply the style to certain site. This is not a problem, if site has individual id (CSS signature). If there is individual id, applying styles to certain sites is somewhat easy, all you need to do is to use body id selector before any specific selectors.

#lr-iki-fi-personal h2 {border-left:0;}

Above rule makes the black line left to second level headers go away in my site.

The CSS rule consist of First part that is selector and second part inside curly brackets ("{}") is declaration-block

Unfortunately most sites don't have one. Fortunately often there is something that is nearly individual in the site, especially when compined with something else.

body[onLoad="document.forms[0].searchword.focus();"] {background:#EEFFEE !important;}
body[onLoad="document.forms[0].searchword.focus();"] table[dwcopytype="CopyTableRow"] {display:none !important;}
body[onLoad="document.forms[0].searchword.focus();"] img {display:none !important;}
body[onLoad="document.forms[0].searchword.focus();"] td[colspan="3"][class="small"] {display:none !important;}
body[onLoad="document.forms[0].searchword.focus();"] table[height="27"] {display:none !important;}
body[onLoad="document.forms[0].searchword.focus();"] table {display:inline !important;}
body[onLoad="document.forms[0].searchword.focus();"] tr {display:inline !important;}
body[onLoad="document.forms[0].searchword.focus();"] td {display:inline !important;}
body[onLoad="document.forms[0].searchword.focus();"] br {display:none !important;}

This rule block makes dictionary of U of Campridge fit small space, like hotlist panel in Opera 7. It uses body elements onLoad attribute to identify the page. It is possible that this matches some other page too, but it's unlikely1.

Sometimes we don't have even somewhat individual attribute values, as onLoad, or color attributes (bgcolor, text, link, vlink). Then we have to trust compinations of other elements and attributes to change something. This method is more likely to break pages that it is not supposed to apply - hardest pages to apply special styles are pages with strict code, but not CSS-signature.

body[topmargin="0"][leftmargin="0"] table[border="0"][cellspacing="1"][cellpadding="3"] {position:absolute;top:0;left:0;right:0;border-collapse:collapse;font-size:11px;border:3px solid red;}
body[topmargin="0"][leftmargin="0"] table[border="0"][cellspacing="0"][cellpadding="7"] tr:first-child br {display:none;}
body[topmargin="0"][leftmargin="0"] table[border="0"][cellspacing="0"][cellpadding="7"] tr:first-child {position:fixed;z-index:2;bottom:0;left:0;border:3px solid red;margin:0;height:2em;padding:0;background:white;}
body[topmargin="0"][leftmargin="0"] table[border="0"][cellspacing="0"][cellpadding="7"] tr:first-child td font[size="2"] {display:none;}
body[topmargin="0"][leftmargin="0"] table[border="0"][cellspacing="1"][cellpadding="3"] td + td + td {display:none;}
body[topmargin="0"][leftmargin="0"] table[border="0"][cellspacing="1"][cellpadding="3"] + a {position:fixed;bottom:0;background:white;width:100%;border:3px solid red;text-align:right;height:2.2em;}

This code changes acronymfinder seach result page more compact. The methods are not as secure as the ones before, as I use selectors that match pretty common attribute values in compinations. Because thise are somewhat dangerous to use, I have added 2px red border around chnaged elements, so if this rule happens to apply other sites, I can easily see where the problem is, and switch of the stylesheet.

Special purpose stylesheets

These are used for special purposes, such as debugging code, or finding anchors. My id stylesheet is an example of this kind of styles, it makes id attribute values and named anchor element names appear before element, so it makes easier to link to certain point of the page, if there is id's or named anchors.

Opera 7 includes many special purpose stylesheets, for example "Debug with outline" and "Disable tables".

I also have a scratch stylesheet, so I can test some effects of some CSS to some pages easily. Especially handy when debugging other peoples code, or testing your own against supposed userstylesheets.

h1, h2 {outline:2px solid red;}
h1[id], h2[id] {outline:none;}

This rule makes headers whitout id attribute have red outline, so you can spot them, and ad id's.

Footnotes

  1. Statistical method: Stetson-Harrison
This page is last updated on 2003-03-04
Lauri Raittila lr@iki.fi