3. Josh Holmes @joshholmes josh.holmes@microsoft.com http://www.joshholmes.com http://slideshare.net/joshholmes

7. Source: Ars Technica, NetMarketShare.com Internet Explorer 8 = 22% of Desktop Market Share

8. Legacy Compatibility Modern Compatibility modern web standards better performance improved security increased reliability older web apps existing investments

10.  Specify intended mode behavior in a site list  True/false “exclude” syntax allows fine-grained control msdn.microsoft.com bing.com images news.msn.com pop- culture timecard tar

12. Let’s play with the ingredients to a great web app…

13. Desktop Mobile Tablet Xbox

14. CSS 2D Transforms CSS 3D Transforms CSS Animations CSS Backgrounds & Borders CSS Border-Image CSS Color CSS Device Adaptation* CSS Device Fixed Position* CSS Flexbox CSS Fonts CSS Grid* CSS Image Values (Gradients) CSS Media Queries CSS Multi-Column Layout* CSS Namespaces CSS OM Views CSS Regions And Exclusions* CSS Selectors CSS Transitions CSS Values And Units Custom Data Attributes Data URI devicepixelratio DOM Element Traversal DOM Level 3 Core DOM Level 3 Events DOM Style DOM Traversal And Range DOMParser And XMLSerializer Dynamic TextTrack ECMAScript 5 ECMAScript 6 (partial) Encrypted Media Extensions* Enterprise Mode Internet Explorer HTML5 Application Cache HTML5 Async Scripts HTML5 BlobBuilder HTML5 Canvas HTML5 Canvas 2D HTML5 Device Orientation HTML5 Drag And Drop HTML5 Forms And Validation HTML5 Full Screen API* HTML5 Geolocation HTML5 History API HTML5 Parser HTML5 Sandbox HTML5 Screen Orientation* HTML5 Selection HTML5 Semantic Elements HTML5 Video And Audio JavaScript Typed Array ICC Color Profiles IndexedDB Input Method Editor API* Internationalization API Lazyload attribute Media Source Extensions MPEG-DASH Mutation Observers Page Visibility Pointer Events Prefetch Prerender RequestAnimationFrame Navigation Timing 2 Selectors API Level 2 SPDY/3 SVG Filter Effects SVG, Standalone And In HTML Tracking Preference Exp. TTML Simple Delivery Prof. WebCrypto API* WebGL Web Messaging Web Sockets Web Workers XHTML/XML XHR (Level 2) + CORS XHR Stream Control*

22. Paragraph 4 Paragraph 2 Paragraph 3 Paragraph 4. Paragraph 5 DIV#sampleContainer { overflow: hidden; column-width: 200px; column-rule-style: solid; }

23. @media (min-width:950px) {... }

25. CACHE MANIFEST # 2012-08-10 # Explicitly cached entries Default.html script.js style.css offline_Calculator.ico jquery-1.6.2.min.js

27. Server response: HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec- WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket- Protocol: chat Client request: GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec- WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 Origin: http://example.com

28. worker = new Worker("worker.js"); worker.onmessage = function (e) { if (e.data.id == -1) { // do something } updateProgress(); } worker.onerror = function (e) { /* Error handling code here */ } worker.postMessage(“Yo…");

30. window.addEventListener("deviceorientation", onDeviceOrientation, false); function onDeviceOrientation(event) { var alpha = 360 - event.alpha; var beta = event.beta - 90; var gamma = event.gamma; deviceNeckAngle = beta; deviceCompassHeading = alpha; render(); }

31. var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect(10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect(30, 30, 55, 50);

32. var gl; function start() { var canvas = document.getElementById("glcanvas"); gl = initWebGL(canvas); if (gl) { gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); }

42. http://userAgents.ie

43. http://www.flickr.com/photos/-bast-/349497988/ josh holmes joshholmes.com @joshholmes josh.holmes@microsoft.com