1. Home
  2. Computing & Technology
  3. Web Design / HTML
Displaying Stylesheets Dynamically
Part 1: Using Scripting to Coordinate Styles with Browsers That Support Them

 More of This Feature
• Part 1: Introduction
• Part 2: Scripting CSS
• Part 3: All Together
• Part 4: Alternate JS
 
 Related Resources
• Advanced CSS
• Beginning CSS
• Cross-Browser DHTML
• Quick JavaScript
• Styles Library
• CSS Links
• JavaScript Links
 
 From Other Guides
• JavaScript: Browser Check Script
 
 Elsewhere on the Web
• Ultimate Browser Detection Script
 
 Stay Up-to-Date
  with Web Design
  Email:
  

By Jennifer Kyrnin

Browser Issues

  • Internet Explorer 3
    This browser doesn't really support CSS reliably. There are some things that it supports, such as font color and size, so you should have a separate style sheet for this browser if you have a lot of readers who use it.


  • Netscape Navigator 4
    This browser supports many of the CSS1 properties, but it has problems with inheritance and margin properties. Also, percentage widths are determined by the width of the entire browser window, not the current container element.


  • Internet Explorer 4
    This browser supports most CSS1 properties fairly well, but it has some problems too. Margin, padding, and border properties on in-line elements is spotty and can result in some interesting behaviors. And the background-repeat property doesn't work in Windows, but works fine on Macintosh versions of the browser.


  • Internet Explorer 5
    This browser works essetially the same with CSS1 as IE4. The main difference is that background-repeat now works in Windows, and it supports display : block and display : inline.


  • Opera 3.6
    Opera does fairly well with CSS1 except for a few problems with vertical alignment, padding, clear, background-attachment, and white-space.


  • Opera 4
    Opera 4 supports all of CSS1 correctly.


  • Netscape Navigator 6
    Netscape 6 supports all of CSS1 and most of CSS2.

Because of these limitations, it can be very frustrating to create a style sheet that works with all the potential browsers your visitors might have. You could create a massive stylesheet that had all the properties you wanted in it, but sometimes they interact with each other in strange ways so you end up with really odd looking pages. And they certainly wouldn't look as you intend them to in many browsers.

The best solution is to create a stylesheet that is specific to each type of browser you're going to support and then use JavaScript to dynamically serve the correct stylesheet depending upon which browser is viewing the page.

While you can create a stylesheet for the different browsers, this does not mean that the pages will look identical in different browsers. This is just a way to insure that they look good in the different browsers, or at least how you expect them to look.

Next page > Scripting Your CSS > Page 1, 2, 3, 4

Previous Features

Explore Web Design / HTML

More from About.com

  1. Home
  2. Computing & Technology
  3. Web Design / HTML
  4. About.com Web Design A to Z
  5. Web Design Articles A-H
  6. Web Design/HTML Articles D
  7. Displaying Stylesheets Dynamically

©2008 About.com, a part of The New York Times Company.

All rights reserved.