Requires CSS

The latest two or three versions of the major browsers (Internet Explorer, Netscape/Mozilla, and Opera) all support cascading style sheets. This means that using stylesheets to handle most of the appearance of your page is now a practical thing to do.

Unfortunately, there are still some people out there who are using really old browsers or alternate browsers that don't support stylesheets. In most cases this doesn't matter too much as many of your stylesheet commands only affect the appearance of your page and your page will still be useable even if it doesn't look quite as good as you would like.

There will also be some interactive functions that don't work on browsers that don't support stylesheets since stylesheets are an important part of Dynamic HTML (DHTML). As these interactive functions also require the use of Javascript, you can include tests into your Javascript to see if the particular browser supports DHTML (and thus also supports CSS).

This leaves the situation where you use stylesheet commands on your page and you want to tell those whose browsers don't support CSS what they are missing out on. Well we can use stylesheet commands to hide text on our page so that those whose browsers don't support stylesheets will see the text but those whose browsers do supprt stylesheets will not see the message. I have such a message as the paragraph following this one (of course if your browser supports stylesheets then you can't see it).

This browser does not support stylesheets.

If you can see the above paragraph that tells you that your browser doesn't support stylesheets then obviously your browser doesn't (or you have stylesheets turned off). If instead there is a larger than normal gap above this paragraph then your browser does support stylesheets. There is another version below - only this time the space will not be there if the paragraph is omitted.

This browser does not support stylesheets.

Okay, so how did I code those paragraphs so that they only appear in browsers that don't support stylesheets and how do I know that the paragraphs are really there and do appear when stylesheets aren't supported?

The coding of such paragraphs is simple. The first added style="visibility:hidden" to the paragraph tag. The second added style="display:none" to the paragraph tag. That is all that you need to do. Of course if it isn't a paragraph that you want to display when stylesheets aren't supported then the same parameter can be added to whatever other tags that you are using.

To see that the paragraphs really do appear when stylesheets aren't supported you need to view the page in a browser without stylesheet support. This is one area where having access to a version of the Opera browser comes in handy as not only does the browser support stylesheets etc. but it also gives you display options to easily turn off stylesheet support to check how your page appears without stylesheet support. The easiest way to do this is to change from author mode to user mode using the button immediately to the left of the address field on the address bar.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow