Firefox Hacks [Electronic resources] نسخه متنی

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 */
/* 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/compatibilityl

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/boxmodelhackl