Use feature and behavior detection
Here's a list of "dos" and "don'ts" for ensuring your webpages are compatible across browsers.
Use the following detection methods to detect the source of errors more reliably and to make sure that your webpages are compatible across browsers:
- Feature detection: Test whether a browser supports a feature before you use it. Feature detection enables cross-browser code to "just work" without requiring you to know the capabilities of every browser ahead of time. For example, the jQuery framework relies almost entirely on feature detection. For more info about how you can use jQuery's feature detection in your own site, see the jQuery.support documentation.
- Behavior detection: Test for known issues before you apply a workaround. jQuery also uses behavior detection by running tests for known issues to determine if certain workarounds are needed.
- Detect specific browsers: Don't use the identity of a browser (for example, navigator.userAgent) to change a page's behavior. If you change code based on a specific browser, the page cannot easily adapt to changes and it might break when a new browser is released. In other situations, pages use a legacy workaround even when that workaround is no longer needed.
- Assume unrelated features: Don't perform feature detection for one feature and then use a different feature. Sites that have this problem perform feature detection for one feature and then use other features without testing whether they are supported.
- "Same Markup: Writing Cross-Browser Code"
- IE9 and same markup: A look at DOM events in IE9
- IE9 and same markup: A look at CSS3 borders and corners in IE9
- HTML5: Cross-Browser Best Practices
- jQuery.support documentation
- Same Markup: Explaining "@_jscript_version" and Styling New HTML5 Elements