|
||||||||
|
The browsers that have the fewest problems with style sheets are those that do not support them at all - they will not be caused to crash by them, they will not cause unreadable documents, etc.
However, just because they will not be prevented from reading a document by its use of a style sheet (unless, of course, you place every letter on the page so that the style sheet is required to put them in the right place), it does not mean that you can ignore them.
Approximately 5% of browsers do not support CSS (about 80% of these older browsers are Netscape 3 installations), and almost all of these support some kind of graphics or color, etc. Therefore, if these users come across your page that uses style sheets alone, they will think that you don't know how to change the page from black on gray to something more attractive, and will probably be less inclined to buy your product, and might not bother to read your page at all.
The good news is that it is very easy to provide for these users, without compromising style sheet use for newer browsers.
Pages look unacceptably ugly with the basic black on gray, and if you allow your users to put up with this, then you are failing in your duty as a web designer. This is made even more important by the fact that HTML formatting attributes such as bgcolor, are overridden by style sheets, so the old browsers get the HTML formatting attributes, but the new ones get the style sheet. As a result, you should specify a different background color, text color, active link color, visited link color and unvisited link color on the BODY tag:
<BODY alink="#ffff00" bgcolor="#ffffff" link="#0000ff" text="#000000" vlink="#ff0000">
The fact that you are being foolish if you do not set these attributes is emphasized still further by
the fact that Internet Explorer 3 does not support the CSS background property in
LINKed style sheets on BODY or HTML, and so therefore if you have set, as a matter of course,
BODY's attributes this won't necessitate the addition of an embedded style sheet.
If you are sure you do not want to set these attributes, you should reconsider then reconsider again - you have no right to say to the people using Netscape 3 (or whatever) that they must upgrade, and if they don't, as a price for their wickedness they must put up with black and gray.
If you are formatting many pages you should think very carefully before setting the colors to anything other than black on white, since this color combination offends no one, but you (they) may tire of a more adventurous color scheme, and if you set it on many pages, it will take a long time to change it.
Note that it is perfectly acceptable to do this (set non-black-on-white color schemes) in CSS however, because you can easily change it; especially if you take advantage of RichInStyle.com's MySite technology, which offers users a number of styles, allows them to select the best one and remembers their preference.
If you set a background image with <BODY background="xxxx.gif">, IE 3 and Netscape buggily do not allow you by CSS to state that you do not want a background image at all.
This seems to present a problem in that although you can set a different image in the style sheet, there is nothing you can do if you decide that you don't want a background at all.
Thus it would seem that you have two choices: (1) don't give your older browser users a background image or (2) be stuck with a background image for ever.
However, there is a hack that avoids this:
As I have already explained, the style sheet is given precedence over the BODY declaration. Thus if we have the code below, the browser doesn't bother painting the background black, it just goes straight ahead and paints it green.
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
BODY {background: green}
-->
</STYLE>
</HEAD>
<BODY bgcolor="black">
Equally, if we have the code below, then the browser doesn't waste the user's time by downloading background2.gif, if it is only going to put background1.gif on the page.
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
BODY {background: url(background1.gif)}
-->
</STYLE>
</HEAD>
<BODY background="background2.gif">
So if we have the code below, the browser has two different background-images, but knows to give the style sheet one precedence, and ignores the BODY one. But when it goes to get madeup.gif, it can't find it, so falls back on the green background - NOT real.gif.
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
BODY {background: url(madeup.gif) green}
-->
</STYLE>
</HEAD>
<BODY background="real.gif">
So far we have made our page look attractive without compromising our style sheet in backgrounds.
It is actually possible to use almost all old-style deprecated HTML without compromising our style sheets.
It is also possible to override other old-style HTML, if you do this with formatting
attributes, it should not cause any problems, but with formatting tags, you will have to
add selectors to your style sheet. For example, with: <H1>. . . <FONT
face="Courier"></FONT></H1>, you will have to change your H1 {} rulesets to
H1, H1 FONT {}.
Personally, I don't bother, and I strongly recommend that you do not either, because although changing background and foreground colors makes an enormous difference and is easy to do, adding lots of FONT tags has a much lesser effect, and is far more time and file consuming.
There are exceptions to this general rule. In particular, isolated areas of your page will often warrant the use of HTML formatting attributes. For example, RichInStyle.com uses FONT tags in the navigation tables at the top of the page and on the front page. For example, if you view the navigational tables at the top of the page in a browser that doesn't support CSS, this is what you will get:
|
||||||||
|
The good thing about this is that users of old browsers are presented with an acceptable navigational device, but newer browsers are not constrained by what is served to the older browsers (because where each old-style formatting technique is used a newer one is provided to overide it; for example, there is bgcolor=black on the tables, but there is also class="sections" so that TABLE.sections {background: red} allows easy changing. Similarly, there is font color="white", but inside that is a SPAN element so that it is easy to override the font coloring (note that the SPAN is a hack because many browsers given FONT {color: black} and <FONT color="white"> will apply the white color, but if there is a SPAN inside, this problem doesn't occur because the FONT is still white, but the SPAN, which is 'nearest' the text is unaffected)).
The following template does all that is necessary to cater for users of older browsers:
<HTML>
<HEAD>
</HEAD>
<BODY alink="#xxxxxx" bgcolor="#xxxxxx" link="#xxxxxx" text="#xxxxxx"
vlink="#xxxxxx">
</BODY>
</HTML>
Now that we've considered writing perfect style sheets and using style with older browsers, you will probably want to continue with the next section, which considers cross-browser style.
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.