2.4. CSS and the Ever-Shifting World of Browsers

The CSS "standard" is relatively recent, and the latest version, CSS2, is even newer. So, it's not surprising that older browsers don't do as good a job of supporting CSS as the newer ones. As the browser manufacturers release new versions of their products, CSS support gets better. Unfortunately, but understandably, a good many users refuse to upgrade their browsers every time a new release appears.

As a Web designer, you have to decide, usually in concert with your client or manager, how much you're willing to worry about support for older browsers. Regardless of how you answer that question, a helpful rule to keep in mind is this: wherever possible, design your pages so that a user with a browser that does not provide good CSS support will still be able to view the site.

Table 2-1 summarizes the browsers that most Web designers today aim to support to some degree. I've grouped the browsers into "ancient," "old," "recent," and "new" categories based on these criteria:

• Ancient browsers provide zero support for CSS. Any style tags in your Web pages or external style sheets are simply ignored.

• Old browsers provide marginal and often imperfect support for CSS and should not be counted on to render your styles correctly.

• Recent browsers provide nearly complete support for CSS1 and render at least some CSS2 features correctly as well.

• New browsers support all of CSS1 and most, if not all, of CSS2.

Netscape Navigator 3 and earlier Internet Explorer 2 and earlier Opera 3.5 and earlier

Internet Explorer 3 and 4 Internet Explorer 5 for Windows Netscape Navigator 4 Opera 4

Internet Explorer 5 for Macintosh Internet Explorer 5.5 for Windows Opera 5

Internet Explorer 6 for Windows Netscape 6 and 7 Mozilla 1 Opera 6 and 7

There are many minor browsers and variations that aren't listed in Table 2-1. If you need to examine any particular browser, visit the W3C's CSS site for a more complete listing.

In an intranet situation where you can control browser selection, you can freely use CSS1 and major portions of CSS2's interesting functionality. If you're designing pages for a public site, however, you probably still need to be concerned with supporting the older browsers listed in Table 2-1. The rest of this chapter is devoted to the basic design and coding issues you'll encounter as you work with older browsers. Appendix B, provides a more complete reference to browser idiosyncrasies; our focus here is on techniques for dealing with the most common issues you're likely to encounter.

2.4.1. Accommodating Older Browsers

If you prepare a Web page using CSS techniques and publish it on the Web, users with ancient browsers are likely to experience it as a completely plain-looking page. Depending on the degree to which you apply CSS to your Web design, the user may see only a page whose text is formatted as the defaults in his or her browser dictate. This isn't necessarily A Bad Thing, but you can go further in supporting these ancient browsers if you want, or need, to do so.

First, you can use a browser-detecting JavaScript, sometimes called a "sniffer", to detect visitors to your site who use ancient browsers. You can then either direct them to a place to download a more current browser—and essentially slam the door in their faces, or warn them that they're going to have a less-than-satisfactory experience because of their browser's age. HotScripts.com lists a number of sniffer scripts you can download for free. There are dozens of these scripts, so there's no sense in writing your own.

Alternatively, you could create a separate, decent-looking layout with straight HTML, and use scripting to redirect the user to this alternative page. That's a lot of work to go through, and statistically it will almost certainly not be worth it unless your circumstances are unusual. For example, your target audience is one of those government offices or educational institutions where ancient browsers are still the rule for budgetary or other reasons.

You can get a pretty good idea of the mix of browsers on the Web by visiting Chuck Upsdell's well-maintained BrowserNews site. As he warns, you must use generic statistics carefully; they can be easily skewed. Ultimately, you'll want your Web host to perform some traffic analysis on your site, so you can see the profile of users who visit it.

Second, you can take advantage of the way HTML and CSS work together to create a page that looks good in an ancient browser, without interfering with the layout a new browser would produce by following CSS style rules. For example, you can include in your document's <body> tag some of the now-deprecated attributes that CSS overrides, as shown here:

<body text="#ffff00" link="green" vlink="green" bgcolor="#cc00cc"
  background="nightsky.jpg">

Now, if you include for this page a style sheet that supplies values for some or all of these properties, a new browser with CSS support will use those values in preference to the ones hard-coded in the <body> tag. But, a browser that ignores the CSS, will be perfectly happy with the values embedded in the tag.

If, using this technique, you want to specify fonts to be applied to text elements and headings, you'll have to enclose the text element you want to affect within a <font> tag, rather than embedding the font information within the element's tag. Otherwise, the provision of a specific local style for a particular piece of content would override your embedded and external style sheet instructions. Here's an example of the right way to use this technique—this allows ancient browsers to display your page the way you want, while newer browsers use CSS:

<font face="Verdana, Arial, sans-serif" size="3">
<h1>Company News and Views</h1></font>

Here's the wrong way, where the <font> tag will override any CSS applied to the <h1> tag:

<h1><font face="Verdana, Arial, sans-serif" size="3">
Company News and Views</font></h1>

You may also find it advantageous to use HTML comment symbols at the beginning and end of your <style> container, as shown in the code fragment below. This will cause at least the ancient browsers, plus some older versions, to ignore your <style> information completely, rather than simply ignoring the tags and displaying the rules as text on your page.

<style type="text/css">
<!--
  …style rules go here…
-->
</style>

As I said earlier, these techniques are not only time consuming; they are concessions to the lack of support for Web standards. I recommend you avoid them if at all possible.

In fact, I'd be remiss if I didn't tell you that what you should really do is get on board the Web Standards Project (WaSP) Browser Upgrade Initiative. Founded in 1998, The Web Standards Project (WaSP) fights for standards that reduce the cost and complexity of development, while increasing the accessibility and long-term viability of any site published on the Web. I was one of the charter members of the WaSP Steering Committee when I was at CNET Builder.com, and I remain a firm believer in what they've done—and continue to do—to make our lives as Web designers easier.

2.4.2. Dealing with Broken Browsers

OK, this section should really be called "Tip-Toeing Your Way around Netscape Navigator 4." A long time ago, in a galaxy far, far away, during the Browser Wars, Netscape version 4 managed to foul up support for just enough CSS for most Web designers to consider it the bane of their existence.

Although Netscape Navigator 4.x accounts for only 2-5% of all browsers on the Web as of this writing, it was among the most widely-disseminated browsers of its time. This means it crops up in lots of places, often when you don't expect it. The Web community's opinion about support for Netscape 4 remains divided. It won't shock you to find that I'm on the side that argues we shouldn't go out of our way to support such a messy product.

On the other hand, this decision isn't always left in the hands of Web designers. Sales, marketing, advertising, and tech support folks may have a different view. So if you find yourself required to support Netscape 4 visitors, you have a challenge ahead! Here's a recipe that will lead to at least some significant success.

Netscape 4 doesn't support this syntax for style sheet import, so it simply skips over that step—and the style sheet containing the styles that will break your layouts in Netscape 4 is never imported.

We'll talk more about dealing with browser idiosyncrasies in Chapter 12.