/pl.gif){kind=small}
Technogrette
|
Andrey Lechev
Document type: Rendering modes 24 December 2005 |
|
Now that we have figured out that document type declaration determines the way a page is displayed (See Document type: To declare or not to declare?) lets speak about how it works.
To begin with, declarations may vary depending on the type of the document. The examples shown below involve two HTML types.
The first example is for ‘almost standards’ mode in Mozilla and Safari:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
The second is for standards mode in all browsers:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">
In compatibility mode for older browsers <!DOCTYPE> is never at all used. It’s worth mentioning that different modes switch on irrespective of the HTML validity.
Differences in displaying objectsIt’s important to keep in mind that the older browsers that are still popular (such as Internet Explorer 5.0 or 5.5) do not enable standards mode and display pages in compatibility mode. If your script is standard-compliant, you should expect these browsers to display the objects wrong.
Block sizesBlock width is content width plus inner and outer spacing value plus padding width (the same applies to the height). In standards mode CSS property width (height) defines width (height) value only for the content leaving out spacing and padding. In compatibility mode in Internet Explorer and Opera these properties define width (height) of the block including spacing and padding.
Such difference fairly often causes websites to appear distorted with extra padding when viewed using Mozilla or Safari.
How it looks in the browser
Since the time of Netscape Navigator 2.0 font size for tables is not inherited, i.e. if font size for a table is given as relative value (for example, in percentage), it is not calculated with respect to the parent object’s font size, but is based on default font size set for the whole document. And according to standards font size for tables is calculated as a percent of the font size of the parent object.
If new browsers display smaller size font for each nested table while in IE5 it looks fine, then you know it’s the case!
How it looks in the browser
Image is a row-based object. If an image is incorporated into text, it sits on the so-called baseline which is above the bottom line of the row.
Older browsers would display an independent image along the bottom line (many websites employed this principle —they used tables with images placed in separate cells).
The standards require that images are aligned with the baseline of the text and have some space underneath.
How it looks in the browser
If an object is the first or the last in the document or in a table cell and has default outer spacing (before and after), older browsers ignore them (except when they are defined through CSS). In standards mode spacing is always displayed, which makes text look odd in some browsers (except for Internet Explorer).
How it looks in the browser
Before, there was an unspoken rule that unspecified units in CSS scripts were understood as pixels (except for font size value). But today, according to standards, values without units are ignored in the layout.
So, the rule is simple: Always specify units of measurement (even if it’s px)!
How it looks in the browser
If you want to learn about other types (for instance, XHTML or frames), see Henri Sivonen’s useful table that tells what types of documents trigger different rendering modes.
There is another list of types at mozilla.org. I haven’t seen any official Safari documents in this respect, but bloggers often mention that the trigger code was borrowed from Gecko, so using Mozilla documentation is fine.
Opera documentation contains a table of DOCTYPEs with brief comments on changes.
And even Microsoft Developers Network has an article providing information on Internet Explorer switches.
And another thing to mention is that to trigger compatibility mode for older MSIE XML document should start with XML declaration instead of <!DOCTYPE>:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
A piece of advice |
Even if you use valid XHTML, do not put XML declaration at the beginning of a file. Besides, XHTML specification does not require that. |
