Internet Explorer 9
for Developers
Sascha P. Corti
Developer Evangelist, Microsoft Switzerland
sascha.corti@microsoft.com | blog | twitter
Introducing Internet Explorer 9
IE9: Two Flavors
Platform Preview
Frequent Releases (8 weeks)
Side-by-Side installation
Only Chakra & Trident
Release Candidate
Full Browser Chrome
No Side-by-Side
Site Mode & Developer Tools
Minimal Browser Chrome
Smart Bar & Add-Ons
Download Manager
demo
IE9 Features
Same Mark-Up
Defining Same Mark-Up
9
http://ie.microsoft.com/testdrive/HTML5/BorderRadius/Default.html
Performance
Web Site Performance
“Chakra” JavaScript Engine
JSZap: CompressingJavaScript Source Code
Foreground (UI Thread)
Source
Code
Parser
ByteCode
Generator
Interpreter
Core #1
Background Thread
Machine
Instructions
Exec Loop
Background
Compiler
Native
Code
Core #2
12
PDC 2010 Sessions:
Unlocking JavaScript Opportunity with Internet Explorer 9
Inside Internet Explorer Performance
window.msPerformance
New set of Performance Metrics integrated at DOM
Working with W3C group to Standardize
window.msPerformance window.performance
<script type="text/javascript">
var w = window;
var navStart = w.msPerformance.timing.navigationStart + "ms";
var navStartTime = Date(w.msPerformance.timing.navigationStart);
</script>
demo
IE9 Performance
IE9 Fishtank
Joy defines the Future
window.msPerformance
Internet Explorer 9
Developer Tools
demo
IE9 Developer Tools
Browser- vs. Feature-Detection
Browser Detection
Feature Detection
Browser- vs. Feature-Detection
Adapting to Changing Browser Configurations
Browser Detection
= Detection Point
Feature Detection
= Alternate Code
Browser- vs. Feature-Detection
Interaction with well known Browser Configurations
Browser Detection
= Detection Point
Feature Detection
= Alternate Code
Browser- vs. Feature-Detection
Interaction with changing Browser Configurations
Browser Detection
= Detection Point
Feature Detection
= Alternate Code
Browser Detection
Avoid These…
Safer to use...
// Conditional Comments
<!--[if IE]><![endif]-->
// Target legacy only
<!--[if IE lte 7 ]>
// Unique Objects
if(document.all) …
if(window.attachEvent) …
if(window.ActiveXObject) …
// Legacy browser-specific
code
<[endif]-->
// Unique Behaviors (CSS
Hacks, etc.)
* html {}
Feature Detection
New Paradigm…
// Feature Detection:
// Use this pattern
if( window.addEventListener )
{
// Code for browsers with
// addEventListener
}
else
{
// Code for browsers w/o
// addEventListener
}
How Modernizr detects
<canvas> Support…
// As written in Modernizr
tests[canvas] = function() {
return
!!doc.createElement(
canvas ).getContext;
};
// Equivalent "if" statement
if(document.createElement(
"canvas").getContext) {
// Code for browsers with
<canvas> support
}
Feature Detection
Working in Markup…
Working in CSS...
<!-- Elements with fallback
content -->
/* Unrecognized properties
are ignored */
<video src="test.video">
<object src="test.video">
<a href="test.video">
Download Video
</a>
</object>
</video>
.target
{
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius:
20px;
}
demo
Browser Detection
X-UA-Compatible
Gives Developers Control
Developers can implement on a Page-Level (Meta Tag) or
Site-Level (Custom Http Header)
Enabling X-UA-Compatible hides Compatibility View Button
Content Value
Description
IE=5
IE=7
IE=EmulateIE7
“Quirks” mode
IE7 Standards mode
Display Standards DOCTYPES in IE7 Standards mode;
Display Quirks DOCTYPES in Quirks mode
IE8 Standards mode
Display Standards DOCTYPEs in IE8 Standards mode;
Display Quirks DOCTYPEs in Quirks mode
IE9 Standards mode
Display Standards DOCTYPES in IE9 Standards mode;
Display quirks DOCTYPES in Quirks mode
Display in latest mode; In the IE9 release, this is
equivalent to IE=9
IE=8
IE=EmulateIE8
IE=9
IE=EmulateIE9
IE=Edge
How Do I Enable the X-UA-Compatible Tag?
On a Per-Site basis, add the custom HTTP Header.
X-UA-Compatible: IE=EmulateIE7
On a Per-Page basis, add a Meta Tag to each Document, in the <head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Web.Config File (ASP .NET App)
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=EmulateIE7">
</customHeaders>
</httpProtocol>
<system.webServer>
</configuration>
“Pinned Site” Mode
IE9 “Pinned Site”
Brand Browser in your Site’s
Colors & Logo
Disable 3rd Party Add-Ons
Integrate in Windows 7 Taskbar
Add custom Menus
Show Dynamic Overlay Icons
High Resolution Icon
Uses the existing, standards based site favicon
<link rel="shortcut icon"
type="image/x-icon" href="./favicon.ico">
Best Practice:
Icon file should contain
Recommended: 16x16, 32x32, 48x48
Optimal: 16x16, 24x24, 32x32, 64x64
Use GZIP Compression
Online Icon Editor
http://xiconeditor.com
Customizing Site Mode
Edit Appearance
<meta
<meta
<meta
<meta
<meta
name="application-name" content=“Facebook"/>
name="msapplication-tooltip" content=“Start in Site Mode"/>
name="msapplication-starturl" content="http://host/page.htm"/>
name="msapplication-window" content="width=1024;height=768"/>
name="msapplication-navbutton-color" content="#3A579A"/>
Add Jump List
<meta name="msapplication-task"
content="name=News;
action-uri=http://host/News.htm;
icon-uri=http://host/news.ico"/>
<meta name="msapplication-task"
content="name=Messages;
action-uri=http://host2/Messages.htm;
icon-uri=http://host2/Messages.ico"/>
Programmatic Pinning
var _ie9 = navigator.userAgent.indexOf("MSIE 9.0")>0;
if(_ie9){
try {
if (!window.external.msIsSiteMode()) {
var _div = document.getElementById('pinMe');
var _img = document.createElement('img');
_img.setAttribute('src', './images/pinme.png');
_img.setAttribute('onclick',
'window.external.msAddSiteMode();');
_div.appendChild(_img);
}
}
catch(e) { }
}
Customizing Site Mode – Part 2
Customize Jump Lists
<script type="text/javascript">
...
window.external.msSiteModeCreateJumplist('Notifications');
window.external.msSiteModeAddJumpListItem(
'Scrum (37 minutes overdue)',
'http://host/reminders.html',
'http://host/images/bell.ico');
window.external.msSiteModeShowJumpList();
...
</script>
Add Icon Overlays
<script type="text/javascript">
...
window.external.msSiteModeSetIconOverlay(
'http://host/star.ico', 'Notification');
...
window.external.msSiteModeClearIconOverlay();
...
</script>
Display Thumbbar Buttons
<script type="text/javascript">
...
var but1 = window.external.msSiteModeAddThumbBarButton(
'http://host/speaker.ico', 'Mute');
document.addEventListener('msthumbnailclick', handler, false);
window.external.msSiteModeShowThumbBar();
...
window.external.msSiteModeUpdateThumbBarButton(buttonID,
Enabled, Visible)
var style1 = window.external.msSiteModeAddButtonStyle(
buttonID, IconUrl, ToolTip)
window.external.msSiteModeShowButtonStyle(
buttonID, styleID);
...
</script>
Resources
HTML5 and Site Mode Demos
http://www.beautyoftheweb.com
IE9 Site Mode Developer Guide
http://msdn.microsoft.com/library/gg131029(VS.85).aspx
IE9 HTML5 Developer Guide
http://msdn.microsoft.com/en-us/ie/ff468705.aspx
IE9 Testdrive
http://www.ietestdrive.com
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market
conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
