Developing With Standards
Introduction
When switching from table-based markup and learning about semantic markup and using CSS for layout and presentation it can be extremely confusing and frustrating. There are some basic tips and tricks that will help when making the switch. This article will discuss a few tips and tricks which will help you get started.
Avoid Quirks Mode
Browsers have two different rendering modes; standards and quirks mode. Browsers in standards mode expect the markup being used to be valid and treat it strictly. In quirks mode the browser expects incorrect markup and tries to fix it before presenting it to the viewer. Different browsers treat quirks mode and malformed HTML differently. Forcing a browser into quirks mode improves its rendering of the site and importantly how it applies CSS rules.
There are numerous ways to change the rendering mode of a page. Use a strict HTML 4 doctype or
any XHTML doctype without the
XML declaration. The following examples will cause browsers to render in standards mode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The doctype must be the first element on a page for IE to render in standards mode.
Level The Playing Field
There are many different default browser styles for elements including body and p. To avoid differences
between browsers you can apply an extremely simple CSS rule. The following rule block
removes all padding and margin from all elements.
* {
padding: 0;
margin: 0;
}
You may wish to add vertical margins back in as a default behaviour for all paragraphs. This is done with the following code:
p {
margin: 1em 0;
}
Develop To Standards With Standards
It is good practice to develop in a browser which strictly adheres to the W3C's standards. I recommend using Firefox to test pages firstly. Secondly check the browser in the market dominant Internet Explorer. Because you've used a compliant browser, if you find any differences you know that the problem lies with IE's rendering. However, there are hundreds of well documented solutions and work-arounds for IE quirks.
Further Reading & Resources
Below are resources I used for this article and would be interesting further reading on the subject.
- Developing With Web Standards
-
This document explains how and why using web standards will let you build websites in a way that saves time and money for the developer and provides a better experience for the visitor. Also discussed are other methods, guidelines and best practices that will help produce high-quality websites that are accessible to as many as possible.
http://www.456bereastreet.com/lab/developing_with_web_standards/
- How to Develop with CSS
-
This document assumes you know the basics about CSS1 (what a selector is, what a compound selector is versus a descendant selector, how values inherit, etc.), and provides a series of guidelines to help you develop with CSS properly.
- 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.
- Fix Your Site With the Right
DOCTYPE! -
This little article will provide you with
DOCTYPEs that work, and explain the practical, real–world effect of these seemingly abstract tags.
- Activating the Right Layout Mode Using the Doctype Declaration
-
In the following table, Quirks Mode, Standards Mode and Almost Standards Mode are denoted by Q, S and A, respectively. When a browser only has two modes, the Standards Mode is marked as "S", if the line height in table cells works as in Mozilla's Standards Mode, and as "A", if the line height in table cells works as in Mozilla's Almost Standards Mode.