Home     SSI Lab     CSS Templates     CSS     Htaccess     Web Design     XHTML

CSS Tutorials




CSS Templates



IE Related



Web Design




Separate style sheet for old browsers


As you should be aware certain styles will not work in old browsers such as the version 4 browsers. If you want to use CSS but maintain support for these old browsers it is recommended that you create a style sheet especially for these old browsers.

This guide just shows you the most common way of including two style sheets so that old browsers will read from one style sheet which newer more compliant browsers will overwrite with your more advanced style sheet.

The Code

The following code shows how you link to both required stylesheets:

<link rel="stylesheet" type="text/css" href="simple_styles.css">
<style type="text/css">
     @import url(advanced_styles.css);

Your styles for older browsers should be contained in simple_styles.css. Old browsers understand the style sheet link <link rel=""... but they do not understand the @import rule so simply ignore that.

Newer browsers which understand the @import rule will read these styles and over-ride the simpler styles. You have to be clever about it and only over-ride those styles which you need to.

Simple styles

To write your simple style sheet you should:

  • avoid a:hover
  • avoid display:block
  • use negative margin-top for headings (H1-H6)
  • avoid background shorthand
  • border shorthand works in NN4+, avoid other definitions
  • element heights
  • list styles

To get an accurate reference you really need to consult a compliance reference chart such as ones you will find here:

  • http://www.westciv.com/style_master/academy/browser_support/
  • http://www.w3schools.com/css/css_reference.asp

Advertisement Sign up for free to PayBox.me today and get $25 just for joining AND earn up to $20 per day for participating.