CSS Browser Compatibility Tricks 4

******************************************
Quirks mode and strict mode
===========================

Quirks mode and strict mode are the two ’modes’ modern browsers can use to interpret your CSS. This page gives a short overview of the reasons for and the differences between these two modes.

The problem
-----------
When Netscape 4 and IE 4 implemented CSS, their support did not match the W3C standard (or, indeed, each other). Netscape 4 had horribly broken support. IE 4 came far closer to the standard, but didn’t implement it with complete correctness either. Although IE 5 Windows mended quite a lot of IE 4 bugs, it perpetuated other glitches in CSS (mainly the box model).

To make sure that their websites rendered correctly in the various browsers, web developers had to implement CSS according to the wishes of these browsers. Thus, most websites used CSS in ways that didn’t quite match the specifications.

The solution
------------
All browsers needed two modes: quirks mode for the old rules, strict mode for the standard. IE Mac was the first browser to implement the two modes, and IE Windows 6, Mozilla, Safari, and Opera followed suit. IE 5 Windows, as well as older browsers like Netscape 4, are permanently locked in quirks mode.

Choosing which mode to use requires a trigger, and this trigger was found in ’doctype switching’. According to the standards, any (X)HTML document should have a doctype which tells the world at large which flavour of (X)HTML the document is using.

* Old pages written before (or in spite of) the standardization wave don’t have a doctype. Therefore ’no doctype’ would mean quirks mode: show according to old rules.

* The mere presence of the doctype tag is enough to trigger strict mode.

Complication: almost strict mode
--------------------------------
In the early days, experiments with strict mode invariably raised the comment that images suddenly got an odd bottom margin that couldn’t be removed. The cause was that in strict mode <img /> is an inline element, which means that some space should be reserved for possible descender characters like g, j, or q. Of course an image doesn’t have descender characters, so the space was never used, but it still had to be reserved.

The solution was to explicitly declare images block level elements: img {display: block}.

IE Windows special: the xml prolog
----------------------------------
In IE 6 Windows, Microsoft implemented one extra rule: if a doctype that triggers strict mode is preceded by an xml prolog, the page shows in quirks mode. This was done to allow web developers to achieve valid pages (which require a doctype) but nonetheless stay in quirks mode.

This is the xml prolog. You should put it on the very first line of your document, before the doctype.

<?xml version="1.0" encoding="iso-8859-1"?>

Note that this behaviour has been removed from IE 7

******************************************

CSS Hacks
=========
There are an incredible number of CSS hacks available that are said to make sure that certain styles are or aren't parsed by certain browsers. In general I strongly feel you shouldn't use them. See my Keep CSS simple column for the complete argument against browser hacks.

The safe list
-------------
Below I started a list of safe hacks, that is, a list of hacks that are extremely unlikely to misfire in the future.

1. The @import hack against Netscape 4. This browser is extremely dead by now.
Any style sheet you import is not parsed by Netscape 4. Hence you should move all declarations that don't work in Netscape 4 to this style sheet.

@import('notForNetscape4.css');

Netscape 4 will not read the CSS in the notForNetscape4.css file.

2. The commented backslash hack (original) against Explorer 5 Mac. This browser, too, is dead.
The commented backslash hack works as follows:

selector {
property: value for Explorer 5 Mac
}

/*
First comment. Explorer 5 Mac
misses the end-of-comment
because of the backslash
\*/

selector {
property: value for all other browsers
}

/*
Second comment. Explorer 5 Mac
sees the end of this
comment as the end of
the previous one
*/

3. Conditional comments, aimed at Explorer Windows only.


******************************************

Conditional comments
====================
Conditional comments only work in Explorer on Windows, and are thus excellently suited to give special instructions meant only for Explorer on Windows. They are supported from Explorer 5 onwards, and it is even possible to distinguish between 5.0, 5.5 and 6.0.

Conditional comments work as follows:

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

1. Their basic structure is the same as an HTML comment (<!-- -->). Therefore all other browsers will see them as normal comments and will ignore them entirely.

2. Explorer Windows, though, has been programmed to recognize the special <!--[if IE]> syntax, resolves the if and parses the content of the conditional comment as if it were normal page content.

3. Since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files. I'd have preferred to put the special styles in the CSS file, but that's impossible. You can also put an entire new <link> tag in the conditional comment referring to an extra style sheet.

Exaples
-------
<p><!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->
</p>

Note the special syntax:

* gt: greater than
* lte: less than or equal to


Since conditional comments are not based on a browser hack but on a deliberate feature I believe they are safe to use.

******************************************
Avoid the unnecessary ?xml prolog
=================================
If you include the ?xml prolog:

<?xml version="1.0"?>

then IE6/Windows uses the quirky box model,so remove it.

******************************************


******************************************