Internet Explorer 9 & HTML5 for Web Developers

1. Internet Explorer 9 & HTML5 for Web Developers Gil FinkSenior Consultant & Architecthttp://www.gilfink.net

2. Agenda • Introduction • Focus on Sites • Same Mark-up • All Around Fast • Q&A • Summary

3. Web Browsing is Core to the Windows Experience ~60% of time on a PC is spent in the web browser

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

5. More Web Browser Choice than Ever

6. The Browser is the Theater, not the Play

7. A Glimpse to IE9

8. Agenda • Introduction • Focus on Sites • Same Mark-up • All Around Fast • Q&A • Summary

9. Focus on Site Your sites shine Seamless on Win 7 Smarter address bar Streamlined & quieted

10. Focus on Sites

11. Agenda • Introduction • Focus on Sites • Same Mark-up • All Around Fast • Q&A • Summary

12. Defining Same Mark-Up 9

13. 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?

14. 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 {}

15. Browser DetectionWhen is it safe to use? // Target legacy only <!--[if IE lte 7]> // Legacy browser-specific code <[endif]-->

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

17. Feature DetectionPerforming the mental shift // Browser Detection: AVOID THIS PATTERN if( navigator.userAgent.indexOf('MSIE') != -1 ) { // Code for Internet Explorer } else { // Code for other browsers }

18. Feature DetectionPerforming the mental shift // Feature Detection: Use this pattern if( window.addEventListener ) { // Code for browsers with addEventListener } else { // Code for browsers without addEventListener }

19. Feature DetectionWorking in markup <!-- Elements with fallback content --> <videosrc="test.video"> <objectsrc="test.video"> <ahref="test.video"> Download Video </a> </object> </video>

20. Feature DetectionWorking in CSS /* Unrecognized properties are ignored */ .target { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; }

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

22. Modernizr

23. Key Takeaways For Handling Cross-browser Differences

24. New & Updated DOM Enhancements Full DOM Level 2 and Level 3 Support including addEventListener • DOMContentLoaded DOM Range DOM Style 9 DOM Traversal DOM

25. New & Updated JavaScript APIs getElementsByClassName(class) getComputedStyle(element, pseudoElement) getSelection() 9 ECMAScript 5 Methods JavaScript APIs

26. Javascript Enhancements

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

28. 2D Vector Graphics <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /> </svg>

29. SVG

30. 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" />

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

32. CSS3 Enhancements

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

34. @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>

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

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

37. 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");

38. HTML5

39. IE9 Acid Compatibility Tests

40. 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 Tools

41. Developer Tools

42. Agenda • Introduction • Focus on Sites • Same Mark-up • All Around Fast • Q&A • Summary

43. Multi-System Performance

44. WebKitSunSpider JavaScript Benchmark Results

45. The JavaScript Engine Foreground Source Code Parser AST ByteCode Interpreter

46. New JavaScript Engine – “Chakra” Foreground Source Code Parser AST ByteCode Interpreter Background Compiler Native Code Background Compiled JavaScript In The Background Using Multiple Cores

47. 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); </script>

48. window.performance

49. The Gamers GPU

50. Everyone Has a GPU