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.
- 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.
- 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.
- 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 BOM at the beginning of your document, or
(for HTML files) in a meta element, or (for XHTML files) as an encoding attribute in the XML declaration.
Or (not recommended), two or more of the above, but then you must make sure they don't conflict!
- 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, if not fully.
- 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.
- 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, Edge, Safari and Chrome, each of which is more prevalent than
Netscape 4 and Internet Explorer 4 together!