IE10 PP4 Update

Reagan HwangMicrosoft 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 10 for 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

Recommendation ~ Candidate Recommendation

Working Draft

http://caniuse.com/

IE 의 HTML5 접근• 향후 변화될 가능성이 있는 경우 , 제대로

동작하는 웹사이트가 브라우저 지원 이슈로 문제가 생길 수 있다 .

• 새로운 기능을 도입할 때는 변화할 여지가 있는지 리스크를 판단하여 기능 제공을 검토 .

HTML5 LABShttp://html5labs.interoperabilitybridges.com/

IE10 PP4 Highlights

• Cross-Origin Resource Sharing (CORS) for safe use of XMLHttpRequest across domains.

• File API Writer support for blobBuilder allowing manipulation of large binary objects in script in the browser.

• Support for JavaScript typed arrays for efficient storage and manipulation of typed data.

• CSS user-select property to control how end-users select elements in a Web page or application.

• Support for HTML5 video text captioning, including time-code, placement, and captioning file formats.

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 d

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

CORS

Cross-Site Upload http://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)

BlobBuilderhttp://ie.microsoft.com/testdrive/HTML5/BlobBuilder/

Blob Usage

var bb = new BlobBuilder(); bb.append(csvContents); var blob = bb.getBlob(); var url = window.URL.createObjectURL(blob); // var url = window.webkitURL.createObjectURL(blob);

BlobBuilder API

Support for JavaScript typed arrays• for efficient storage and manipulation of typed data.• With HTML5 comes many APIs that push the envelope on user

experiences involving media and real-time communications. These features often rely on binary file formats, like MP3 audio, PNG images, or MP4 video.

• The use of binary file formats is important to these features to reduce bandwidth requirements, deliver expected performance, and interoperate with existing file formats.

• Typed Arrays, available in IE10 Platform Preview 4, enable Web applications to use a broad range of binary file formats and directly manipulate the binary contents of files already supported by the browser.

• Support for Typed Arrays has been added throughout IE10: in JavaScript, in XMLHttpRequest, in the File API, and in the Stream API.

• Typed Arrays(ecmascript)

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 number

Typed Arrays provide a means to look at raw binary contents of data through a particular typed view. For example, if we want to look at our raw binary data a byte at a time, we can use a Uint8Array (Uint8 describes an 8-bit unsigned integer value, commonly known as a byte). If we want to read the raw data as an array of floating point numbers, we can use a Float32Array (Float32 describes a 32-bit IEE754 floating point value, commonly known as a floating point number). The following types are supported:

Working with Binary Data using Typed Arrays

TypeArray Usage

Binary File Inspectorhttp://ie.microsoft.com/testdrive/HTML5/TypedArrays/

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 element's 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 for CSS3 module; this module has since been superseded by CSS3 Basic User Interface Module which does not define the user-select property. Both Mozilla and Webkit support their own prefixed versions of this property. There are minor differences between the three implementations so be sure to test your application across browsers.

vender prefix

• -ms-user-select:element;• -moz-user-select:text;• -webkit-user-select:text;

Support for HTML5 video text captioning

• including time-code, placement, and captioning file formats.

• caption track (w3c)

HTML5 Video Caption Usage

<video controls autoplay loop src='movie.mp4'><track kind='subtitles' srclang='en' label='English'src='captions.vtt' default ><track kind='subtitles' srclang='de' label='German' src='de-captions.vtt'>

</video>

Internet Explorer 10 supports TTML or WebVTT caption files:

Technical Resources

• http://www.ietestdrive.com• http://blogs.msdn.com/b/ie/• http://blogs.msdn.com/b/b8_ko/• http://www.buildwindows.com/• http://dev.windows.com