Internet explorer 9 html5 for web developers
Sponsored Links
This presentation is the property of its rightful owner.
1 / 56

Internet Explorer 9 & HTML5 for Web Developers PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

Internet Explorer 9 & HTML5 for Web Developers. Gil Fink Senior Consultant & Architect Agenda. Introduction Focus on Sites Same Mark-up All Around Fast Q&A Summary. Web Browsing is Core to the Windows Experience. ~60% of time on a PC is spent in the web browser.

Download Presentation

Internet Explorer 9 & HTML5 for Web Developers

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript

Internet Explorer 9 & HTML5 for Web Developers

Gil FinkSenior Consultant & Architect


  • Introduction

  • Focus on Sites

  • Same Mark-up

  • All Around Fast

  • Q&A

  • Summary

Web Browsing is Core to the Windows Experience

~60% of time on a PC is spent in the web browser

The Expectations from the Web are Rising

  • The capabilities of the web are increasing every day, but the way we experience the web isn’t keeping up

More Web Browser Choice than Ever

The Browser is the Theater, not the Play

A Glimpse to IE9


  • Introduction

  • Focus on Sites

  • Same Mark-up

  • All Around Fast

  • Q&A

  • Summary

Focus on Site

Your sites shine

Seamless on Win 7

Smarter address bar

Streamlined & quieted

Focus on Sites


  • Introduction

  • Focus on Sites

  • Same Mark-up

  • All Around Fast

  • Q&A

  • Summary

Defining Same Mark-Up


Browser DetectionLeaving the Future to Chance

  • Makes dozens of assumptions under a single check

    • A single broken assumption can break a site

  • Browser detection should generally be avoided

    • Safe only if you already know what the future holds

    • Use only for code that can be written: "if(version < n)"

  • Most important question:

    • Do I know what the next version will look like?

Browser DetectionIt's more than navigator.userAgent

// Conditional Comments

<!--[if IE]><![endif]-->

// Unique Objects

if(document.all) …

if(window.attachEvent) …

if(window.ActiveXObject) …

// Unique Behaviors (CSS Hacks, etc.)

* html {}

Browser DetectionWhen is it safe to use?

// Target legacy only

<!--[if IE lte 7]>

// Legacy browser-specific code


Feature DetectionWhat it is and how to use it

  • Check for the feature you want to use

    • Look for a specific object, method, property, or behavior

  • Detect standards first

    • Browsers often support both standards and legacy

  • Only target related features in a single check

    • E.g. postMessage does not imply addEventListener

Feature DetectionPerforming the mental shift

// Browser Detection: AVOID THIS PATTERN

if( navigator.userAgent.indexOf('MSIE') != -1 )


// Code for Internet Explorer




// Code for other browsers


Feature DetectionPerforming the mental shift

// Feature Detection: Use this pattern

if( window.addEventListener )


// Code for browsers with addEventListener




// Code for browsers without addEventListener


Feature DetectionWorking in markup

<!-- Elements with fallback content -->




Download Video




Feature DetectionWorking in CSS

/* Unrecognized properties are ignored */



border-radius: 20px;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;


Feature Detection with Modernizr

  • Small JavaScript library

  • Detects availability of HTML5 and CSS3 specifications

  • Tells you whether a feature natively implemented in the browser

  • Uses feature detection


Key Takeaways For Handling Cross-browser Differences

New & Updated DOM Enhancements

Full DOM Level 2 and Level 3 Support including


  • DOMContentLoaded

DOM Range

DOM Style


DOM Traversal


New & Updated JavaScript APIs


getComputedStyle(element, pseudoElement)



ECMAScript 5 Methods

JavaScript APIs

Javascript Enhancements

Scalable Vector Graphics

  • Create and draw 2D vector graphics using XML

    • Vector images are composed of shapes instead of pixels

    • Based on the SVG 1.1 2nd Edition Full specification

  • Support for:

    • Full DOM access to SVG elements

    • Document structure, scripting, styling, paths, shapes, colors, transforms, gradients, patterns, masking, clipping, markers, linking and views

2D Vector Graphics

<svg width="400" height="200" xmlns="">

<rect fill="red" x="20" y="20" width="100" height="75" />

<rect fill="blue" x="50" y="50" width="100" height="75" />



CSS3 Media Queries

