Embed Size (px)
DESCRIPTION
Tips & tricks to make it easier to develop web pages that work in Internet Explorer - including references to Modern.IE and Compat Inspector
Citation preview
Platinum Sponsors
Gold Sponsors
Untying the Knots of Web Development with Internet Explorer
Sarah Dutkiewicz
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. 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.
ToolsMaking 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.
CSSConten
tJavaScript
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
DemoCompat 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 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
Compat Inspector with Fiddler
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)
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 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 2014Same Place, Same Time
