1 / 37

Cross-Browser Best Practices

Cross-Browser Best Practices. Tony Ross Program Manager Internet Explorer tross@microsoft.com. Agenda. Cross-Browser Challenges. Demo. CSS3 Border Radius. What matters most is detection…. if ( condition ) { // Primary code } else { // Alternate code }.

hoshi
Download Presentation

Cross-Browser Best Practices

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cross-Browser Best Practices Tony Ross Program Manager Internet Explorer tross@microsoft.com

  2. Agenda

  3. Cross-Browser Challenges

  4. Demo CSS3 Border Radius

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

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

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

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

  9. Best Practices • DO: • Feature Detection • Behavior Detection • DON'T: • Detect Specific Browsers • Assume Unrelated Features • IMPACT: Reduced Maintenance Cost

  10. 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

  11. DO: Feature Detection window.addEventListener("load", fn, false);

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

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

  14. Demo W3C Event APIs

  15. 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

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

  17. Demo getElementById

  18. Code Path Comparison Version Detection Feature Detection = Alternate Code = Detection Point

  19. 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

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

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

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

  23. DON'T: Detect Specific Browsers // Using Conditional Comments <!--[if IE]> // Browser-specific code <[endif]-->

  24. DON'T: Detect Specific Browsers // ... but if you must, target legacy only <!--[if IE lte 7]> // Legacy browser-specific code <[endif]-->

  25. 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

  26. DON'T: Assume Unrelated Features if( window.postMessage ) { … window.addEventListener(); … }

  27. Why doesn't everyone do this already? …but remember the cost

  28. DO: Feature detection beyond script

  29. DO: Feature Detection(in CSS) .target { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; }

  30. DO: Feature Detection(in HTML) <!-- Elements with fallback content --> <videosrc="test.vid"> <objectsrc="test.vid"> <ahref="test.vid"> Download Video </a> </object> </video>

  31. DO: Feature Detection(in HTML) <!-- Generic element handling --> <svgwidth="100"height="100"> <circlefill="#090"cx="50"cy="50"r="50"/> </svg>

  32. Demo SVG in HTML5

  33. Call to Action

  34. Recap

  35. Download the Internet Explorer 9 Platform preview www.IETestDrive.com Meet the team in the Internet Explorer Lounge located in The Commons! Keep up on the latest http://blogs.msdn.com/ie

  36. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

More Related