Untying the Knots of Web Dev with Internet Explorer

6,711 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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,711
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Title slide for anyone looking to use this years logo.
  • Please take a brief opportunity and thank our platinum and gold sponsors. They have invested a lot of time and money into making That Conference the success it is.
  • Image taken from: http://en.wikipedia.org/wiki/File:W3C_and_Internet_Explorer_box_models.svg
  • At the end of your presentation we would be grateful if you could help us announce next years date.
  • 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

    ×