Cross Browser Best Practices Best practices for same markup Pete LePage, Sr. Product Manager, Microsoft Corp http://petelepage.com/blog/ | @petele

Agenda

Cross-Browser Challenges

Cross-Browser DOs

Cross-Browser DON'Ts

Cross-Browser Challenges Many different browsers Many different versions New versions released frequently

Demo CSS3 2D Transforms

Same Markup Categorizing features in the web platform

Interoperable & Stable • Supported in all the latest browsers; not likely to change in the future

Legacy • Replaced by interoperable features; May be removed in the future

New • Supported in some browsers; Inconsistent implementations

Defining Same Markup

Building A Test Suite

PAG

Demo W3C HTML5 Test Suite

What matters most is detection… If (condition) { // Primary code } else { // Alternate code }

First we had version detection… If (navigator.userAgent.indexOf('MSIE') != -1) { // Code written for browser X } else { // Code written for browser Y }

Then we had object detection… If (document.all) { // Code written for browser X } else { // Code written for browser Y }

Now we have feature detection… if (window.addEventListener) { // Code written for browsers // supporting addEventListener } else { // Code written for browsers that // don't support addEventListener }

Best Practices  DO:

 Feature Detection  Behavior Detection

 DON'T:

 Detect Specific Browsers  Assume Unrelated Features

 IMPACT: Reduced Maintenance Cost

DO: Feature Detection  Test for a feature before using it

 Key for newer features  Not as critical for well-established features

 Test for standards first

 Always use standards when supported  Avoid accidentally using legacy functionality

DO: Feature Detection

window.addEventListener("load", fn, false);

DO: Feature Detection if (window.addEventListener) { window.addEventListener("load", fn, false); }

DO: Feature Detection if (window.addEventListener) { window.addEventListener("load", fn, false); } else if (window.attachEvent) { window.attachEvent("onload", fn); }

Demo W3C Event APIs Presenter Presenter Title

DO: Behavior Detection  Problem

 A browser has a bug in a feature  Basic feature detection fails to identify the issue

 Solution

 Run a test to detect the broken behavior  Apply a workaround when the broken behavior is detected

DO: Behavior Detection // Run a test that targets a known issue var testPassed = runTest(); // Check if the test passed if(!testPassed) { // If not, apply a workaround }

Demo getElementById

Code Path Comparison Version Detection

= Detection Point

Feature Detection

= Alternate Code

DON'T: Detect Specific Browsers  "But I know this feature works in that browser!"  The feature may also work in other browsers  New browsers may add support for the feature

 "But I know this feature has a bug in that browser!"

 The same bug may also exist in other browsers  The bug may (or may not) be fixed in the next version

 Cost

 Risk of breaking when new browsers are released

Feature Detection vs. Browser Detection Browser Detection

= Detection Point

Feature Detection

= Alternate Code

DON'T: Detect Specific Browsers // Using the User Agent String if( navigator.userAgent.indexOf(x) != -1 ) { // Browser-specific code }

DON'T: Detect Specific Browsers // Using Objects if( document.all ) { // Browser-specific code }

DON'T: Detect Specific Browsers // Using Library-based Detection if( jQuery.browser.msie ) { // Browser-specific code }

DON'T: Detect Specific Browsers // Using Conditional Comments

Really?

PAG

DON'T: Assume Unrelated Features  "But I know all browsers with X also have Y!"  New browsers may have X and not Y

 Cost

 Risk of breaking when new browsers are released

DON'T: Assume Unrelated Features if( window.postMessage ) { …

window.addEventListener(); … }

Why doesn't everyone do this already?

Easier to think of browsers …but remember the cost

Do Feature Detection Beyond Script…

DO: Feature Detection .target { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;

}

DO: Feature Detection Download Video

DO: Feature Detection try { var v = document.createElement("video"); if (v && v.canPlayType && v.canPlayType("video/mp4"). match(/^(probably|maybe)$/i)) { // Browser can likely play MPEG-4 video } else { // Browser cannot play MPEG-4 video } } catch (e) { // Exception thown  }

DO: Feature Detection

Demo SVG in HTML5

Helpful Libraries

Modernizr

PAG

Modernizr with JavaScript if (Modernizr.localstorage) { // Yay – use local storage persistent } else { // Boo! Resort to cookies as best you can } if (Modernizr.svg) { // SVG is supported natively } else { // kick off flash fallback }

Modernizr with CSS .my_container { background-color: #ccc; color: #222; } .rgba .my_container { background-color: rgba(255,255,255, .5); }

Video For Everybody!

PAG

Fallback With

There’s always an exception…

Conditional Comments // Use only to isolate legacy code

X-UA-Compatible

Hello Tel Aviv!

Internet Explorer 9 Document Mode

http://bit.ly/9ZjVhl

Testing Your Site

F12 Developer Tools Testing from Internet Explorer 9 to 7

 Browser Mode

 Changes the rendering engine only

 Document Mode

 Changes the rendering engine and user agent string

Demo F12 Developer Tools

Expression Web Super Preview

PAG

Virtualization

http://bit.ly/bbcDa2

PAG

Summary

Recap

Cross-Browser Challenges

Cross-Browser DOs

Cross-Browser DON'Ts

Resources    

Internet Explorer 9 Cook Book Internet Explorer Compatibility Modes Explained Internet Explorer Developer Center PDC10: Best Practices for Building Cross-Browser Web Applications

 jQuery.support  Modernizr  Video For Everybody

Questions Thank you!

© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Internet Explorer and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accu racy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.