Team LiB
Previous Section Next Section

Hack 46. Write Compatible CSS

Style a web page that benefits from Firefox but that also works in all browsers.

The messy days of all Netscape Version 4.x web browsers are falling into the past, and the days of reasonable CSS support in all browsers are upon us. This hack explains what you can do to ensure that a web page looks good in all browsers.

5.4.1. Remove Older Browsers from the Problem Space

If there were no older browsers in use, cross-browser compatibility would be far easier. Since all modern browsers have some CSS support, there is a large subset of tools to find a solution with. This is far easier than attempting compatibility with a narrow set of tools. You can remove old browsers from the problem space, making the remaining compatibility problems easier to handle. The cost is that little CSS is used for pages designed for those older browsers.

That compromise is not such a bad thing. After all, web pages should be easily viewable with CSS support turned off. This is a litmus test for good design, based on the principle of semantic markup: the sparing and meaningful use of tags. It is also a requirement for web site accessibility. So, we lose little by reducing the use of CSS in older browsers that are barely used anyway.

To extract older browsers, we deny them access to CSS information.

5.4.1.1 Deny style access to Netscape 4.x and earlier

These web browsers don't support the @import CSS directive. Use it like this in a stylesheet to exclude Netscape 4.x:

<style type="text/css">
/* styles for Netscape 4.x go here */
@import "modern.css"; /* styles used everywhere else */
</style>

5.4.1.2 Deny style access to Internet Explorer 5.x on Windows

Internet Explorer (IE) 5.x doesn't support escaped quotes in CSS files. That means that a string like this:

"foo\"bar"

is understood like this:

"foo" bar"

This can be leveraged to ensure that some styles in a style rule are ignored by Internet Explorer 5.x:

p { 
   /* styles for Internet Explorer 5.x go here */
   width : 50%;
   any-unused-property : "\"}\"";
     /* 'voice-family' is a common choice */
   any-unused-property : inherit;     /* reset it for modern browsers */
   /* styles used everywhere else go here */
   width : 60%;
};

In the third line, IE 5.x terminates the style rule when it sees the closed brace and treats the remaining content as garbage, ignoring it. All modern browsers choose the second definition of the property any-unused-property (or any one you elect to use), so this hack has no effect.

5.4.1.3 Deny style access to Internet Explorer 5 on the Mac

This browser has a bug with escaped CSS comments. A string like this:

/* a comment \*
/
/* another comment */

does not have the end-of-comment mark recognized in the first line. It is read this way:

/* a comment &#x2A;/
&#x2F;* another comment */

The result is that the first comment extends into the second comment, for one comment in total. This can be used to exclude styles from IE 5 for Mac:

/* styles for Internet Explorer 5 on Mac go here */
p { width : 50%; }
/* stop IE 5 mac from reading anything below this point \*/

/* styles used everywhere else go here - don't include any comments ! */
p { width : 60%; }
/* a comment to finish the styles excluded from IE 5 Mac */

5.4.2. Make CSS Work Across All Modern Browsers

Here are the CSS styling features that are not well supported across browsers. This list is fairly rough, because CSS property support is a minefield of special cases:

  • Complex table styles, especially tabular values for display

  • Fancy border-style values, such as groove

  • Applying and then removing display : none

  • Expecting font-family values to display identically across browsers

  • Expecting list-style-type icons to display identically across browsers

  • outline styles

  • padding styles (see the "Box model" section later in this hack)

  • Properties in CSS2 that aren't in CSS2.1

  • Complex style rule selectors that depend on two or more identifiers

  • Mozilla-specific style selectors, properties, and values prefixed with -moz.

In addition to these specific properties worth avoiding, there are three issues that affect stylesheets, layout, scripting, or a combination of all three.

5.4.2.1 Display contracts

In all cases, it is better for a web page to force the browser into Standards mode than to leave it in Quirks mode. The full range of modes is a complex issue even for Firefox alone [Hack #58] . This DOCTYPE is generally recommended:

<!DOCTYPE HTML PUBLIC
  "-//W3C//DTD HTML 4.01 Strict//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

For a tortuously near-complete discussion of display contracts, see the articles written for Inside Web Development (http://www.elementkjournals.com) by Nigel McFarlane. These articles predate Internet Explorer 6.0 Service Pack 2, which now supports the following content type, but they are otherwise accurate:

Content-Type: application/xhtml+xml

5.4.2.2 Viewport

Internet Explorer and other browsers don't agree on the reference point for the x- and y-coordinates of styled elements on a page. Peter-Paul Koch explains scripting solutions at http://www.quirksmode.org/viewport/compatibility.html

5.4.2.3 Box model

If your web page does not establish a strict mode display contract with the browser, Internet Explorer 6 will use an older, nonstandard box model that doesn't combine padding, margins, and borders properly. Use a strict mode, or read more about Tantek Çelik's original use of the exclusion technique that excludes older browsers at http://www.tantek.com/CSS/Examples/boxmodelhack.html

    Team LiB
    Previous Section Next Section