9. 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.
10. 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)
11. Elements where hasLayout is true
• Images
• Tables – including rows and cells
• Horizontal rule (hr)
• Input elements
• Marquee
• Framesets & frames
• Objects
• Applets
• Plugins
12. CSS Properties that Trigger
hasLayout
• display: inline-block
• height & width
• float: left & right
• position: absolute
• zoom
• -ms-writing-mode: tb-rl
13. 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.
14. 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.
15.
16. Fixed: Internet Explorer Box Model
Bug
• Internet Explorer 6 introduced “standards-compliant” mode.
• Internet Explorer for the Mac was not affected by this bug.
17. 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
18. User Agent Sniffing
• Using JavaScript to sniff the User Agent as browser
detection
• Why this is bad: Can easily be spoofed. Not always
accurate.
20. 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
21. 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.
22. 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
23. Avoid Quirks Mode
• Use a standard DOCTYPE.
• When in doubt, use the simplest of
<!DOCTYPE html>
24. 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
25. 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
26. 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
27. Feature Detection, instead of Browser
Detection
• Just say NO to User Agent sniffing
• Modernizr is recommended easiest way for feature detection.
28. 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
29. 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
30. 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
31. 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
36. 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.
37. Debugging Issues in Compat Inspector
• Check the Debug checkbox.
• Start up the F12 Developer Tools.
• Switch to the Script tab.
• Click “Start debugging”.
38. 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
40. 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.
44. 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
45. 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
46. 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” />
47. 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
48. 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
49. WebPlatform.org - Documents
• Documents include:
Beginners Guide
General Web Concepts
HTML
CSS
JavaScript
DOM
Accessibility
SVG
APIs
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.