Golden rules for browser interoperability

If you are creating webpages and you want them to display properly on different webbrowsers, that is, browsers other than your personal favourite, keep these rules in mind.

  1. Don't have errors.
    Different browsers handle errors differently. Therefore, if your document contains errors, you can be sure it will not look the same when viewed with a different browser.
    The W3 validator is free, you don't have to install software on your computer to use it and it's always available. There is no excuse not to run your source through it.
    I'm not saying that being error-free guarantees that your site will look good everywhere, but it's a start.
  2. Don't use quirks mode.
    Different browsers have different quirks, so, again, with quirks mode on, your document will most likely not look the same to other people.
  3. Make sure your character encoding is set right.
    If you don't have a character set defined at all, the browser will have to guess. And you can be sure that some browser out there will guess differently than the browser you're testing on! So don't make them guess; specify a charset in the HTTP header, or as a http-equiv meta element, or as an encoding attribute in the XML declaration, or as a BOM at the beginning of your document.
    Or (not recommended), two or more of the above, but then you must make sure they don't conflict!
  4. Don't use browser-specific features.
    Examples are the keygen element, the -moz-border-top-colors property, the selectable attribute, the document.all collection, etc. The W3 validator will tell you which features are browser-specific. An exception seems to be the marquee element, with is supported on all major browsers, at least partially.
  5. Don't rely too much on default settings.
    Different browsers have different defaults. What may be the default for one browser may not be the same on another. For instance, if you want to change the margins and/or paddings on a list, don't just test it on one browser and assume that other browsers will look the same. Put all your desired margins and paddings explicitly in your stylesheet, just in case.
  6. And I don't understand why this rule is necessary, but I do still see it violated in the wild: Don't use code that tests if the browser is Netscape 4 or Internet Explorer 4. This code was meant for previous century browsers and is no longer valid. These days, we have Firefox, Opera, Safari, Chrome, each of which is more prevalent than Netscape 4 and Internet Explorer 4 together!