Daryl Croke

Index:

Philosophy behind style sheets.
Design features.
User control of CSS.
Alternative Methods.
Cascading Style Sheets Used.
Resources and references.

Philosophy behind style sheets.

The guiding principle for the style sheets used throughout this site is accessibility. Consequently text should be large enough to read with a high contrast. Pages should be scaleable to suit different monitor sizes and browser default font sizes. Users should be able to zoom to the text to any level without the page becoming unreadable. The style sheets will be optimised to generation 5 onwards Browsers. However styles that render content unusable on older browser will be avoided. Alternatively style sheets optimised for older browsers can be developed.

Design features.

Page Layout Controlled by CSS.: Following sound accessible design practice page layout is controlled by CSS not tables.
Text sizes are a percentage of browser default.: Font sizes are set to percentage of the browser's default size, important text is set to 100% of the browser default size. This avoids the problem of users with low vision being forced to read text with a tiny and unreadable point size.
Pages are scaleable.: To suit users with a wide variety of monitor sizes all pages are scaleable, that is they stretch or contract depending on monitor size. It cannot be assumed that the majority of users have large monitors. A significant section of the population still access the Internet with small monitors (15 inch or smaller).

User Control of CSS

Users of the site can load the Cascading Style Sheet of their choice. The links after font size allow one of three different style sheets to be loaded.

font size: small | medium | large

A user with poor eyesight could choose large. This style sheet has large text size (120% of browser setting). Another user could choose small which has smaller text size (80% of browser setting). The medium style is the default style it uses the browsers text size setting.

Other style elements are incorporated into the different style sheets. The large style has an expanded navigation bar to accommodate the larger text size and possible use of a smaller monitor. As the site develops more style changes will be included to suit the needs of different types of users.

The method used to load different style sheets was developed as part of research project into building a narrated web site for users with visual impairment. Basically when a user chooses a style the browser window is renamed and the page reloaded. When the page reloads JavaScript code asks what the window name is and loads the appropriate style sheet. For convenience I will call this method the JavaScript Style Switching Method. I have discussed the actual coding for this method elsewhere, see JavaScript style switching method explained.

I believe that the beauty of the JavaScript Style Switching Method is its simplicity. Other methods for switching styles involve far more complicated processes that usually rely using "cookies" (small files placed onto the hard disc of the users computer).

Alternative Methods.

On the web site "A List Apart" (http://www.alistapart.com/stories/) two methods of switching style sheets are discussed. One uses a combination of cookies and JavaScript. The other method avoids JavaScript replacing it with PHP however it still relies on Cookies.

PHP and Cookies method
http://www.alistapart.com/stories/phpswitch/

JavaScript and Cookies method
http://www.alistapart.com/stories/alternate/

I can understand the logic of wanting to replace JavaScript as some users disable JavaScript from their browsers. However many users also disable Cookies as well so a method that relies on Cookies is equally problematic. The most accessible solution would be not using JavaScript and Cookies at all. It might be possible to use PHP or some other server side scripting exclusively to switch style sheets.

Cascading Style Sheets Used.

This web site will have at least three different Cascading Style Sheets.

medium.css Which will be the default style. Text size is set to 100%.
small.css Text is set to 80%.
large.css Text is set to 120%.

Resources and references.

The official CSS2 specification.
http://www.w3.org/TR/REC-CSS2/

W3C Web Accessibility Initiative.
http://www.w3c.org/WAI/

W3C CSS validation service.
http://jigsaw.w3.org/css-validator/

WebReview.com: Style Sheet Reference Guide.
http://www.webreview.com/style/css1/charts/mastergrid.shtml

The first Style Switcher I saw was.
Al Sparber and Gerry Jacobsen, CSS Cookie Monster, Dreamweaver 4 Magic, ESOTERICA LTD, 2001. see Project Seven Development, http://www.projectseven.com/