I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.

J What are user style sheets

Topics

Common

They work relative well at least in MS IE 5.x+ and
Opera 4.x+. How they are used and what is the
effect of the user style sheets to the presentation of documents
is browser dependent.

Why user style sheets?

They have at least following productive usages:

If you meet sites, which you have difficulties to read you
can change the layout of the web pages much easier for you to
read. You can for example use bigger fonts, other font face and
different text and background colors.

If you use Opera 4.x+ you can set the width of the page
according to you own needs. You can for example use the same
basic layout, which I have used in this page. The style of this
page is useful, if you browse to a page, where the text flows
from left to right. Especially with Opera 5.x+ user style sheets
are very useful.

In most cases they increase the speed of browsing. If you
just want to search some information from the Internet, I
recommend to use user style sheets.

Pages are easy to test

It is easy to test different presentation models.
You can send them to the customer of the site or inform about the
users of the site the possibility to change the presentation with
them.

It is possible to test partial pages without sending them to a server-application.

Note. If you define the screen media (@media screen), remember to define also the media type for the full screen mode. Use for it its own media type (@media projection) or define it together with the normal screen media (@media screen, projection).

Try my userCss.css
file for example going to the CSS2 specification site with my CSS (the
link opens a new window).Note. This CSS-file removes the meaning of all
FONT elements and all text and background colors,
which the author has defined! This is necessary in order to avoid
situations, where text colors and background colors are the same
or very close to each others. This file is optimized to
Opera 5.x+ because the meaning of this css is the control the
width of the textual content.

In those browsers, which I have tested, the CSS can control
the width of the page only in Opera 4.x+ and Netscape 6.x+.
Indeed the CSS-file doesn't force wide tables to fit to the
maximum width, which I have set (body
{max-width:600px}). It is not reasonable to force the
width of tables to certain maximum value, because the content of
tables might overlap each others and the content is
unreadable.

Usage and deficiencies

In MS IE 4.01 and Opera 3.x they
don't work well. The most irritating is that the
font-family property doesn't work properly.

The change of preferences

In all browser, which allow to define user style sheets, it is in the first time define the path of the CSS-file (you need to do this however only once, if you don't want to change the file).

In MS IE the usage is a little bit troublesome, because the user must
browse through multi-level submenus: Tools >
Internet options > Acessibility.

The defining of basic preferences is also in Opera a little bit troublesome: File > Preferences >
Documents (indeed the change is easier, if you use both
the keyboard and mouse: ALT + P > Documents -
next time this dialog is ready open and the resetting of original
settings is fast). You get finally a dialog, where you must
define with check boxes, how to use document and user style sheets.

Next times in Opera to change between user and author style sheets is extremely easy, because in the address bar is a button to change between document and user mode. In Opera 7.x the button has extra menu, where the user can select predefined style sheets, which can be used at the same time. Some of them are for Web-authors (many people think that they don't belong to basic browsers and for Web-authors should be an own browser) and ordinary users.

Note 1. If the the style sheet control is changed by the option Document mode as default, the user must push Apply, if he wants that the effect works immediately - otherwise the change takes the effect, when the user opens a page into a new window.

Note 2. According to an e-mail, also to MS IE can add a button by using a development kit to take off/ put on user style sheets. Today it is also possible to customize Opera.

I don't find from the user interface of any Mozilla Gecko browser any option to set a user style sheet file. In the site of Mozilla org. has been explained how to set some files into a sub-directory of the /Chrome folder.

The name of the files and the folder, where they are are exact defined. They can't be freely named and set into any folder like in MS IE and Opera browsers. I hope, that also Mozilla Gecko browsers could have as easy way to set a user style sheet file as Opera - this might be too much to ask because Mozilla Gecko browsers has so different user interface.

Because of the different user interface the best solution in Mozilla Gecko browsers would be the option User style sheets under the menu View so that the user could choose between different style sheets. The browser should give easy way to set multiple user style sheets. The possibility to set user style sheets should be found by using the path Preferences > Appearance.

Indeed Mozilla Gecko browsers give the possibility to change style sheets (View > Use Stylesheet), which MS IE and Opera 3.x-6.x don't allow (Opera 7.x+ supports alternative style sheets). According to W3C user agents should support both user and alternate style sheets. The functionality of them needs using the title attribute (for example <LINK rel="alternate stylesheet" title="Alternate SS">; I handle this matter also in the page 2).

Unsupported features

Even if user style sheets work quite well in Opera 4.x+, they
don't work however as well as author's style sheets. Following
matters don't work in Opera 4.x+:

background-image.

list-style-image.

@media print and overall CSS for printing.

@media projection doesn't work in Opera 6.0 (it works in at least in the 5.x series browsers).

In MS IE 5.5 list-style-image and
background-image properties work, but the @media and @page at-rules crashes it (MS IE 6.0 doesn't crash using of them). Printing can't be controlled with the user CSS in MS IE 5.5. In MS IE can't take off the document CSS (like in Opera) in order to use only the user CSS.

Because the user style sheets is a intended to be a single
style sheet, the import rule (@import) doesn't
work. This might be also a bug.

!important

The so-called important rule (!important look at
the page What is the processing order of CSS) has not in
practise much meaning. In MS IE it is possible to control with
the browser preferences (roughly) fonts and colors, but other properties might need it (for example ul li {list-style-image: url(ball.gif) !important;} sets more weight to the user defined list style images as the author's defined list style images). MS IE seems to follow CSS2 and user's important rules have more weight than author's defined important rules.

At least until the version 5.01 Opera browsers seem to follow CSS1, when author's style sheets has more weight than user's style sheets (this is not however so important, because in Opera it is possible just take off all document CSS). In my tests Opera 5.12 gives higher priority to the import rule of the users style sheets and Opera 6.01 to the document CSS. Only the Opera 5.1x series seems to work in this matter according to the CSS2.

Not into the public use without my permission. If you want to use my pages at some way read the copyrights.

An editor for creating standard-compliant HTML and XML documents.
Documents of this site have in most cases checked with HTML Tidy by Dave Ragget (W3C) and randomly with the official MarkUp Validation Service of W3C. The syntax of most pages in this site should conform with the XHTML 1.0 specification of W3C. Test this page!