IE10 PP4 update for W3C HTML5 KIGPresentation Transcript
IE10 PP4 Update Reagan Hwang Microsoft Korea
Windows Internet Explorer 10 Guide for Developers• Internet Explorer 10 Guide for Developers http://msdn.microsoft.com/library/hh673549.aspx• Revision History http://msdn.microsoft.com/ko- kr/library/hh673560.aspx
April 12, 2011: Created for IE10 Platform Preview for MIX• Flexbox Layout• Grid Alignment• CSS3 Multi-column• CSS3 Gradients (on background images)• ES5 strict mode• Compatibility View List• User-agent string• How to send feedback
June 29, 2011: Updated for IE10 Platform Preview 2• Positioned Floats• CSS3 Gradients (on all image types)• CSS style sheet limit lifted• CSSOM Floating Point Value support• Improved hit testing APIs• Media Query Listeners• HTML5: – Support for async attribute on script elements – Drag and Drop – File API – Sandbox – Web Workers• Web Performance APIs: – requestAnimationFrame – Page Visibility API – setImmediate
September 13, 2011: Updated for Internet Explorer 10for Windows Developer Preview and BUILD Conference• CSS Regions• CSS3: – 3D Transforms – Animations – Panning and Zooming – Transitions – Text (text-shadow property and hyphenation)• Pointer and gesture DOM events• Improved F12 support: – Web workers – Multiple script sources• HTML5: – Application Cache ("AppCache") – Progress and Range controls – History – Spellcheck• Web Sockets• Indexed Database ("IndexedDB")• SVG Filter Effects• Navigation Timing
November 29, 2011: Updated for Internet Explorer 10 Platform Preview Build 4• CSS3: – Positioned Floats renamed to Exclusions and examples added – Sample images and pages added to Flexbox – Added new repeating syntax for Grid• HTML5: – Video: Respecting recorded video orientation – File API improvements – Web Worker Thread Pooling• DOM: – XMLHttpRequest improvements – CORS
IEBlog / IE10 PP4 Articles• HTML5 for Applications: The Fourth IE10 Platform Preview• Working with Binary Data using Typed Arrays• Moving to Standards-based Web Graphics in IE10• Media Capture API: Helping Web developers directly import image, video, and sound data into Web apps• Interoperable HTML5 Quirks Mode in IE10
Cross-Origin Resource Sharing (CORS) for XMLHttpRequest• Internet Explorer 10 adds support for Cross-Origin Resource Sharing (CORS) with respect to the XMLHttpRequest (XHR) object.• CORS uses HTTP headers to enable cross-domain web requests that are normally restricted by the same-site origin policy.• When a webpage makes an XHR request, Internet Explorer sends an origin header to the target server; the header contains the protocol scheme of the request (either http:// or https://) and the hostname for the webpage making the request. If the target server approves the request, it returns an Access-Control-Allow-Origin header and the request is allowed to proceed.• Cross-Origin Resource Sharing (w3c)• cross origin resource sharing (wikipedia)• Cross-Origin Resource Sharing (CORS) for XMLHttpRequest (msdn)• Hands On: Cross-Site Upload (demo)• http://enable-cors.org/ (usage)
Cross-Site Uploadhttp://ie.microsoft.com/testdrive/html5/corsupload/The following platform features introduced in IE10 are combined to complete this scenario:• CORS for XMLHttpRequest• Progress Events• Progress Control• File API
File API Writer support for blobBuilder• allowing manipulation of large binary objects in script in the browser.• BlobBuilder (w3c)
Blob Usagevar bb = new BlobBuilder();bb.append(csvContents);var blob = bb.getBlob();var url = window.URL.createObjectURL(blob);// var url = window.webkitURL.createObjectURL(blob);
types are supportedTyped Arrays provide a means to look at raw binary contents of data through a particular typed view. For example, if we want tolook at our raw binary data a byte at a time, we can use a Uint8Array (Uint8 describes an 8-bit unsigned integer value, commonlyknown as a byte). If we want to read the raw data as an array of floating point numbers, we can use a Float32Array (Float32describes a 32-bit IEE754 floating point value, commonly known as a floating point number). The following types are supported:Array Type Element size and descriptionInt8Array 8-bit signed integerUint8Array 8-bit unsigned integerInt16Array 16-bit signed integerUint16Array 16-bit unsigned integerInt23Array 32-bit signed integerUint32Array 32-bit unsigned integerFloat32Array 32-bit IEEE754 floating point numberFloat64Array 64-bit IEEE754 floating point numberWorking with Binary Data using Typed Arrays
CSS user-select property• to control how end-users select elements in a Web page or application. -ms-user-select: none -ms-user-select:none will block selection from starting on that element. It will not block an existing selection from entering the element. -ms-user-select: element -ms-user-select:element enables selection to start within the element, however, the selection will be contained by the bounds of that element. -ms-user-select: text -ms-user-select:text enables selection to start within the element and extend past the elements bounds.
User-Selecthttp://ie.microsoft.com/testdrive/HTML5/msUserSelect/Interop Notesuser-select is not currently part of any W3C CSS specification. It was originally proposed in the User Interface forCSS3 module; this module has since been superseded by CSS3 Basic User Interface Module which does not definethe user-select property. Both Mozilla and Webkit support their own prefixed versions of this property. There areminor differences between the three implementations so be sure to test your application across browsers.