Colored boxes - Step 1. Decide on a level of browser support
Before starting to build a CSS-based layout, you should decide which browsers to support and to what level you intend to support them. To help you decide, talk to clients and sample users as well as examining existing log files if they are available.
There are three basic levels of browsers that support CSS:
Older browsers
Win/Netscape4.x, Win/InternetExplore4.x, Mac/Netscape4.x, Mac/InternetExplorer4.x, etc
Recent Browsers
Win/InternetExplore 5, Win/InternetExplore 5.5, Win/Netscape 6, Win/Mozilla1.x, Win/Opera6, Mac/Netscape6, Mac/Mozilla1.x, Mac/Opera5 etc
Modern browsers
Win/InternetExplore 6, Win/ Netscape7, Win/Mozilla1.5, Win/Firebird0.7, Win/Opera7, Mac/InternetExplore5.2, Mac/Safari1, Mac/ Netscape7, Mac/Mozilla1.5, Mac/Opera6 etc
Levels of support
Full CSS support - the browser is served all CSS rules and should display the layout in a reasonably accurate manor. If you intend to provide full support to older browsers, you may need to use very basic CSS and avoid complex CSS positioning.
Partial CSS support - certain CSS rules are hidden from a particular browser. This generally means that the browser may not display the layout accurately, but it will still display some degree of the overall presentation. For example, this could mean that the fonts and colors are rendered correctly but certain aspects of positioning are not.
Unstyled content means you hide all styles from a particular browser.
| Modern Browsers | Modern Browsers | Recent Browsers | Older Browsers |
|---|---|---|---|
| Option 1. | Full CSS support | Full CSS support | Full CSS support |
| Option 2. | Full CSS support | Full CSS support | Partial CSS support |
| Option 3. | Full CSS support | Full CSS support | Unstyled content |
| Option 4. | Full CSS support | Partial CSS support | Unstyled content |
For this example, we will use option 2.
