Your SlideShare is downloading. ×
0
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
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
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
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
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
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
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
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
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
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
Untying the Knots of Web Dev with Internet Explorer
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Untying the Knots of Web Dev with Internet Explorer

6,238

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

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
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
6,238
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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.
  • Transcript

    • 1. Platinum Sponsors Gold Sponsors
    • 2. Untying the Knots of Web Development with Internet Explorer Sarah Dutkiewicz sarah@cletechconsulting.com
    • 3. Agenda • Identify problems • Come up with solutions or recommendations on how to move forward • Additional Resources
    • 4. Oh, the Knots!
    • 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. 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. Elements where hasLayout is true • Images • Tables – including rows and cells • Horizontal rule (hr) • Input elements • Marquee • Framesets & frames • Objects • Applets • Plugins
    • 8. CSS Properties that Trigger hasLayout • display: inline-block • height & width • float: left & right • position: absolute • zoom • -ms-writing-mode: tb-rl
    • 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. 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. 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. 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. 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. Tools Making it easier to develop for Internet Explorer
    • 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. 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. 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. Avoid Quirks Mode • Use a standard DOCTYPE. • When in doubt, use the simplest of <!DOCTYPE html>
    • 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. 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. 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. Feature Detection, instead of Browser Detection • Just say NO to User Agent sniffing • Modernizr is recommended easiest way for feature detection.
    • 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. 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. 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. 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. Demo Compat Inspector in Fiddler
    • 28. Compat Inspector with Fiddler
    • 29. Compat Inspector with Fiddler Related Resource: Use feature detection
    • 30. Compat Inspector with Fiddler
    • 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. Debugging Issues in Compat Inspector • Check the Debug checkbox. • Start up the F12 Developer Tools. • Switch to the Script tab. • Click “Start debugging”.
    • 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. Compat Inspector with Fiddler
    • 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. Compat Guides • http://msdn.microsoft.com/library/ie/hh771831(vs.85)
    • 37. Testing on BrowserStack.com
    • 38. Testing on BrowserStack.com
    • 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. 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. 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. 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. 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. WebPlatform.org - Documents • Documents include:  Beginners Guide  General Web Concepts  HTML  CSS  JavaScript  DOM  Accessibility  SVG  APIs
    • 45. Additional Resources • Twitter: @IEDevChat • Internet Explorer Developer Guides • Internet Explorer Compatibility Cookbooks
    • 46. August 11th – 13th 2014 Same Place, Same Time

    ×