|
||||||||
|
So you've got your perfect style sheet, and you've coped with the older browsers. Now you're wondering, 'How do I fix my styles so they work with all the newer browsers?'.
The answer is that it is a lot easier than you probably imagine - provided you've fixed your style sheet according to the principles laid down in RichInStyle.com's guide to creating perfect style sheets, your task is not a large one. If you haven't done this, do it now.
You might think that your first decision is as to which of these routes you wish to take:
But in fact I believe the decision makes itself: you should use a style sheet with hacks. If you are careful the hackarounds will mean that each browser looks perfect.
The next decision that you will need to make if you use LINKed style sheets is whether you wish to add a short embedded style sheet to your page to ensure that the essential elements of your pages' design are retained when your page is read offline.
This is only an important consideration if your pages' nature is such that they are likely to be read offline. If you feel that the number of people that will do this is significant, to simulate the offline experience, simply view the page without the LINKed style sheet. If you are happy with what it looks like, there is nothing further for you to do. If not, you will need to add an embedded style sheet to your page.
This shouldn't contain more than three or four essential rulesets. Generally, I find that these are BODY's characteristics, plus fonts. For example, on this page I specify:
<STYLE type="text/css">
<!--
BODY {margin-left: 8%;
color: black;
background: white;
margin-right: 6%}
BODY, H1, H2, H3, H4, H5, H6, TD, TH, DIV, PRE, CODE, SPAN, P, OL, UL, DL, DT, DD, LI, BLOCKQUOTE {font-family: Arial, Helvetica, sans-serif}
SPAN.richinstyle {font-family: "Comic Sans MS"}
-->
</STYLE>
The one difficulty that you will face is the need to avoid browser bugs, since certain of your styles may be affected by bugs in certain browsers. To avoid this, see the section below on this topic.
There is but one important reminder while on the subject of embedded style sheets, however, and that is this: the embedded style sheet must precede the LINKed one so that you don't have to make changes to each embedded style sheet when you change your LINKed style sheet.
So this is what your template looks like so far:
<HTML>
<HEAD>
<!-- The STYLE block is optional; see above -->
<STYLE type="text/css">
<!--
/* You must include the comment
delimiters (<!-- -->) to avoid style appearing on screen in Netscape 3 et al. */
-->
</STYLE>
</HEAD>
<BODY bgcolor="#xxxxxx" text="#xxxxxx" alink="#xxxxxx" vlink="#xxxxxx"
link="#xxxxxx">
<!-- These (bgcolor, etc.) are from RichInStyle.com's old browser page; change them to your preferred
colors -->
</BODY>
</HTML>
The method that RichInStyle.com uses to serve style sheets is this: it uses the following HTML:
<HEAD>
<STYLE type="text/css">
<!--
BODY {margin-left: 8%;
color: black;
background: #fff;
margin-right: 6%}
BODY, H1, H2, H3, H4, H5, H6, TD, TH, DIV, PRE, CODE, SPAN, P, OL, UL, DL, DT, DD, LI, BLOCKQUOTE {font-family: Arial, Helvetica, sans-serif}
SPAN.richinstyle {font-family: "Comic Sans MS"}
-->
</STYLE>
<LINK rel="stylesheet" href="/style/all.css" type="text/css">
<SCRIPT language="javascript1.2" src="/style/MySite.js" type="text/javascript">
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000" alink="green" vlink="red" link="blue">
The small STYLE block is for people that view pages offline - this provides an acceptable subset of the full browsing experience. Note that the styles chosen are all non-problematic so that there is no chance of any problems.
Next comes the linked style sheet. This contains the full style experience. It looks like this:
@import url(okbrowsers.css);
Stuff for incompliant browsers goes here; the style for proper browsers goes in okbrowsers.css
Last, but by no means least, comes the MySite script. This remembers the style that the user prefers and uses it. If you want MySite technology for your site, you should click here.
As a general principle all style sheet users should either
If 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;
color: red}
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.
This 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 */
@import url(okbrowsers.css);
Stuff that works in all style sheets goes here; all other styles go in okbrowsers.css.
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):
<LINK rel="stylesheet" href="WillNotBeReadByIE3.css" type="text/css">
<LINK rel="stylesheet" href="awayie3.css" type="text/css">
Awayie3.css must contain at least one non-whitespace character; for example, if you just put .dummy {color: red} in it, it would hide from IE 3.
<STYLE type="text/css">
/* Won't be read by IE 3 */
</STYLE>
<LINK rel="stylesheet" href="awayie3.css" type="text/css">
P {color: red;
font-size: 14pt}
P {color: green}
This would make P red, because the redeclaration is ignored (though P {color: red; color: green} works correctly).
Thus for each of IE3's buggy properties it is possible to have one declaration for IE 3 and one for everyone else. E.g.:
BODY {color: black}
BODY {color: white;
background: black}
In normal circumstances this would cause major problems because IE 3 doesn't support background on BODY in LINKed style sheets. In this case however, the fact that the color is white won't clash with IE3's background because it ignores color: white and applies color: black instead.
Having 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;
l='<LINK rel="stylesheet" type="text/css" href="ie3';
if (ua.indexOf('IE 3.0')!=-1){
if (((ua.indexOf('IE 3.0A')!=-1) || (ua.indexOf('IE 3.0 ')!=-1)) &&
(ua.indexOf('Mac')==-1)) document.write(l+'0.css">');
else document.write(l+'.css">');
}
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 */
ua=navigator.userAgent;
l='<LINK rel="stylesheet" type="text/css" href="';
c='.css">';
if (ua.indexOf('IE 4')!=-1)document.write(l+'ie4'+c);
if (ua.indexOf('IE 5')!=-1)document.write(l+'ie5'+c);
if (ua.indexOf("Opera 3")!=-1)document.write(l+'op3'+c);
else if (ua.indexOf("compatible")==-1) {
if (ua.indexOf("/4")!=-1)document.write(l+'nn4'+c);
if (ua.indexOf("/5")!=-1)document.write(l+'nn5'+c);
}
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>
<HEAD>
<!-- Optional: -->
<STYLE type="text/css">
</STYLE>
<LINK rel="stylesheet" href="all.css" type="text/css">
<SCRIPT type="text/javascript">
<!--
ua=navigator.userAgent;
l='<LINK rel="stylesheet" type="text/css" href="ie3';
if (ua.indexOf('IE 3.0')!=-1){
if (((ua.indexOf('IE 3.0A')!=-1) || (ua.indexOf('IE 3.0 ')!=-1)) &&
(ua.indexOf('Mac')==-1)) document.write(l+'0.css">');
else document.write(l+'.css">');
}
// -->
</SCRIPT>
<SCRIPT src="style.js" type="text/javascript"></SCRIPT>
<BODY bgcolor="#xxxxxx" text="#xxxxxx" alink="#xxxxxx" link="#xxxxxxx" vlink="#xxxxxx">
There 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.
If 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>
<STYLE type="text/css">
@import url(style.css);
</STYLE>
Note that you must use the url() form of @import, not the string format (" " or ' ' ).
That's the end of this part of the RichInStyle.com guide to cross-browser style; to continue to the next section, click here.
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.