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

New versions released frequently

Many different versions

Many different browsers

CSS3 2D Transforms

Demo

Categorizing features in the web platform

Same Markup

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

PAGE 7

W3C HTML5 Test Suite

Demo

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);}

W3C Event APIs

Presenter

Presenter Title

Demo

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 issuevar testPassed = runTest();

// Check if the test passedif(!testPassed){

// If not, apply a workaround}

getElementById

Demo

Code Path Comparison

= Detection Point = Alternate Code

Feature DetectionVersion Detection

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

= Detection Point = Alternate Code

Feature DetectionBrowser Detection

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

<!--[if IE]>

// Browser-specific code

<[endif]-->

Really?

PAGE 29

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

Feature Detection Beyond Script…

Do

DO: Feature Detection

.target{

border-radius: 20px;-moz-border-radius: 20px;-webkit-border-radius: 20px;

}

DO: Feature Detection

<!-- Elements with fallback content -->

<video src="test.mp4"><source src="test.ogg">

<a href="test.mp4">Download Video

</a></object>

</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

<!-- Generic element handling -->

<svg width="100" height="100"><circle fill="#090" cx="50" cy="50" r="50"/>

</svg>

SVG in HTML5

Demo

Helpful Libraries

Modernizr

PAGE 40

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!

PAGE 43

Fallback With <video>

<video src="video.mp4"><source src="video.ogv" /><source src="video.webm" /><object height="380"

type="application/x-silverlight-2" width="640"><param name="source" value="Resources/player.xap">

<param name="initParams" value="deferredLoad=true, duration=0, m=http://localhost/video.mp4, autostart=false, autohide=true, showembed=true, postid=0">

<param name="background" value="#00FFFFFF"></object>

</video>

There’s always an exception…

Conditional Comments

// Use only to isolate legacy code

<!--[if IE lte 7]>

// Legacy browser-specific code

<[endif]-->

X-UA-Compatible

<!DOCTYPE 4.01 … strict …><html>

<head><meta http-equiv="X-UA-Compatible"

content="IE=EmulateIE7;"> </head><body>

<h1>Hello Tel Aviv!</h1></body>

</html>

Internet Explorer 9 Document Mode

http://bit.ly/9ZjVhl

Testing Your Site

F12 Developer ToolsTesting from Internet Explorer 9 to 7

Browser Mode Changes the rendering

engine only

Document Mode Changes the rendering

engine and user agent

string

F12 Developer Tools

Demo

Expression Web Super Preview

PAGE 52

Virtualization

PAGE 53

http://bit.ly/bbcDa2

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

Thank you!

Questions

© 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 accuracy 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.