Untying the Knots of Web Dev with Internet Explorer

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

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.

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)

Elements where hasLayout is true
• Images
• Tables – including rows and cells
• Horizontal rule (hr)
• Input elements
• Marquee
• Framesets & frames
• Objects
• Applets
• Plugins

CSS Properties that Trigger
hasLayout
• display: inline-block
• height & width
• float: left & right
• position: absolute
• zoom
• -ms-writing-mode: tb-rl

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.

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.

Fixed: Internet Explorer Box Model
Bug
• Internet Explorer 6 introduced “standards-compliant” mode.
• Internet Explorer for the Mac was not affected by this bug.

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

User Agent Sniffing
• Using JavaScript to sniff the User Agent as browser
detection
• Why this is bad: Can easily be spoofed. Not always
accurate.

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
• BrowserStack testing trial
• Scan a Site
• Virtualization – test versions of IE with pre-built VMs

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.

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

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 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

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

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

Feature Detection, instead of Browser
Detection
• Just say NO to User Agent sniffing
• Modernizr is recommended easiest way for feature detection.

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

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

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

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

Demo
Compat Inspector in Fiddler

Compat Inspector with Fiddler
Related Resource: Use feature detection

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.

Debugging Issues in Compat Inspector
• Check the Debug checkbox.
• Start up the F12 Developer Tools.
• Switch to the Script tab.
• Click “Start debugging”.

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

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.

Compat Guides
• http://msdn.microsoft.com/library/ie/hh771831(vs.85)

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

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

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” />

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

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

WebPlatform.org - Documents
• Documents include:
 Beginners Guide
 General Web Concepts
 HTML
 CSS
 JavaScript
 DOM
 Accessibility
 SVG
 APIs

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (8)

Ähnlich wie Untying the Knots of Web Dev with Internet Explorer

Ähnlich wie Untying the Knots of Web Dev with Internet Explorer (20)

Mehr von Sarah Dutkiewicz

Mehr von Sarah Dutkiewicz (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Untying the Knots of Web Dev with Internet Explorer

Hinweis der Redaktion