Browser Compatibility: A simple guide

Web standards have given us conformity — a platform to build sites that work across a variety of different media and platforms. Unfortunately, some browsers interpret these standards differently, so here’s a few simple guidelines to minimise those problems.

Document Type Declaration

Document Type Declarations (Doctype) are a key element in creating valid web-based documents. Their sole purpose is to tell the browser which language specification the document is using—so it can be parsed and validated accordingly. Always make sure you use a doctype, or you will find it very difficult to gain consistency across browsers. And, your pages will never validate.

I would recommend one of the following doctypes

I tend to use XHTML Strict, although a full description of each can be found on the W3C site. If you know HTML but are unfirmiliar with XHTML, you may find it helpful to read Differences Between XHTML And HTML.

Important: Nothing should ever precede a doctype declaration. The only exception to this rule is the XML declaration for the XHTML doctype.

<?xml version="1.0" encoding="UTF-8"?>

Since XHTML documents are XML-based, this declaration defines the XML version and the character encoding used within the page. Unfortunately, even this will break Internet Explorer for Windows—which triggers ´quirks´ mode and the old implementation of the box model. If you are unfamiliar with IE´s flawed Box Model interpretation, I strongly suggest you read Box Model Hack.

For browser consistency, I advise against using the XML declaration, although you should include page encoding as follows:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Reset and Rewind

One of the biggest problems for causing inconsistent rendering, are the default values that are set for some HTML tags. Paragraphs (p), lists (ol, ul, dl) and headings (h1—h6) all come with pre-defined values that differ between browsers. To avoid any potential inconsistencies, you should always reset them first and then adjust them to your taste. This way, you know all browsers are using exactly the same values. I have developed a reset stylesheet, which I use in all my sites and you may use too.

Design for all, hack for IE!

Although Internet Explorer is the world's most popular browser for browsing, it is also the ´quirkiest´ when it comes to rendering web pages. Internet Explorer has bugs, lots and lots of them. Fortunately, most of them have been very well documented over at Position Is Everything.

My advice is to design using a good standards compliant browser.

By designing with one of the above, you will find good consistency across the others, as there are very few bugs and variations between them (most recent versions). If your site then breaks in IE, you know it's a bug, and you can employ the correct hack or tweak to fix it. For testing purposes, I suggest you download as many browsers for your platform as you can.

Note: If you didn't already know, it is possible to download and run multiple versions if IE on the same machine, which is extremely handy for testing.

Write semantic code

Writing semantic code means writing HTML in the most descriptive way possible. This means using the HTML tags that are available to you and using them wisely. A paragraph of text should be marked up using a p tag, just as titles should always use one of the available heading tags h1-h6. Unfortunately, HTML isn't as comprehensive as we would probably like, so sometimes you will have to improvise. Think about what you are writing and use tags wisely. Don't use needless div tags and endless classes of redundant styling. The code might validate, but it takes away the beauty of designing with standards in the first place: to produce accessible, compatible and lightweight code.