What are the best practices for cross-browser web sites?

Question

(I'd like this to be the definitive community wiki. I seeded it from my own answer to this question.)

Specify Everything

A lot of cross-browser issues amount to this: you didn't specify something, and different browsers make different assumptions. Therefore:

Declare a valid doctype

Your doctype tells the browser what rules you'll be using in your code. If you don't specify, the browser has to guess, and different browsers will guess differently.

In my experience, a "strict" doctype makes IE behave better (enables things like CSS :hover selectors on divs in IE7).

This article gives good background on doctypes.

Use Web standards

Avoid browser-specific markup, or only use it when its failure in other browsers won't be significant to the site experience.

Validate your HTML and CSS

You don't have to get everything perfect, but validation is good feedback. As Jeff said:

Knowing the rules and boundaries helps you define what you're doing, and gives you legitimate ammunition for agreeing or disagreeing. You can make an informed choice, instead of a random "I just do this and it works" one.

Imagine you opened a paragraph tag and never closed it. If you then open a list tag, did you mean it to be inside the paragraph or not? Validating will help you catch that, close the tag, and eliminate ambiguity.

Consider a CSS Reset

Different browsers assume different baseline CSS rules. You can help them all to act the same by explicitly ironing out the differences up front. Eric Meyer, who wrote CSS: The Definitive Guide, uses this reset. Another popular choice is YUI Reset CSS.

Test in multiple browsers, deal with IE last

Test in multiple browsers as you go. Generally, you'll find that non-IE browsers behave similarly and IE is a special case - especially if you follow the advice above. When necessary, you can add IE hacks in a separate stylesheet and only load it for IE users.

Quirksmode.com is a good place for hunting down random browser differences.

Browsershots.org can help show how your page will be displayed in an assortment of browsers and operating systems.

Fail Gracefully

No site will look perfect in every browser that exists. If a user doesn't have Flash, or Javascript, or advanced CSS, etc, you want your site to be usable anyway. Design with that in mind:

Check the bare HTML

Try loading your site with bare HTML - no styles, no scripts. Are menu options available? Does primary content precede secondary content? Is the site usable, even if ugly?

Consider test-driven progressive enhancement

Described in this article, this technique uses javascript to check if a browser has a given capability, such as support for a given CSS property, before using it on the page. It is unlike browser sniffing because it tests for features rather than a specific browser.

Answer 1

Use a library like jQuery abstract away the differences in the DOM, AJAX and JavaScript.

Answer 2

Consider mobile devices.

Answer 3

Use Firebug in Firefox for:

• Debugging/stepping through your JS.
• Seeing how your stylesheets are being interpreted and hacking them up on the fly to see how to fix your problem.
• See how many calls you are making for remote resources and how long they take.
• Profile your code.

Chrome and IE8 have similar tools built-in that can be used for the same thing.

Opera and Safari (and IE) have Firebug Lite.

Answer 4

Consider programming you web-site's UI using Google Web Toolkit. With GWT you write all code in Java programming language which GWT then cross-compiles into optimized JavaScript that automatically works across all major browsers.

Answer 5

Make sure you're keeping HTML, CSS and Javascript in separate files as much a possible. Mixing structure, presentation and behavior in your HTML file just makes finding and fixing problems harder.

Answer 6

My #1 rule is use a strict doctype. HTML or XHTML is fine, but using the strict doctype removes pretty much every browser quirk there is, especially in IE7+.

Imagine you opened a paragraph tag and never closed it. If you then open a list tag, did you mean it to be inside the paragraph or not?

Actually you can't put any other block tags inside a <p> tag, that's why the spec allows you to omit the closing tag. If you start a list without closing a paragraph, then the paragraph is implicitly closed. And the validator won't complain.

That's not to say you shouldn't close tags, because it generally makes code easier to skim (you don't need to remember the above rules).