Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Untying the Knots of Web Dev with Internet Explorer

6,741 views

Published on

Tips & tricks to make it easier to develop web pages that work in Internet Explorer - including references to Modern.IE and Compat Inspector

Published in: Technology
  • Be the first to comment

Untying the Knots of Web Dev with Internet Explorer

  1. 1. Platinum Sponsors Gold Sponsors
  2. 2. Untying the Knots of Web Development with Internet Explorer Sarah Dutkiewicz sarah@cletechconsulting.com
  3. 3. Agenda • Identify problems • Come up with solutions or recommendations on how to move forward • Additional Resources
  4. 4. Oh, the Knots!
  5. 5. Random Spacing Issues • Phantom whitespace – spaces and lines (IE7 and IE8) • Why this is bad: Not easily traceable. Usually impacted layout quite noticeably, but only in Internet Explorer. • More on this problem: Commonly seen in Quirks mode.
  6. 6. Whitespace Issues - Explained • The height attribute tells IE that the DIV has a layout. • Because of the layout, the box gets a minimum height equal to the line-height. • With line-height not explicitly set, it defaults to the font-size for the box. • Internet Explorer gives HTML elements a layout flag that can be checked through the read-only hasLayout property. • Related Reading: hasLayout property (Internet Explorer)
  7. 7. Elements where hasLayout is true • Images • Tables – including rows and cells • Horizontal rule (hr) • Input elements • Marquee • Framesets & frames • Objects • Applets • Plugins
  8. 8. CSS Properties that Trigger hasLayout • display: inline-block • height & width • float: left & right • position: absolute • zoom • -ms-writing-mode: tb-rl
  9. 9. Workarounds for the layout bug • Find a way to get hasLayout computed to false – hard to do though because once IE sets this true, it can’t be changed back. • Try to avoid using elements or CSS properties that trigger hasLayout. • Set the line-height to 0.
  10. 10. IE Margins & Padding Issues • Why this is bad: Nobody chose to implement the standard the same way; Internet Explorer was the furthest away. • Internet Explorer interpreted the box model in its own way, causing margins and padding to display much differently.
  11. 11. Fixed: Internet Explorer Box Model Bug • Internet Explorer 6 introduced “standards-compliant” mode. • Internet Explorer for the Mac was not affected by this bug.
  12. 12. Quirks Mode Headaches • Allowed browsers to render HTML and CSS even if it didn’t conform to standards • Introduced all sorts of bugs • Allows us to recreate the IE box model bug • Images and other inline content vertically aligns differently • Font style inheritance in tables did not always happen • Solved by:  X-UA-Compatible  Proper DOCTYPE declaration
  13. 13. User Agent Sniffing • Using JavaScript to sniff the User Agent as browser detection • Why this is bad: Can easily be spoofed. Not always accurate.
  14. 14. Tools Making it easier to develop for Internet Explorer
  15. 15. Modern.IE • http://modern.ie • Code with Standards - http://www.modern.ie/en-us/cross-browser-best-practices • BrowserStack testing trial • Scan a Site • Virtualization – test versions of IE with pre-built VMs
  16. 16. Modern.IE – Cross Browser Best Practices • 20 tips for building modern sites while supporting old versions of IE by Dave Methvin (jQuery) and Rey Bango (Microsoft) • Words of Wisdom include…  Sites don’t need to render the same across all browsers.  Test in multiple browsers while developing. Consider using a tool such as BrowserStack.  Understand the backward-compatibility limits of HTML5 tags.  Fully prefix vendor-specific CSS properties to future-proof them.  Solve compatibility problems with valid CSS rules, not CSS parser hacks.  Delay-load non-essential JavaScript scripts.
  17. 17. Use a solid template as a base • HTML5 Boilerplate is an example where rules have been added to work across multiple browsers and downgrades gracefully for older browsers. Target stable standards • Experimental standards are just that – subject to change. • Stable standards = stable site = happier end users
  18. 18. Avoid Quirks Mode • Use a standard DOCTYPE. • When in doubt, use the simplest of <!DOCTYPE html>
  19. 19. Test in Multiple Browsers • Do this while developing to ensure cross- browser experiences. • BrowserStack can provide an environment for testing multiple browsers. See Modern.IE for the latest deals they may have with BrowserStack. • Take advantage of modern tooling in the browsers when debugging issues. • If working with older browsers, look for plugins for the modern tooling equivalent – such as Firebug for Firefox. • Good rule of thumb: current version and the most recent prior version
  20. 20. CSS on top, JavaScript on the bottom • CSS in the head of HTML to fetch as early as possible • JavaScript goes through the following browser cycle:  Retrieve the JavaScript file  Parse the JavaScript file  Execute the JavaScript file • Putting JavaScript at the bottom allows the page to be rendered and appear to be loaded before scripts are fully loaded. CSS Content JavaScript
  21. 21. CSS Tips • Avoid !important • Be familiar with the cascade rules  More than just class and id selectors  Understand relationship, tag, and attribute selectors • Avoid CSS hacks (such as the _ or the *tag IE hacks)  Use version-specific classes
  22. 22. Feature Detection, instead of Browser Detection • Just say NO to User Agent sniffing • Modernizr is recommended easiest way for feature detection.
  23. 23. Modern.IE - Virtualization • Virtual machines available with Internet Explorer on various operating systems, targeting various hypervisors • Hypervisor support includes:  VirtualBox for Linux  VirtualBox, VMWare Fusion, and Parallels for Mac  Hyper-V, Virtual PC, VirtualBox, VMWare Player for Windows • IE versions include:  IE6 on Windows XP  IE7 on Vista  IE8 on Windows XP or Windows 77  IE9 on Windows 7  IE10 on Windows 7 & Windows 8  IE11 Developer Preview on Windows 7 & Windows 8.1 • Related Resource: Rey Bango – Making Internet Explorer Testing Easier with new IE VMs
  24. 24. F12 Developer Tools • Internet Explorer’s built-in developer tools • New look-n-feel in Internet Explorer 11 Preview  Easier & faster workflow  UI Responsiveness tool  Screen & GPS emulation  Meaningful memory analysis  Timeline of overall usage  Orphaned elements where memory can be reclaimed
  25. 25. Compat Inspector • http://ie.microsoft.com/testdrive/HTML5/CompatInspector/ • JavaScript-based testing tool that analyzes a website. Identifies problems, and makes suggestions on how to improve your site. • Developed during IE9 • Designed to help migrate to IE9 and above • User Guide: http://ie.microsoft.com/testdrive/HTML5/CompatInspector/help/post.htm
  26. 26. Compat Inspector • Place the reference to its JavaScript file before any scripts you want to test. <script src=http://ie.microsoft.com/testdrive/HTML5/CompatInspector/inspector.js> </script> • Can also use Fiddler to inject Compat Inspector through a snippet in Fiddler Script
  27. 27. Demo Compat Inspector in Fiddler
  28. 28. Compat Inspector with Fiddler
  29. 29. Compat Inspector with Fiddler Related Resource: Use feature detection
  30. 30. Compat Inspector with Fiddler
  31. 31. Verifying Issues in Compat Inspector • Verifiers can emulate legacy behavior • Check the Verify box and then refresh the page. • Multiple issues can be verified at once.
  32. 32. Debugging Issues in Compat Inspector • Check the Debug checkbox. • Start up the F12 Developer Tools. • Switch to the Script tab. • Click “Start debugging”.
  33. 33. Out-of-date JavaScript Libraries • Detects the presence of common libraries and notes the versions in use • Provides the ability to verify functionality with the latest version of the detected library
  34. 34. Compat Inspector with Fiddler
  35. 35. Putting Tested Code Live • Remove Compat Inspector script reference before setting pages live. • Use Fiddler to avoid using the script reference in the code in the first place. • Compat Inspector is only meant for a dev environment.
  36. 36. Compat Guides • http://msdn.microsoft.com/library/ie/hh771831(vs.85)
  37. 37. Testing on BrowserStack.com
  38. 38. Testing on BrowserStack.com
  39. 39. Internet Explorer 10 Guide for Developers • http://msdn.microsoft.com/library/ie/hh673549.aspx  Compatibility  CSS  DOM  F12 Developer Tools  HTML5  IndexedDB  JavaScript  SVG  Performance  Windows 8 integration
  40. 40. Internet Explorer 10 Developer Guide • Topics include:  Compatibility Modes  Quirks Mode  CSS3 Exclusions  Debugging Web Workers in F12 Developer Tools  AppCache  Web Workers  IndexedDB  Filter effects for SVGs  Windows 8 integration
  41. 41. Internet Explorer 10 Developers Guide – Link Preview Example • Extends Windows 8 share experience • Requirements for a link preview:  Title for the webpage – no longer than 160 characters  Description – no longer than 160 characters  Thumbnail – URL no longer than 2048 characters <meta name=“title” content=“Cleveland Tech Events” /> or <title>Cleveland Tech Events</title> <meta name=“description” content=“What’s Happening in Cleveland’s tech community” /> <link rel=“image_src” href=“clevtechpreview.jpg” /> or <meta name=“image” content=“clevtechpreview.jpg” /> <meta name=“thumbnail” content=“clevtechthumb.jpg” /> or <meta property=“og:image” content=“clevtechthumb.jpg” />
  42. 42. WebPlatform.org • http://www.webplatform.org/ • Convened by W3C, community-driven site with the goal to be the authoritative source for web development documentation • Supporters include:  Adobe  Facebook  Google  HP  Intel  Microsoft  Nokia  Mozilla  Opera Software
  43. 43. WebPlatform.org - Tutorials • Tutorials for implementing web technology  Essentials  Testing  HTML  CSS  JavaScript  SVG • Tutorials on specific topics  Audio  Connectivity  Device access  Graphics (2D & 3D)  Mobile  Multimedia  Offline & Storage  Tools
  44. 44. WebPlatform.org - Documents • Documents include:  Beginners Guide  General Web Concepts  HTML  CSS  JavaScript  DOM  Accessibility  SVG  APIs
  45. 45. Additional Resources • Twitter: @IEDevChat • Internet Explorer Developer Guides • Internet Explorer Compatibility Cookbooks
  46. 46. August 11th – 13th 2014 Same Place, Same Time

×