Internet explorer 9 html5 for web developers
1 / 56

Internet Explorer 9 & HTML5 for Web Developers - PowerPoint PPT Presentation

  • Uploaded on

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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about ' Internet Explorer 9 & HTML5 for Web Developers' - lel

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

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


  • Introduction

  • Focus on Sites

  • Same Mark-up

  • All Around Fast

  • Q&A

  • Summary

Focus on site
Focus on Site

Your sites shine

Seamless on Win 7

Smarter address bar

Streamlined & quieted


  • Introduction

  • Focus on Sites

  • Same Mark-up

  • All Around Fast

  • Q&A

  • Summary

Browser detection leaving the future to chance
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 detection it s more than navigator useragent
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 detection when is it safe to use
Browser DetectionWhen is it safe to use?

// Target legacy only

<!--[if IE lte 7]>

// Legacy browser-specific code


Feature detection what it is and how to use it
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 detection performing the mental shift
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 detection performing the mental shift1
Feature DetectionPerforming the mental shift

// Feature Detection: Use this pattern

if( window.addEventListener )


// Code for browsers with addEventListener




// Code for browsers without addEventListener


Feature detection working in markup
Feature DetectionWorking in markup

<!-- Elements with fallback content -->




Download Video




Feature detection working in css
Feature DetectionWorking in CSS

/* Unrecognized properties are ignored */



border-radius: 20px;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;


Feature detection with modernizr
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
Key Takeaways For Handling Cross-browser Differences

New updated dom enhancements
New & Updated DOM Enhancements

Full DOM Level 2 and Level 3 Support including


  • DOMContentLoaded

DOM Range

DOM Style


DOM Traversal


New updated javascript apis
New & Updated JavaScript APIs


getComputedStyle(element, pseudoElement)



ECMAScript 5 Methods

JavaScript APIs

Javascript enhancements
Javascript Enhancements

Scalable vector graphics
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
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
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 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

Html5 canvas
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
@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
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
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
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");

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



  • Introduction

  • Focus on Sites

  • Same Mark-up

  • All Around Fast

  • Q&A

  • Summary

Webkit sunspider javascript benchmark results
WebKitSunSpider JavaScript Benchmark Results

The javascript engine
The JavaScript Engine


Source Code





New javascript engine chakra
New JavaScript Engine – “Chakra”


Source Code





Background Compiler

Native Code


Compiled JavaScript

In The Background

Using Multiple Cores

Window performance

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


And the bottom line
And the Bottom Line…

  • Hardware acceleration through the GPU

Traditional browser approach to graphics
Traditional Browser Approach to Graphics







Ie9 hardware acceleration unleash the power of directx direct2d and directwrite
IE9 Hardware AccelerationUnleash the power of DirectX, Direct2D and DirectWrite.









PLEASEMigrate your applications off Internet Explorer 6

Download and install IE9

Thank you

Thank You

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