Max Design - Colored boxes - Step 10. Hiding rules from older browsers

Colored boxes - Step 10. Hiding rules from older browsers

Choosing a method

The method you use to link for external CSS files will depend on your desired level of browser support.

If you want to ignore older browsers, you could simple use linked style sheets. Older browsers would render many rules poorly and may make it hard for users to access some of the content.

If you want to serve unstyled content to older browsers, you could use two style sheets - one linked and one imported. All advanced styles (positioning, padding, margins etc) would go in the "@import" style sheet.

For this example, we will provide partial support for older browsers. This means that we will not move all advanced styles to the "@import" style sheet. Instead, we will try and move as few advanced styles as possible to maintain some semblance of the correct layout. This is a very hard task, as each of the older browsers interpret CSS incorrectly, but in quite different ways.

The hiding method

Check your site in a range of older browsers and look for elements on the page that are not rendering correctly. Experiment, by commenting out each declaration associated with these elements until you find the specific ones causing the problem. Then, simply move these declarations from the linked CSS file to the @import CSS file. Rules that commonly render poorly include borders, padding, margins and floating elements. As you move each rule, test the layout on older and modern browsers.

Acceptable variation

The layout may look radically different in older browsers when compared to modern browsers. This does not matter, as long as the layout does not hinder users and they can access all of the content.

For this exercise, we have focused on hiding styles that affect Netscape 4.x as this browser is the most common older browser currently in use. This means that other older browsers, like Internet Explorer 4.x may render the page differently. However, you could hide declarations that render incorrectly in other older browsers as well. If you keep hiding declarations, trying to satisfy all older browsers, you would eventually be left with simple styles like fonts, colors and some basic positioning.