Platinum Sponsors
Gold Sponsors
Untying the Knots
of Web Development
with Internet Explorer
Sarah Dutkiewicz
sarah@cletechconsulting.com
Agenda
• Identify problems
• Come up with solutions or recommendations on how to move forward
• Additional Resources
Oh, the Knots!
Random Spacing Issues
• Phantom whitespace –
spaces and lines (IE7
and IE8)
• Why this is bad: Not
easily traceable.
Usual...
Whitespace Issues - Explained
• The height attribute tells IE that the DIV has a layout.
• Because of the layout, the box ...
Elements where hasLayout is true
• Images
• Tables – including rows and cells
• Horizontal rule (hr)
• Input elements
• Ma...
CSS Properties that Trigger
hasLayout
• display: inline-block
• height & width
• float: left & right
• position: absolute
...
Workarounds for the layout bug
• Find a way to get hasLayout computed to false – hard to do though because
once IE sets th...
IE Margins & Padding Issues
• Why this is bad: Nobody chose to implement the standard the same way;
Internet Explorer was ...
Fixed: Internet Explorer Box Model
Bug
• Internet Explorer 6 introduced “standards-compliant” mode.
• Internet Explorer fo...
Quirks Mode Headaches
• Allowed browsers to render HTML and CSS even if it didn’t conform to
standards
• Introduced all so...
User Agent Sniffing
• Using JavaScript to sniff the User Agent as browser
detection
• Why this is bad: Can easily be spoof...
Tools
Making it easier to develop for Internet Explorer
Modern.IE
• http://modern.ie
• Code with Standards - http://www.modern.ie/en-us/cross-browser-best-practices
• BrowserStac...
Modern.IE – Cross Browser Best
Practices
• 20 tips for building modern sites while supporting old versions of IE by Dave
M...
Use a solid template as a base
• HTML5 Boilerplate is an example where rules have been added to work across
multiple brows...
Avoid Quirks Mode
• Use a standard DOCTYPE.
• When in doubt, use the simplest of
<!DOCTYPE html>
Test in Multiple Browsers
• Do this while developing to ensure cross-
browser experiences.
• BrowserStack can provide an e...
CSS on top, JavaScript on the bottom
• CSS in the head of HTML to fetch as
early as possible
• JavaScript goes through the...
CSS Tips
• Avoid !important
• Be familiar with the cascade rules
 More than just class and id selectors
 Understand rela...
Feature Detection, instead of Browser
Detection
• Just say NO to User Agent sniffing
• Modernizr is recommended easiest wa...
Modern.IE - Virtualization
• Virtual machines available with Internet Explorer on various operating systems,
targeting var...
F12 Developer Tools
• Internet Explorer’s built-in developer tools
• New look-n-feel in Internet Explorer 11 Preview
 Eas...
Compat Inspector
• http://ie.microsoft.com/testdrive/HTML5/CompatInspector/
• JavaScript-based testing tool that analyzes ...
Compat Inspector
• Place the reference to its JavaScript file before any scripts you want to test.
<script src=http://ie.m...
Demo
Compat Inspector in Fiddler
Compat Inspector with Fiddler
Compat Inspector with Fiddler
Related Resource: Use feature detection
Compat Inspector with Fiddler
Verifying Issues in Compat Inspector
• Verifiers can emulate legacy behavior
• Check the Verify box and then refresh the p...
Debugging Issues in Compat Inspector
• Check the Debug checkbox.
• Start up the F12 Developer Tools.
• Switch to the Scrip...
Out-of-date JavaScript Libraries
• Detects the presence of common libraries and notes the versions in use
• Provides the a...
Compat Inspector with Fiddler
Putting Tested Code Live
• Remove Compat Inspector script reference before setting pages live.
• Use Fiddler to avoid usin...
Compat Guides
• http://msdn.microsoft.com/library/ie/hh771831(vs.85)
Testing on BrowserStack.com
Testing on BrowserStack.com
Internet Explorer 10 Guide for
Developers
• http://msdn.microsoft.com/library/ie/hh673549.aspx
 Compatibility
 CSS
 DOM...
Internet Explorer 10 Developer Guide
• Topics include:
 Compatibility Modes
 Quirks Mode
 CSS3 Exclusions
 Debugging W...
Internet Explorer 10 Developers Guide
– Link Preview Example
• Extends Windows 8 share experience
• Requirements for a lin...
WebPlatform.org
• http://www.webplatform.org/
• Convened by W3C, community-driven site with the goal to be the authoritati...
WebPlatform.org - Tutorials
• Tutorials for implementing web technology
 Essentials
 Testing
 HTML
 CSS
 JavaScript
...
WebPlatform.org - Documents
• Documents include:
 Beginners Guide
 General Web Concepts
 HTML
 CSS
 JavaScript
 DOM
...
Additional Resources
• Twitter: @IEDevChat
• Internet Explorer Developer Guides
• Internet Explorer Compatibility Cookbooks
August 11th – 13th 2014
Same Place, Same Time
Untying the Knots of Web Dev with Internet Explorer
Untying the Knots of Web Dev with Internet Explorer
Untying the Knots of Web Dev with Internet Explorer
Untying the Knots of Web Dev with Internet Explorer
Untying the Knots of Web Dev with Internet Explorer
Upcoming SlideShare
Loading in...5
×

Untying the Knots of Web Dev with Internet Explorer

6,276

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,276
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×