Use feature and behavior detection

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.

Related topics

"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

 

 

Show:
© 2014 Microsoft