|
Collected by Elizabeth Janson Home Page |
|
Section A - One style sheet for all browsersIf you've chosen this option, you've selected the easiest of all the methods of ensuring that your page looks o.k. on all browsers. However, you have also selected the method that limits your creative freedom to the greatest extent. For example, you can't make use of line-height or margin-top declarations. There are far too many bugs to list here, but here's a quick guide:
In addition if you use tables, you will need to separate your BODY selector into two parts: one for inherited properties, and the other for non-inherited properties. For example:
BODY {font-family: sans-serif;
color: red;
background: white;
margin-left: 7%;
margin-right: 5%;
margin-bottom: 2em}
Becomes:
BODY {font-family: sans-serif;
color: red}
BODY {background: white;
margin-left: 7%;
margin-right: 5%;
margin-bottom: 2em}
Next, add every block element except for LI, DD and DT, plus SPAN to the inherited ruleset: ADDRESS, BLOCKQUOTE, BODY, DIV, DL, H1, H2, H3, H4, H5, H6, OL, P, PRE, SPAN, UL
{font-family: sans-serif; The reason that this is necessary is that Netscape 4 and Internet Explorer 3 are very badly buggy and when they encounter a table, the usual result is the termination of BODY's style for the table and all subsequent content. Note that this is only a very brief guide, but it should help you on your way to bug-free style. If you want to see a sample style sheet converted to a suits-all style sheet, you can do so, but you should take a look at the rest of the master class first. Section B - Hacks to hide style from browsersThis section is pretty similar to the last one, except it aims to be more adventurous in terms of what it achieves. The essence of this section is the exploitation of the browser bugs in order to hide style from certain, or else to only apply style to certain browsers. Generally, the browsers that cause 99% of the problems are Internet Explorer 3 and Netscape 4. In view of this fact, it is useful to have methods that will hide styles from these browsers. The principal method to exclude Internet Explorer 3 and Netscape is:
/* This is a style sheet */ If these aren't enough, here are some more hacks to hide styles from each of the browsers (note that many of these are invalid CSS): Internet Explorer 3
Internet Explorer 4
Internet Explorer 5
Opera
Netscape 4
Section C - Separate style sheets for each browserHaving decided on this option, you need a script to serve the right style sheet on your users. However, you will also need a style sheets for users who aren't, for any reason, detected by the script, or who have disabled scripts. This should be a style sheet that works on all browsers. Next you need an inline script for IE 3 users (since IE 3.0 and 3.01 don't support src). This script must serve one style sheet to users using 3.0 for Windows and one for users using 3.01+ or 3.0 for the Macintosh. Here's the script (which is 278 bytes long): ua=navigator.userAgent; The above script is copyright RichInStyle.com 2000. You may only use it within the SCRIPT element of your page. You may modify it, but must not exhibit the source code publicly. If you wish to know the purpose that the SCRIPT above is serving, it is to allow you to give IE 3 users different margins on different elements - without it you cannot do this, but are confined to only specifying margins on BODY for IE 3 users. The decision on this matter is entirely yours. However, if you do specify margins on elements other than BODY, then it is only considerate to offer IE 3 users them as well. Therefore, even if you don't need separate style sheets now, I recommend that you retain them (and thus the SCRIPT above) for the future. Without the SCRIPT above, for example, IE 3 users would be faced with the ugly sight of this page without its outdented headings. The next thing to do is to add a SCRIPT to detect the other browsers. All the other css-supporting browser support the src attribute, and so therefore since the style sheets are being LINKed, you would be mad not to include the script below in an external file (it is 568 bytes long so presents no significant download time): /* (c) 2000 RichInStyle.com (www.richinstyle.com); you may only use this script
in the SCRIPT element of a page. You must not alter or remove this message */ This script is copyright RichInStyle.com, and although you may modify it, you must not alter or remove the copyright message, and must not exhibit the source code publicly. Having done this, you now have a template file that looks like this (i.e., you must include the following in your HTML): <HTML> Creating the style sheetsThere are two approaches that reveal themselves:
It would seem initially that the first of these methods is the more attractive. However, a little experience reveals the fact that this is not so. For example, if you could put only color and font declarations in all.css and had to put margin and padding declarations in the browser-specific style sheets, then the task would be much easier. This is not the case unfortunately - it is not possible to include any one property in all.css: color, margin, padding and font all suffer from bugs that mean that you'd have to include padding except for on x and y, or margin except for on a and b. As a result, you should adopt the second approach. You need to create 8 style sheets, one for IE 3.0 (ie30.css), one for IE 3.01-3 (ie3.css), one for IE 4 (ie4.css), one for IE 5 (ie5.css), one for Opera (op3.css), one for Netscape 4 (nn4.css), one for Mozilla 5 (will become Netscape 5) (nn5.css) and one for all browsers. If this sounds like an onerous task, do not fret - in most cases, the Opera, Mozilla 5, IE 4 and IE 5 style sheets will be identical, and the IE 3.0 and 3.01-3 all but identical (apart from margin-left declarations). In addition, you are not actually creating separate style sheets, but are merely fixing an existing one. It is here where the virtues extolled in RichInStyle.com's guide to writing perfect style sheets come into their own. You should ensure that your own style sheet conforms to these guidelines, or else it is likely that you will suffer serious difficulties. In addition, you should avoid embarking upon the task of fixing your style sheet for the individual browsers until it is finished. This will save much wasted time. If you later find that changes are necessitated, you should ensure that you update all of your style sheets at once. In order to undertake this process, you will need to take advantage of RichInStyle.com's browser bug guides. However, I strongly recommend that you do not do this until you have read the rest of the master class, since it is probable that you will make changes to it as a result of reading the rest of the master class. ConclusionIf all this is getting you down, you could just take the easy way out, and just write for Internet Explorer 4 and 5 and Opera. You do this by linking your style sheet via an @import statement. This will exclude nasty old Netscape 4 and Internet Explorer 3, and save you the bother of working round all their bugs, thereby allowing you to treat them in the same way as non-css supporting browsers. Thus: <HEAD> Note that you must use the url() form of @import, not the string format (" " or ' ' ).
|
|
Email CSS begins here |
|
This page is part of Elizabeth Janson's web site
http://www.oocities.org/elizatk/index.html
Tetbury residents in the Eighteenth Century my Australian Family History and Barrie, our Family Poet. |