Best practices for building cross browser compatible web apps
Cross Browser Best Practices -...
Transcript of Cross Browser Best Practices -...
Cross Browser Best Practices
Best practices for same markup
Pete LePage, Sr. Product Manager, Microsoft Corp
http://petelepage.com/blog/ | @petele
Cross-Browser Challenges
New versions released frequently
Many different versions
Many different browsers
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
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
if (window.addEventListener){
window.addEventListener("load", fn, false);}else if (window.attachEvent){
window.attachEvent("onload", fn);}
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}
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 Library-based Detection
if( jQuery.browser.msie ){
// Browser-specific code}
DON'T: Detect Specific Browsers
// Using Conditional Comments
<!--[if IE]>
// Browser-specific code
<[endif]-->
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
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>
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);
}
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>
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
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
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
© 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.