560 likes | 729 Views
Internet Explorer 9 & HTML5 for Web Developers. Gil Fink Senior Consultant & Architect http://www.gilfink.net. 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.
E N D
Internet Explorer 9 & HTML5 for Web Developers Gil FinkSenior Consultant & Architecthttp://www.gilfink.net
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
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
Agenda • 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
Agenda • Introduction • Focus on Sites • Same Mark-up • All Around Fast • Q&A • Summary
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 <[endif]-->
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 } else { // Code for other browsers }
Feature DetectionPerforming the mental shift // Feature Detection: Use this pattern if( window.addEventListener ) { // Code for browsers with addEventListener } else { // Code for browsers without addEventListener }
Feature DetectionWorking in markup <!-- Elements with fallback content --> <videosrc="test.video"> <objectsrc="test.video"> <ahref="test.video"> Download Video </a> </object> </video>
Feature DetectionWorking in CSS /* Unrecognized properties are ignored */ .target { 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
New & Updated DOM Enhancements Full DOM Level 2 and Level 3 Support including addEventListener • DOMContentLoaded DOM Range DOM Style 9 DOM Traversal DOM
New & Updated JavaScript APIs getElementsByClassName(class) getComputedStyle(element, pseudoElement) getSelection() 9 ECMAScript 5 Methods JavaScript APIs
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="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>
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
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");
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
Agenda • Introduction • Focus on Sites • Same Mark-up • All Around Fast • Q&A • Summary
The JavaScript Engine Foreground Source Code Parser AST ByteCode Interpreter
New JavaScript Engine – “Chakra” Foreground Source Code Parser AST ByteCode Interpreter Background Compiler Native Code Background 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); </script>