Table of topic groups > Front page of CSS-guide > Extra pages > J What are user style sheets

J What are user style sheets

Topics

• Common
• Why user style sheets?
• Usage and deficiencies

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.