<link href="DoNotDisplay.css" rel="stylesheet" media="screen and (max-width:1199px)" type=“ text/css" />

<link href="DoNotDisplay.css" rel="stylesheet"media="screen and (min-width:1301px)" type="text/css" />

<link href="Presentation.css" rel="stylesheet" media="screen and (min-width:1200px) and (max- width: 1300px)" type="text/css" />

CSS3 Colors & Opacity

  • CSS3 Color

    • Alpha color with rgba() and hsla() color functions

    • Transparency control with the opacity property

  • CSS3 Backgrounds and Borders

    • Round corners with the border-radius property

    • Multiple background images per element

    • box-shadow property on block elements

CSS3 Enhancements

HTML5 Canvas

  • A block element that allows developers to draw 2d graphics using JavaScript

    • Methods for drawing include: paths, boxes, circles, text and rasterized images

  • <canvas id="myCanvas" width="200" height="200">

  • Your browser doesn’t support Canvas, sorry.

  • </canvas>

  • <script type="text/javascript">

  • var example = document.getElementById("myCanvas");

  • var context = example.getContext("2d");

  • context.fillStyle = "rgb(255,0,0)";

  • context.fillRect(30, 30, 50, 50);

  • </script>

@font-face & WOFF Fonts

  • No longer limited to the “web safe” font list!

  • Web Open Font Format allows you to package and deliver fonts as needed, per site

    • Designed for web use with the @font-face declaration

    • A simple repackaging of OpenType or TrueType font data

    • From the W3C Fonts Working Group

  • <style type="text/css">

  • @font-face {

  • font-family:MyFontName;

  • src: url('FontFile.woff');

  • }

  • </style>

  • <div style="font: 24pt MyFontName, sans-serif;">

  • This will render using MyFontName in FontFile.woff

  • </div>

HTML5 <video>

  • Support for the HTML5 <video> element

    • Industry-standard MPEG-4/H.264 video

    • Video can be composited with anything else on the page

      • HTML content, images, SVG graphics

      • Hardware accelerated, GPU-based decoding

  • <video src="video.mp4" id="videoTag" width="640px" height="360px">

  • <!-- Only shown when browser doesn’t support video -->

  • <!-- You Could Embed Flash or Silverlight Video Here -->

  • </video>

HTML5 <audio>

  • Support for the HTML5 <audio> element

    • Industry-standard MP3 and AAC audio

    • Fully scriptable via the DOM

  • <audio src="audio.mp3" id="audioTag" autoplay controls>

  • <!-- Only shown when browser doesn’t support audio -->

  • <!-- You could embed Flash or Silverlight audio here -->

  • </audio>

Web Storage

  • Replacement for Cookies

  • sessionStorage

    • Data is accessible to any page from the same site opened in that window

  • localStorage

    • Data spans multiple windows and lasts beyond the current session

  • localStorage.key = "value";

  • varval = localStorage.key;

  • localStorage.setItem("key", "value);

  • varval = localStorage.getItem("key");


IE9 Acid Compatibility Tests

Developer Tools

A built in, visual interface to the Document Object Model

Fast experimentation

New for Internet Explorer 9

  • Network inspection

  • JavaScript profiling

  • UA String Picker

  • Console Tab

  • SVG Support


Developer Tools


  • Introduction

  • Focus on Sites

  • Same Mark-up

  • All Around Fast

  • Q&A

  • Summary

Multi-System Performance

WebKitSunSpider JavaScript Benchmark Results

The JavaScript Engine


Source Code





New JavaScript Engine – “Chakra”


Source Code





Background Compiler

Native Code


Compiled JavaScript

In The Background

Using Multiple Cores


A new set of Performance Metrics integrated at the DOMBrowser interoperable way to measure performance

<script type="text/javascript">

var w = window;

varnavStart= w.performance.timing.navigationStart+ "ms";

varnavStartTime = Date(w.performance.timing.navigationStart);



The Gamers GPU

Everyone Has a GPU

And the Bottom Line…

  • Hardware acceleration through the GPU

Traditional Browser Approach to Graphics







IE9 Hardware AccelerationUnleash the power of DirectX, Direct2D and DirectWrite.









PLEASEMigrate your applications off Internet Explorer 6

Download and install IE9

Thank You

Gil FinkSenior Consultant & Architect [email protected]://

  • Login