PDC10: Best Practices for Building Cross-Browser Web Applications

  • Article

 

Presenter: Tony Ross, Program Manager

Presentation

Note: the session PPT has good notes on each slide.

  • Goal:
    • empower you to build robust sites capable of surviving on the constantly-changing web platform
  • Topics
    • Same Markup
    • Browser Detection
    • Feature Detection
  • Same Markup Demo
    • SVG-oids, runs on other browsers
    • you can see the code, and there’s no specific browser checks
  • Improvements in IE9
    • Focus on interoperable implementation of standards
      • HTML5, CSS3, SVG, DOM L2 and L3, and more…
    • Working with the W3C to build test suites (where there are areas of inconsistency)
      • Helps browsers converge
  • Categorizing features in web platform
    • Interoperable / Stable
      • Supported in ALL the latest browsers. Not likely to change in the future
    • Legacy
      • Replaced by interoperable features. Maybe be removed in future.
    • New
      • supported in some browsers; inconsistent implementations
  • Demo (08:00)
    • a localhost travel site
    • Running on multiple browsers
    • Experiences issue on IE and FF
    • Uses IE Developer tools to find issue with opacity
  • Leaving the future to chance
    • Lumps dozens of assumption under a single check
      • a single broken assumption can break a site
    • Browser detection should generally be avoided
      • Safe only if you already know what the future holds
      • Use only for code that can be written: “if(version < n)”
    • Most important question:
      • do I know what the next version will look like?
  • It’s more than navigator.userAgent (11:55)
    • several detection practices today
      • conditional comments
      • Unique Objects
      • Unique Behaviors (CSS Hacks, etc.)
  • When is it safe to use?
    • Target legacy only
      • <!—if IE lte 7]>
      • //legacy browser-specific code
      • <[endif]>
  • Interaction with well-known browser configurations
  • Thinking about changes in the platform (14:54)
    • A browser addds a standardized featured used in my site
      • Will my code start to use it for the best experience?
      • Ex. choosing between SVG and VML
    • A browser removes a legacy features
      • will my code stop trying to use it?
      • ex. moz-opacity in Firefox
    • A browser fixes a bug my site works around
      • Will my code stop applying the workaround?
  • Keeping Track of changing browser configurations
    • Even if you update your site frequently
    • Many different browsers
      • IE, FF, Chrome, Safari, Opera, etc.
      • Multiple versions of each in the wild
      • New versions released constantly
    • Full-time job keeping track of what’s changed
      • plus the cost of finding and fixing broken assumptions
  • Demo: Feature Detection (17:04)
    • shows code of detecting different browsers
    • shows a better way to do this, by asking browser if it supports a specific feature
      • if(window.addEventListerner)
        • window.addEventListener(….
  • Feature Detection
    • Check for the feature you want to use
      • Look for a specfic object, method, property, or behavior
    • Detect standards first
      • Browsers often support both standards and legacy
    • Only target related features in a single check
      • e.g. postMessage does not impley addEventListener
  • Performing the Mental Shift (19:40)
    • Think less of where you code is running
    • Think more about WHY you need certain code to run
  • How Modernizr detects <canvas> support
  • Feature Detection works in Markup
    • Elements with fallback content
    • shows example of HTML5 video tag with fallback to <object> and <a>
  • Feature Detection in CSS
    • unrecognized properties are ignored
  • Handling Implementation-specific bugs
    • Try avoiding the bug
    • use behavior detection or “bug detection”
    • Two-step process
      • run a small test affected by the bug
      • apply a workaround if the test fails
  • How jQuery detects getElementById bugs (24:40)
    • shows their code on how they do behavior detection for IE7 bug
  • Demo – shows his earlier web site, and applies feature detection
  • When You’re Short On Time
    • when you conclude that browser detection is easier but don’t have time to figure out how to apply
    • THEN, use a framework
    • Note, frameworks make mistakes too, but hopefully you just need to update to the latest version
  • For handling cross-browser differences
    • Same markup
      • seek out code that “just works” cross browser
    • Browser detection
      • use only when the future is certain; use feature detection when in doubt
    • Feature detection
      • use to target the latest browsers; Test for standards first