Separate style sheet for old browsers

Sponsors

Bookmark with

StumbleUpon
del.icio.us
Digg it
reddit
Furl
Spurl
ma.gnolia
Yahoo MyWeb
Windows Live

Introduction

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);
</style>

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