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

2. Agenda Cross-Browser Challenges Cross-Browser DOs Cross-Browser DON'Ts

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

4. Demo CSS3 Border Radius

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

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

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

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

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

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 10

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

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

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

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 15

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

17. Demo getElementById

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

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 19

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

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

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

23. 23 // Using Conditional Comments // Browser-specific code DON'T: Detect Specific Browsers

24. 24 //... but if you must, target legacy only // Legacy browser-specific code DON'T: Detect Specific Browsers

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 25

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

27. Why doesn't everyone do this already? Each solution is different Easier to think of browsers Single pivot tendency 27 …but remember the cost

28. DO: Feature detection beyond script

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

30. 30 Download Video DO: Feature Detection (in HTML)

31. 31 DO: Feature Detection (in HTML)

32. Demo SVG in HTML5

33. Call to Action Avoid Browser Detection Use Feature Detection 33

34. Recap Cross-Browser Challenges Cross-Browser DOs Cross-Browser DON'Ts More Info: http://api.jquery.com/jQuery.support/http://api.jquery.com/jQuery.support/

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