IE10 PP4 update

1. IE10 PP4 Update
Reagan Hwang
Microsoft Korea

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

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

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

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

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

7. Recommendation ~ Candidate Recommendation
Working Draft
http://caniuse.com/

8. IE의 HTML5 접근
• 향후 변화될 가능성이 있는 경우, 제대로
동작하는 웹사이트가 브라우저 지원 이슈로
문제가 생길 수 있다.
• 새로운 기능을 도입할 때는 변화할 여지가
있는지 리스크를 판단하여 기능 제공을
검토.

9. HTML5 LABS
http://html5labs.interoperabilitybridges.com/

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

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

12. 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)

13. CORS

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

15. File API Writer support for blobBuilder
• allowing manipulation of large binary objects
in script in the browser.
• BlobBuilder (w3c)

16. BlobBuilder
http://ie.microsoft.com/testdrive/HTML5/BlobBuilder/

17. 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);

18. BlobBuilder API

19. 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)

20. types are supported
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:
Array Type Element size and description
Int8Array 8-bit signed integer
Uint8Array 8-bit unsigned integer
Int16Array 16-bit signed integer
Uint16Array 16-bit unsigned integer
Int23Array 32-bit signed integer
Uint32Array 32-bit unsigned integer
Float32Array 32-bit IEEE754 floating point number
Float64Array 64-bit IEEE754 floating point number
Working with Binary Data using Typed Arrays

21. TypeArray Usage

22. Binary File Inspector
http://ie.microsoft.com/testdrive/HTML5/TypedArrays/

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

24. User-Select
http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
Interop Notes
user-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.

25. vender prefix
• -ms-user-select:element;
• -moz-user-select:text;
• -webkit-user-select:text;

26. Support for HTML5 video text
captioning
• including time-code, placement, and
captioning file formats.
• caption track (w3c)

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

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