Share via

Use feature and behavior detection

  • Article

Windows Internet Explorer 9 reduces the impact of cross-browser differences and enables you to use the same markup across browsers. To use the same markup, each browser must support the right features to make the same HTML, JavaScript, and Cascading Style Sheets (CSS) code "just work," and you must properly detect and use those features when they're available. Rather than focus behavior specific to Internet Explorer 11 (or any other browser), you can use feature and behavior detection to write code that adapts reliably to cross-browser differences.

Here's a list of "dos" and "don'ts" for ensuring your webpages are compatible across browsers.

Do:

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.

Don't:

  • 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