IEBlog

CORS for XHR in IE10

2012-02-10T00:08:17Z

The fourth platform of IE10 simplifies building cross-site scenarios that work consistently across browsers by supporting Cross-Origin Resource Sharing (CORS) for XMLHttpRequest (XHR). CORS for XHR makes sharing data across sites simple and flexible. In the most basic scenario CORS enables creating data sources accessible from any site, and with a few small tweaks you can choose to constrain allowed sites, support data modification, and even allow authentication. Most importantly CORS keeps existing sites secure by requiring server participation.

Simple Cross-Origin XHR

Let’s look at how a cross-origin XHR request compares to a same-origin request. From script, the only difference is the URL passed to the open method. For example, say we’re working on a script that fetches a list of photo albums.

Traditional XHR


// Script running on http://photos.contoso.com
var xhr = new XMLHttpRequest();
xhr.onerror = _handleError;
xhr.onload = _handleLoad;
xhr.open("GET", "/albums", true);
xhr.send();

Now we want to access the list of albums from another origin. The other origin can be a completely different domain or a different host with the same base domain. Either way, just pointing at the full URL from another site is enough to get the browser to automatically send a CORS request.

CORS-Enabled XHR


// Script running on http://www.contoso.com
var xhr = new XMLHttpRequest();
xhr.onerror = _handleError;
xhr.onload = _handleLoad;
xhr.open("GET", "http://photos.contoso.com/albums", true);
xhr.send();

Sites can provide fallback for older browsers by wrapping this in feature detection. Checking for “withCredentials” is the best approach since it directly relates to CORS support for XHR.

CORS-Enabled XHR with Feature Detection


// Script running on http://www.contoso.com
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
xhr.onerror = _handleError;
xhr.onload = _handleLoad;
xhr.open("GET", "http://photos.contoso.com/albums", true);
xhr.send();
} else {
// Fallback behavior for browsers without CORS for XHR
}

At this point our client code makes a CORS request directly to "http://photos.contoso.com", but the request fails to return any data. The failure occurs because the server isn’t participating yet. Taking a quick look at the developer tools gives us an idea what went wrong.

Here we can see the server needs to send an “Access-Control-Allow-Origin” header in the response. In our scenario we’re not opening up our albums for any site to access, but want to enable access solely from “http://www.contoso.com”. Doing this requires allowing the server to identify where the request originated. Examining our outgoing request reveals a new header containing precisely this information, “Origin”.

Simple CORS Request Headers


GET http://photos.contoso.com/albums HTTP/1.1
Origin: http://www.contoso.com
...

Using this information the server can choose to limit access to any set of sites. If the server always adds an “Access-Control-Allow-Origin” header with a value of '*' then all sites will have access. For our scenario, we’ll have the server verify the origin and then set “Access-Control-Allow-Origin” to allow only “http://www.contoso.com”.

Simple CORS Response Headers


HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://www.contoso.com
...

With the above updates in place, our “http://www.contoso.com” client can now access album lists from the server at “http://photos.contoso.com”.

Cross-Origin XHR with Preflight

The “simple” CORS requests discussed so far are great for basic, read-only scenarios, like downloading a photo album. Taking the next step by modifying data across sites requires a bit more work on the server. For example, say we’re adding code in the client to create a new album.


var xhr = new XMLHttpRequest();
xhr.onerror = _handleError;
xhr.onload = _handleLoad;
xhr.open("PUT", "http://photos.contoso.com/albums", true);
xhr.send(JSON.stringify({ name: "New Album" }));

Running this as-is doesn’t work. Examining the network traffic reveals a request is sent, but not the one we expected.

What the browser actually sent is known as a preflight request. Preflight requests are sent before requests that may result in data modification on the server. Such requests are identified by the presence of non-simple properties as defined in the CORS specification. These properties range from certain HTTP methods like “PUT” to custom HTTP headers. Browsers send preflight requests to ask the server for permission to send the actual request. In our example the browser is verifying a “PUT” request is allowed.

Preflight Request


OPTIONS http://photos.contoso.com/albums HTTP/1.1
Origin: http://www.contoso.com
Access-Control-Request-Method: PUT
...

Getting the browser to send the actual request requires some changes on the server. Once again we can take a look at the developer tools for more information.

The first step is to make the server recognize the “OPTIONS” preflight request as distinct from other requests for the same URL. After the server verifies the preflight request by ensuring “Access-Control-Request-Method” is asking for “PUT” from an allowed origin, it sends the appropriate approval via the “Access-Control-Allow-Methods” header.

Preflight Response


HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://www.contoso.com
Access-Control-Allow-Methods: PUT
...

Once preflight is out of the way and approved the actual request takes place.

Actual Request


PUT http://photos.contoso.com/albums HTTP/1.1
Origin: http://www.contoso.com
...

Adding the album is technically complete at this point, but our client code won’t know that unless the server responds correctly. Specifically the server must still include “Access-Control-Allow-Origin” in the response.

Actual Response


HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://www.contoso.com
...

With that the client can add a new album cross-origin and recognize whether or not the action completed successfully.

Next Steps

Pairing CORS with other new platform features enables interesting scenarios. One example is the Cross-Site Upload Test Drive which tracks cross-origin file uploads using CORS, XHR, FileAPI, and progress events.

—Tony Ross, Program Manager, Internet Explorer

High performance HTML5 content in Metro-style Apps

2012-02-07T22:33:04Z

Metro style apps in Windows 8 have all the performance benefits of IE10 when showing Web content. In Metro style apps, Web content is always JIT compiled and hardware-accelerated. Other platforms do not provide the same level of performance in apps. For example, Cocoa apps on iOS offer significantly worse JavaScript performance (via the UIWebView control) than the same content running in Safari. These Cocoa apps do not enjoy JIT compilation, and these apps cannot show and use Web content the same way the browser on the system can:

Testing configuration: http://www.webkit.org/perf/sunspider/sunspider.html.
iPad: 1st Gen, iOS 5.0.1.
Windows 8: Developer Preview, Dell Optiplex 745, 64-bit OS.
Kindle Fire v1.

Why is this important?

Many applications embed HTML to provide a richer and always up to date experience for consumers. For example, the developer of a restaurant guide app might want to include a live map showing the locations of the list of restaurants the user is choosing from. If you write an app on iOS, common actions like panning and zooming the map will run twice as slow in an app compared with Safari.

Anyone writing a Metro style app for Windows 8 can easily include Web content in their app. In an HTML or XAML app, just include an <iframe> element or a WebView control to get the full benefit of IE 10 performance. To see a sample HTML app that demonstrates this, check out the “Building Your First Metro Style App Using Javascript” hands-on lab at http://www.buildwindows.com/Labs.

Figure 1: HTML Content from Bing Maps in an HTML Metro Style App

With Metro style apps, it’s easy to integrate many existing Web services seamlessly into your app. It’s also possible to build new services for your app that let you deliver dynamic HTML content without having to update your application.

When you include Web content in your Metro style app, your app gets all the performance benefits of IE10 automatically without any additional or special work. JavaScript code continues to run fast with JIT compilation, and your app will automatically use GPU to accelerate HTML graphics.

—Andy Zeigler, Senior Program Manager, Internet Explorer

CSS3 3D Transforms in IE10

2012-02-02T18:07:08Z

CSS3 features make it easier to build rich and immersive Web experiences. A recent post described how Web developers add personality to their sites with CSS3 Transitions and Animations. CSS3 3D Transforms add another dimension (literally) for developers to enhance their sites. For example, the Windows 8 Metro style Start page uses subtle 3D transforms to highlight pressed tiles, as shown below.

Internet Explorer 10 tile shown not pressed (left) and pressed (right)

Adding a 3rd Dimension to CSS Transforms

Like CSS3 2D Transforms, 3D Transforms provides functions and values for the CSS transform and transform-origin properties that apply geometric transformations operations to HTML elements. CSS 3D Transforms extends the transforms functions to enable 3D transforms. The rotate(), scale(), translate(), skew(), and matrix() transform functions are expanded to encompass the 3D space with a z-coordinate parameter—or in the case of matrix3d(), an extra 10 parameters—and by spawning additional transform functions, for example, rotateZ() and scaleZ().

A new perspective transform function gives transformed elements depth by making distant points appear smaller.

CSS3 3D Transforms also adds a few new CSS properties. In addition to the transform and transform-origin properties, IE10 supports vendor-prefixed perspective, perspective-origin, backface-visibility, and the flat value of transform-style.

Note: The markup examples in this post all use unprefixed properties as defined in the W3C standard. However, at this time all browsers that implement these features do so with vendor-specific prefixes. Please remember to add your browser’s prefix to the example markup when experimenting.

Perspective

The perspective transform function is important for 3D transforms. It sets the viewer’s position and maps the viewable content onto a viewing pyramid, which it subsequently projects onto a 2D viewing plane. Without specifying perspective, all points in z-space are flattened onto the same 2D plane and there is no perception of depth in the resulting transform. For some transforms, such as the translation along the Z-axis shown below, the perspective transform function is essential for visibly seeing any effect from the transform.

In the examples below is the original, untransformed element and is the transformed element


`transform: perspective(500px) translate(0px, 0px, -300px);`		`transform: translate(0px, 0px, -300px);`


`transform: perspective(500px) rotateY(30deg);`		`transform: rotateY(30deg);`

A shortcut for adding the perspective transform to several elements is to use the perspective property on their parent element(s). The perspective property applies the perspective transform to each of its child elements:


#parent {
perspective: 500px;
}
 
#div1 {
position: absolute;
transform-origin: 0px 0px;
transform: rotateY(30deg);
}
 
#div2 {
position: absolute;
transform-origin: 0px 0px;
transform: rotateY(30deg) translate(220px);
}

The perspective-origin property can also be used in conjunction with perspective to shift the viewpoint away from the center of the element:

Below, you can see that shifting the perspective origin to the left makes the content to the right of the original perspective origin appear farther away.


#parent {
perspective: 500px;
perspective-origin: -300px 0px;
}

backface-visibility

The backface-visibility property is useful for hiding the backface of content. By default, the backface is visible and the transformed content can be seen even when flipped. But when backface-visibility is set to hidden, content is hidden when the element is rotated such that the front side is no longer visible. This can be useful if you want to simulate an object with multiple sides, such as the card used in the example below. By setting backface-visibility to hidden, it’s easy to ensure that only the front-facing sides are visible.

CSS markup:


.card, .card div {
position: absolute;
width: 102px;
height: 143px;
}
 
.card div:nth-child(1) {
background-image: url('redback.png');
}
 
.card div:nth-child(2) {
background-image: url('8clubs.png');
backface-visibility: hidden;
}

HTML markup for one card:


<div class="card"><div></div><div></div></div>

Creating six cards as defined above and giving each a style="transform: rotateY(ndeg)" property with a different rotation value n, results in this:


rotateY(0deg);	rotateY(36deg);	rotateY(72deg);	rotateY(108deg);	rotateY(144deg);	rotateY(180deg);

What’s happening in this example is that when there’s no rotation, you see the second div, the 8 of clubs—because it’s the one on top in drawing order. As we apply a rotation to the card and pass 90 degrees, the backface-visibility: hidden; property of the second div causes it to become invisible thereby exposing the first div, the card back.

3D Transforms with Animations and Transitions

Best of all, you can even use 3D transforms in conjunction with CSS transitions and animations. If you are using IE10 or another browser that supports CSS3 Animations of CSS3 3D Transforms, try this example of scrolling text, built by animating the transform property.

This is the CSS markup that achieves the effect shown in screen shots below.


#parentDiv {
perspective: 500px;
perspective-origin: 150px 500px;
}
 
#div1 {
transform-origin: 150px 500px;
animation: scrollText 200s linear infinite;
}
 
@keyframes scrollText {
0% { transform: rotateX(45deg) translateY(500px); }
100% { transform: rotateX(45deg) translateY(-8300px); }
}

Try It Today

Try this out in IE10 on the Windows Developer Preview. The test drive demo Hands On: 3D Transforms can help visualize the possibilities that CSS 3D Transforms enables.

We’d love to see your creations!

—Jennifer Yu, Program Manager, Internet Explorer Graphics

Web Sites and a Plug-in Free Web

2012-01-31T17:12:23Z

The transition to a plug-in free Web is happening today. Any site that uses plug-ins needs to understand what their customers experience when browsing plug-in free. Lots of Web browsing today happens on devices that simply don’t support plug-ins. Even browsers that do support plug-ins offer many ways to run plug-in free.

Metro style IE runs plug-in free to improve battery life as well as security, reliability, and privacy for consumers. Previously, we wrote about how we use IE’s Compatibility View List to make sure sites that have a plug-in free experience for other browsers provide that same experience to IE10 users. This post describes a way for sites that continue to rely on plug-ins to provide consumers browsing with Metro style IE the best possible experience.

Developers with sites that need plug-ins can use an HTTP header or meta tag to signal Metro style Internet Explorer to prompt the user.

HTTP Header


    
        X-UA-Compatible: requiresActiveX=true

META Tag


    
        <meta
            http-equiv="X-UA-Compatible"
            content="requiresActiveX=true"
            />

Metro style IE10 detects these flags, and provides the consumer a one-touch option to switch to IE10 on the desktop:

In addition to respecting these X-UA-Compatible flags specified by the developer, the Compatibility View List can also specify a site that needs to run in the desktop.

This mechanism provides a short-term mitigation. The desktop browsing experience and most plug-ins were not designed for smaller screens, battery constraints, and no mouse. Providing an easy way to the Windows desktop is the last resort when no comparable plug-in free fallback content exists.

A plug-in free Web benefits consumers and developers and we all take part in the transition. IE10 makes it easy to provide the best possible experience while you migrate your site.

—John Hrvatin, Program Manager Lead, Internet Explorer

Creating Files through BlobBuilder

2012-01-27T21:38:55Z

As Web sites transition more and more into Web applications, working with files in meaningful ways is becoming increasingly important. Starting with Platform Preview 2, IE10 includes support for the File API, enabling developers to read and slice files on the client. Platform Preview 4 adds support for BlobBuilder, a way for developers to create new files. IE10 also has two new methods that allow the user to save blobs to their computer, enabling great end-to-end experiences when working with client-resident data.

Over on the IE Test Drive, we have a fun piano demo showing off BlobBuilder and File API capabilities. When you press notes on the piano, the site constructs two files: an mp3 music file and an SVG file of the musical score. You can see how the size of both files change each time you press a note. Press the play button to listen to your song, or download either the music file or the SVG score file by pressing the links just above the piano keys. In the rest of this blog post I’ll go through how the demo works, focusing on the capabilities of BlobBuilder and File API.

BlobBuilder Capabilities

BlobBuilder, like the name implies, is a way to build blobs on the client. The main method to do this is append. The append function accepts three data types:

Blob objects
Plain text
Array Buffers

The piano demo creates the mp3 file by appending blobs together, using one blob for each note. The demo creates the SVG file of the musical score by appending text that contains the SVG source.

getBlob is another method available on the BlobBuilder object which returns a blob object containing all the items previously appended. Here is a very simple example that uses BlobBuilder to create a text file:


	
		// The BlobBuilder constructor is prefixed in all browsers.
		
		// Use MSBlobBuilder in IE, MozBlobBuilder in Firefox, and
			WebKitBlobBuilder in WebKit-based browsers.
		var bb = new MSBlobBuilder();
		 
		bb.append("Hello World!");
		var blob1 = bb.getBlob("text/plain");

One thing to note about the getBlob method is that when you call getBlob in IE10 and Firefox, it will clear out the contents of the BlobBuilder object, so the next time you call append it will be as if you were appending into a new BlobBuilder object. WebKit does not currently clear out the contents of the BlobBuilder after calling getBlob. Consider this example:


	
		var bb = new MSBlobBuilder();
		bb.append("Hello World!");
		var blob1 = bb.getBlob("text/plain");
		bb.append("BlobBuilder is great");
		var blob2 = bb.getBlob("text/plain");

In all browsers, blob1 will contain the text “Hello World!”. However, blob2 will be different. In IE10 and Firefox, blob2 will contain the text “BlobBuilder is great” while in WebKit-based browsers it will contain the text “Hello World!BlobBuilder is great”. This discrepancy is still under discussion in the Web Applications working group.

Getting Blobs via XHR

The File API makes it easy to access files selected by the user, something I demonstrated in the Magnetic Poetry demo. This is great when you want to incorporate the users own data into your site. However, in the piano demo, I needed the note files to be built into the demo. When you want to work with blobs but you want to supply the data, you can use XHR.

New to IE10 is the XHR responseType property. The responseType property supports four values: blob, array buffer, text, and document. In the piano demo’s initialization method - getBlobs() - you’ll see the following:


	
		var req = new XMLHttpRequest();
		var url = 'PianoNotes/AllNotes2.mp3';
		req.open('GET', url, false);
		req.responseType = "blob";
		req.onload = function () { 
			/* ... */ };
		req.send(null);

One thing you may notice is that the demo only makes a single XHR request. It only downloads one file which contains all the notes used in the demo. However, when you press a key in the demo, only a single note plays and the site appends only a single note to the mp3 file. To make that work, after downloading the file containing all the notes, the site slices the file using the File API slice method and extracts 24 individual notes. This is a great performance savings versus having to download 24 individual files.

Creating the Music File

Once I have a blob for each note in the demo, creating the mp3 file is easy. Each time you press a key I call:


	
		musicBlobBuilder.append(noteBlob);

In order to update the file size, I get the blob and then get the file size.


	
		var musicBlob = musicBlobBuilder.getBlob("audio/mp3");
		// display musicBlob.size

Lastly because I know that the BlobBuilder object was cleared out when I called getBlob I just append the blob back in:


	
		musicBlobBuilder.append(musicBlob);

Creating the SVG File

Each time you press a key in the demo, you see a note added to the musical score. The musical score is drawn by a single SVG element contained within a div with an id of “scoreContainer.” Each time you press a key, script runs which adds a note to the SVG element and then the SVG file is created by appending the source:


	
		svgBlobBuilder.append(document.getElementById("scoreContainer").innerHTML);
		var svgBlob = svgBlobBuilder.getBlob("image/svg+xml");
		// display svgBlob.size

In this case, I don’t refill the svgBlobBuilder because I want to start with a clean slate the next time the user presses a key.

Saving Files to Disk

The last part of the demo is saving the files to disk. When you press the “Music File” and “Musical Score File” links on top of the piano keys you will be able to save the file though an experience that feels just like downloading a file:

Note that the notification bar is not available in the Platform Previews. Instead, a save dialog is presented.

Each link calls either saveSong() or saveSheetMusic(). Looking into each of these methods will reveal that they use the msSaveOrOpenBlob function:


	
		window.navigator.msSaveOrOpenBlob(svgBlob, "MusicScore.svg");

msSaveOrOpenBlob and msSaveBlob are two methods available in IE10 which let sites ask the user to save a blob to their computer.

Calling msSaveOrOpenBlob will provide an option on the notification bar to open the file in addition to saving or canceling. Calling msSaveBlob only provides the option to save the file or cancel. Though these functions are not yet included in any standard, we believe they are extremely useful for writing end to end scenarios with blob data and hope that they might become a standard at some point.

Creating the Piano demo was a fun experience and I’m excited to see how you will use BlobBuilder. Let us know what you think!

—Sharon Newman, Program Manager, Internet Explorer

Debugging IndexedDB Applications

2012-01-26T00:51:25Z

IndexedDB is a W3C Working Draft that enables JavaScript developers to store, search, and retrieve data on the user's local client, even when Internet connectivity is disabled. This blog post describes IDBExplorer, a tool we use internally to debug IndexedDB applications. IDBExplorer lets you view database schemas, object store content, and index details.

Exploring the tool with an example IndexedDB App

To illustrate, I created an application that tracks my New Year’s resolutions using IndexedDB. It stores and accesses my resolutions locally (on the system browsing the Web page) and lets me add or edit them. The “Done That!” button removes the selected resolution from the list and removes its internal representation from the database.

IndexedDB defines a database as a container of information. Each database contains object stores, which are repositories for JavaScript objects. Each object contains attributes which can be queried using the API. If you're familiar with relational databases, object stores can be equated to tables and each JavaScript object in an object store represents a record. However, the objects stored in an IndexedDB object store are treated as opaque entities. In addition, these objects do not have to contain the same properties.

If a JavaScript object is analogous to a relational database record, then the properties of that object can be thought of as columns (or fields) in a table. As a result, IndexedDB allows you to define indexes that identify object properties that can be used to search the records in an object store. Thus, indexes allow you to traverse and search IndexedDB data using the attribute values on a JavaScript object.

IndexedDB allows each Domain to have multiple databases. This example uses one database: ��NewYear.” The app stores my resolutions in an object store named “Resolutions” inside the NewYear database. Each resolution is a JavaScript object with the following attributes:

priorityId: Separates resolutions into different priorities
name: Name of the resolution
occurrenceId: Tracks how frequently the action of the resolution must be performed
dueDate: Completion date of the resolution
createdDate: Internal date when the resolution was added to the object store
categoryId: Defines the type of activity for a resolution

Notice that not all attributes are visible from the application’s UI. In some cases, they are only internally used (e.g. createdDate).

Here’s how the IDBExplorer tool displays the contents of the “Resolutions” object store:

The “Resolutions” object store also contains an index on the priorityId attribute named “priorityId,” which allows the app to query objects using the priorityId property. The descriptions for the each priorityId value can be found inside the “Priorities” object store and the descriptions for the occurrenceId values can be found inside the “Occurrences” object store. Likewise, the descriptions for the categoryId values can be found inside the “Categories” object store.

The tool uses a tree hierarchy to illustrate these relationships:

The IDBExplorer tool shows there are five resolutions in my database (two high priority tasks, two medium priorities, and one low priority).

Using the application, I can add a new resolution:

The app retrieves the values for Occurrence, Priority, and Category fields from their respective object stores using cursors and displays them to the user. The IDBExplorer tool lets you see how these values exist in the object store. For example, selecting the Categories object store displays the available categories and their descriptions:

You can update a resolution by selecting it in the “WorkOn” screen and choosing “Edit.” After making any changes, selecting the “Update” button will commit the changes and update the values in the “Resolutions” object store.

Using IDBExplorer in your Applications

You can include the IDBExplorer tool in your Metro style app or Web site. However, we recommend you not deploy the tool with your app.

To add the tool to your site, copy and unzip the content of the IDBExplorer package into your site. Your application will need to link to the IDBExplorer.html file contained inside the IDBExplorer folder using either an iframe element or a new window.

In our example, we decided to host IDBExplorer inside an iframe element. . However, for normal development we recommend hosting this URI inside a new window. This will allow you to have a side-by-side experience when debugging your database and application without affecting your site's user interface.

When hosting IDBExplorer, you need to pass the database name using the query string. In this example, this was done using the src attribute of the iframe element:


	
		<iframe 
			id="debuggerId" class="debuggerContainer"
			src="IDBExplorer/IDBExplorer.html?name=NewYear"></iframe>

When planning to host this functionality in a Metro style app, remember that Metro-style apps run fullscreen. As a result, you should navigate to this URL, rather than opening a new window (you will need to add a Back button to the IDBExplorer.html file in order to be able to return to your application). Alternatively, you can add an iframe element and display the tool in it.

Enjoy the tool and let us know what you think!

—Israel Hilerio, Ph.D., Principal Program Manager, Internet Explorer

This Week in Privacy

2012-01-24T06:53:12Z

In the last ten years Microsoft has invested heavily in user privacy. Just like security, privacy considerations are baked into every Microsoft product. It is almost a year since the World Wide Web Consortium (W3C), an international community that develops open standards to ensure the long-term growth of the Web, accepted and published Microsoft’s member submission for an Internet Standard to help protect consumer privacy. Last September I described how the W3C had announced the creation of a Tracking Protection Working Group that would bring together a broad set of stakeholders from across the industry to work on standards for “Do Not Track” technology and the group has been hard at work since then.

This week there are three important events related to online privacy:

The Digital Life Design (DLD) conference in Munich where our own Dean Hachamovitch had the privilege of speaking yesterday (see related post here);
The third face-to-face meeting of the W3C Tracking Protection working group, which begins today; and
The Computers, Privacy and Data Protection Conference starting tomorrow in Brussels.

These forums bring together opinion leaders and stakeholders from academia, industry, and government to discuss information technology, privacy, and data protection.

W3C’s Third Face-to-face Meeting of the Tracking Protection Working Group

The W3C Tracking Protection working group is chartered to produce three deliverables:

Tracking Preference Expression Definitions and Compliance
When a large group of experts is brought together from across industry and government it is essential that they agree on terminology to prevent misunderstandings where people think they agree or disagree when in fact they don’t. The First Public Working Draft (FPWD) of this document was published in November and this week the group will discuss the changes made to the Editor’s Draft since then. The document highlights the large number of open issues that the group is working on.
Tracking Preference Expression (Do Not Track)
The second document is a technical specification that defines the mechanisms to be used by browsers and other applications in order to signal user preferences not to be tracked online. Today, Internet Explorer 9 sends this “DNT” signal when you enable a Tracking Protection List. The FPWD of this document was also published in November and again the group will discuss the latest Editor’s Draft this week. Sending the DNT signal relies on Web sites to correctly recognize and obey the user’s request to not be tracked. At the present time, few Web sites take any action when they receive the signal.
Tracking Selection Lists
The third deliverable for the Tracking Protection working group is a specification defining an interoperable format for Tracking Selection Lists. Tracking Selection Lists define rules that browsers can use to allow or block tracking elements on Web pages. A number of browsers today support this kind of list, either directly or via add-ins. In Internet Explorer, these lists are called Tracking Protection Lists (or TPLs). Internet Explorer 9 provides built-in support for TPLs specifically designed to help users control how they are tracked on the Web.

A Web standard that defines the format of these lists will encourage a rich ecosystem of list providers that can work with any browser that chooses to support this feature. The working group hasn’t yet published a FPWD for Tracking Selection Lists but will discuss the Editor’s Draft written by participants from Microsoft and Opera in the meeting this morning.

Tracking Selection Lists are designed to complement the DNT signal, which will take some time to be effective. Inevitably, not all sites will respect the DNT user preference and Tracking Selection Lists will provide consumers an additional control to avoid being tracked by those sites. When a Tracking Selection List is enabled, the browser will avoid contacting the listed sites. You can read more about IE9’s Tracking Protection from previous blog posts.

Computers, Privacy and Data Protection Conference

I am looking forward to participating in the Tracking Protection Workshop at the CPDP Conference tomorrow afternoon. Simon Davies, a Research Fellow at LSE and Director of Privacy International, and Alexander Hanff, who heads up Privacy International’s Digital Privacy portfolio, host a panel exploring the dynamics of Tracking Protection Lists. This should be an engaging session and I’m keen to listen to the questions and comments from all involved.

What’s Next?

The W3C working group has an aggressive timetable to make progress in the coming months, to tease out the consensus from the different groups involved, and to move the specification documents through the W3C process. You can follow the progress through the group’s mailing list archive. I plan to provide further updates on IEBlog. The minutes from this week’s meeting will be published on the group’s home page.

—Adrian Bateman, Program Manager, Internet Explorer

IE10 Compat Inspector

2012-01-20T20:34:14Z

Compat Inspector is now available for IE10. Use Compat Inspector to quickly identify if Internet Explorer platform changes affect your site. Whether you're preparing for IE10 or still updating for IE9, run Compat Inspector on any page experiencing problems. Then watch for messages explaining potential issues and steps you can take to resolve them.

About Compat Inspector

Compat Inspector is a JavaScript-based testing tool that analyzes your site while it runs. Compat Inspector reports patterns of interaction which cause issues in recent modes. This allows you to identify problems quickly without memorizing a bunch of documentation or searching through the entirety of your site's code. We developed Compat Inspector during the course of IE9 to speed up the process of recognizing common issues across different sites and have now updated it for IE10. Along the way, many members of the IE team contributed to the set of test cases that make up the rules in Compat Inspector.

Compat Inspector is designed to help sites migrating to IE9 or IE10 mode—not those running in legacy modes. You can test sites that run in legacy modes by selecting a more recent mode via the F12 developer tools. Just press F12 to open the tools, click on "Document Mode" in the menu bar, then select "Standards". You may need to refer to more detailed documentation such as the IE9 Compatibility Cookbook or the IE10 Developer Guide for some issues. The best pattern is to use Compat Inspector first, then fall back to the documentation if nothing is found.

Using Compat Inspector

Run Compat Inspector by adding the following script before all other scripts on each page you want to test (the need to run before other scripts means Compat Inspector can't be used as a bookmarklet):


    
        
            <script src="http://ie.microsoft.com/TestDrive/HTML5/CompatInspector/inspector.js"></script>

This will place a status widget in the upper right hand corner of the page. Click the widget to get more information.

You can streamline this process by using Fiddler to automatically inject Compat Inspector on pages you visit. Just add this snippet to your Fiddler Script to get up and running. This configuration also automatically inspects all sub-frames in a page. Once the snippet is in place you can toggle Compat Inspector on and off from Fiddler's "Rules" menu.

Go hands-on to get a feel for the improvements using the Compat Inspector Test Drive. Then visit the Compat Inspector User Guide to learn more about how to test your own sites.

—Tony Ross, Program Manager, Internet Explorer

Under the Covers: Let It Snow…

2012-01-18T17:27:26Z

With one of those rare Seattle snowstorms underway today, I feel this is a great time to publish this description of our Holiday 2011 Test Drive demo “Let It Snow.” —Editor

When a browser effectively uses the underlying hardware, the possibilities are limitless. Over the holidays we released a demo that helps showcase the advantages of a fully hardware-accelerated, touch first browsing experience with Internet Explorer 10. This post takes a closer look at how the Let It Snow demo was created. The patterns in this demo are typical of the HTML5 experiences emerging across the Web today and early Metro Style Apps. We’ll take a look from a functional point of view, rather than visual.

As low power mobile devices and touch first user experiences become mainstream, customer expectations around browser performance are quickly expanding. Browser performance now includes how smoothly the Web site moves under your finger, how quickly the Web site responds to touch interactions, and how efficiently the browser consumes battery. With Internet Explorer 10 and Windows 8 we set out to build the world’s fastest browser for real world scenarios.

Building Let It Snow

	Holiday Postcard We start with a themed postcard which contains a designated area for the holiday greeting. The postcard is generated at runtime using HTML5 canvas and uses many common drawing techniques including drawing images, composing gradients, manipulating opacity and skew, and more.
	Animated Snowstorm We next add lots of falling snowflakes to create a snowstorm. We do this using a second canvas that’s layered over the postcard. Each snowflake is represented as an object in a JavaScript collection which holds the state of the snowflake, such as current location, velocity, and the image to draw. The canvas is cleared each frame and the scene recreated from the underlying model.
	Snowflakes Collecting Over time snowflakes will collect on the sign. Using hit testing techniques we determine when the snowflake is over the sign and then randomly assign the snowflake a target on the sign. As the snowflake approaches the target we use HTML5 Canvas composite modes to compose the snowflake on the canvas.
	Brushing Away the Snow Snow can be brushed off the postcard using your finger or mouse. We track the user input through the new MSPointer event which enables a single consistent API across different pointer models. This allows us to provide a great multitouch experience in Internet Explorer 10 running on Windows 8. We use these captured points to erase portions of the canvas, creating the illusion of the snow being brushed away.
	Complete scene When the layers are combined they create an interactive holiday scene. The patterns used in this demo represent techniques commonly found in games such as Angry Birds or Cut The Rope, including script based animations, sophisticated user input, physics based game logic, and more.

We’re excited about the fast and fluid interactive experiences that can be achieved in Internet Explorer 10 and Windows 8 with a fully hardware-accelerated and touch enabled HTML5 platform. There’s no better way to experience these benefits than first hand through the Windows 8 Developer Preview.

—Bogdan Brinza‎, Program Manager, Internet Explorer

Staying Safe Online in the New Year

2012-01-17T18:21:46Z

The bad guys didn’t take a holiday vacation: Internet Explorer’s SmartScreen service blocked nearly 2 million malware downloads per day on average from mid-December through New Year’s. December 25 saw a 30% spike in malware blocks— successfully preventing users from being tricked into giving their PCs an unwanted “present.”

January is a great time to resolve to stay safer online. Microsoft works around the clock, year-round, to help. By following a few simple best practices, including opting into Automatic Updates and Internet Explorer’s SmartScreen Filter, you can help keep your computer secure on the Web.

New PC owners will be happy to hear that Windows 7 users are 5 times less likely to be infected with malware than users running Windows XP. To improve your defenses even more, Windows 7 and Windows Vista users should be sure to upgrade to IE9, our safest and most secure browser. Later this month, we’ll help keep more customers safe by beginning simpler, seamless automatic upgrade process for customers who aren’t running the latest, most secure versions of IE for their operating system. Of course, no matter what OS and browser you use, you should ensure that you install updates as they become available – including updates for browser extensions, a common source of vulnerability. If you got a new phone or tablet over the holiday, be extra careful where you get your apps—the bad guys have noted these fresh new targets and are reacting accordingly.

This month marks the tenth anniversary of Bill Gates’ Trustworthy Computing memo, and delivering trustworthy browsing is more important than ever, as the ecosystem grows to encompass phones, tablets, and other form factors and the bad guys attempt even more clever attacks. We’re excited to be working with the rest of the Windows team on cutting-edge security improvements in IE10 and Windows 8, and we’ll be describing our new defenses in a series of posts over the next two months.

—Eric Lawrence, IE Security

Introducing Seven More IEBlogs

2012-01-17T00:52:42Z

Today we introduce seven new language versions of IEBlog—French, German, Portuguese (Brazil), Korean, Japanese, Chinese (PRC), and Russian. Links to these appear in the new “Languages” block at the top of the right column. We plan to publish translated versions five to ten days after their appearance on the English language IEBlog.

We’ve worked hard to localize most of the language elements on the page and in the posts themselves. Text within images will remain in English though we translate captions and image alt text. Markup and code samples will also remain in English. Occasionally, we’ll mistakenly translate an HTML, CSS, or JavaScript keyword; please forgive us. The links along the top and bottom of the page which link to English-language pages remain in English.

One of the more fun programming tasks in localizing IEBlog was to correctly translate and reformat the dates and times of the posts and comments. We decided to go one step further and translate the time (which was previously always displayed in US Pacific Time) to the time zone of the viewer. We also made this change to the English language version.

If you’re a speaker of one of these languages, we hope you’ll enjoy the new versions of IEBlog.

—Marcia Coelho da Costa, Senior International Project Manager,
Joe Oswald, Principal International Project Manager Lead, and
Ted Johnson, Production Engineer for IEBlog

Controlling Selection with CSS user-select

2012-01-11T17:18:07Z

IE10 Platform Preview 4 includes support for a new CSS property, -ms-user-select, which makes it easier for Web developers to control exactly what text can be selected on their Web sites. If you were to watch me all day at my workstation, you would notice that as I read on the computer, I select text. I’m not the only one who reads like this; selecting text on the Internet is important in many other scenarios.

Consider a typical news Web site. Most pages will include a news article, the contents of which the user needs to be able to select because they read by selecting text or because they want to share the content. Also on the news Web page there are some menus and links to other parts of the site. Users likely don’t need to select these items. Using -ms-user-select, the Web developer can specify that text selection is allowed in the news article but not allowed in the menus.

The IE Test Drive site includes an example that does this.

Setting -ms-user-select:none on the entire page and then setting -ms-user-select:element on the element containing the blog post allows only the contents of the blog post to be selected. -ms-user-select:element is a new property first introduced by IE which we think could be useful in many situations. Setting -ms-user-select:element means that the user can select the text of that element, however, the selection will be constrained to the bounds of the element. People who want to select the contents of a news article probably don’t want to select the footer elements just past the article. Setting -ms-user-select:element makes it easy for users to just select the contents of the article without having to worry about getting the mouse placement exactly correct.

-ms-user-select accepts four values:

text – the text is selectable
element – the text is selectable, constrained to the bounds of the element
none – the text is not selectable
auto – if the element contains editable text such as an input element or contenteditable element, the text is selectable. Otherwise selection is determined by the parent node’s value.

auto is the default value for -ms-user-select.

A developer can turn off text selection by setting -ms-user-select to none. In IE, when text is set to -ms-user-select:none, the user will not be able to start a selection within that block of text. However, if the user started selecting text on a different area of the page, the selection would continue into any area of the page including areas where -ms-user-select is none. In Firefox, if the developer sets –moz-user-select:none then selections can’t start in that area and also can’t be included in any other selection. In Webkit, setting –webkit-user-select:none will make it appear as if that the text is not included in the selection, however if you copy and paste the content, you will see that the content is included in the selection.

user-select was originally proposed in the User Interface for CSS3 module; this module has since been superseded by CSS3 Basic User Interface Module, yet it does not define the property. Both Mozilla and Webkit support their own prefixed versions of this property. However, as discussed above, there are some differences in the implementations.

Play around with the examples on the IE Test Drive site and let us know what you think.

—Sharon Newman, Program Manager, Internet Explorer

CSS Corner: Using the Whole Font

2012-01-09T17:39:22Z

With cross-browser support for both the CSS3 @font-face rule and the WOFF font packaging format, modern Web typography has expanded far beyond the realm of ‘Web-safe fonts.’ Well-known magazines such as the New Yorker use Web fonts to preserve the typographic personality of their headlines, while [US] President Obama’s re-election campaign uses Web font service Typekit to host their identity font.

One remaining limitation prevents Web designers from using the entire font: the inability to access the large variety of optional OpenType® features built into many fonts. These features define glyph substitution and positioning options to support fundamental typographical features such as kerning, superscript and subscript, contextual letterforms such as ligatures, numeral styles, access to alternate East Asian glyphs as well as ornamental swashes.

For instance, an OpenType “stylistic set” built into Gabriola allows this text:

…to render as:

Recent updates to the CSS3 Fonts module include a new set of properties to expose these OpenType features within CSS. These properties can be grouped in two broad categories:

An explicit mapping of the common OpenType features to specific properties and values. For example font-kerning:normal applies the kerning pair adjustments encoded within the font and font-variant-numeric: tabular-nums enables tabular numerals.
The font-feature-settings property enables low-level access to all the OpenType features supported by a font. It is meant as an ‘escape hatch’ to access to more advanced features in less common use-cases.

CSS Property: font-feature-settings

Preview 4 of IE10 includes support for the font-feature-settings property. Our earlier Gabriola example could thus be written:


p#demo {
font-family: Gabriola, cursive;
font-size: 24pt;
-ms-font-feature-settings: "ss06" 1;
}

The -ms-font-feature-settings declaration above turns on a stylistic set supported by the font (ss06). The property takes either a value of ‘normal’ – no change in glyph selection or positioning – or a comma-separated list of one or more features. Each feature combines a four-letter OpenType feature tag and a value. In the example above, “ss06” is the OpenType feature tag for stylistic set 6. We assign the value 1 to the feature to turn it on.

The OpenType feature registry defines the list of possible tags (also documented here and standardized by ISO). Here a few of the most popular:

OpenType tag	Enables
`kern`	Kerning
`liga`	Standard ligatures
`dlig`	Discretionary ligatures
`smcp`	Small capitals
`subs`	Subscript
`sups`	Superscript
`swsh`	Swashes
`ss01`, `ss02`, …, `ss20`	Stylistic sets 1 to 20

For a good illustrated introduction to these features and many others, we recommend the Layout Features section of the FontFont OpenType User Guide.

The more common features are on/off switches. Feature values of off or zero turn the feature off; a value of on or any positive integer activates it. For some features, an integer value gives access to several options. This is usually the case for swashes (‘swsh’). If no value is specified for the feature, a value of 1 is assumed. All the following declarations are thus equivalent for the purpose of our Gabriola example:


-ms-font-feature-settings: "ss06" 1;
-ms-font-feature-settings: "ss06" on;
-ms-font-feature-settings: "ss06";

Finding Out Supported Features for a Font

Design tools such as Adobe InDesign or Illustrator expose OpenType features through user-friendly menus and dialogs, word processors such as Word support them through their font selection dialog and font vendors often document which features their products support. A future post will discuss using the browser to detect font features. With more browser access to OpenType features we expect font hosting services to do more to advertise and document their use as well.

Browser Support

The font-feature-settings property is currently supported by Firefox 4+ and Internet Explorer 10, beginning with Preview 4. Note that because Firefox and IE implemented different versions of the draft the value syntax they accept is different. For example, enabling kerning in both browsers requires the following:


-ms-font-feature-settings: "kern" 1;
-moz-font-feature-setting: "kern=1";

More information about –moz-font-feature-settings see -moz-font-feature-settings.

As CSS3 Fonts moves along the standardization track we expect more browsers to add support for font-feature-setttings as well as the more author-friendly font-variant properties and values defined in the module.

Also note that the property applies to all font families, whether Web fonts downloaded through @font-face rules or local fonts referenced by name.

Demos

Our IE Test Drive site includes advanced OpenType feature demos from Monotype Imaging, FontFont and The Font Bureau. They demonstrate the variety of typographic designs available in modern fonts.

You don’t need any special fonts to try this. Windows 7 includes a number of OpenType-enabled fonts including Calibri, Cambria, Consolas, Gabriola, and Palatino Linotype. In the Windows 8 Developer Preview, we added OpenType features to Segoe UI and the Web-safe fonts Arial, Verdana, Georgia, Times New Roman, Comic Sans and Trebuchet.

We are excited to give Web authors access to all the OpenType features built in Web fonts and look forward to an even broader range of typographic design on the Web.

—Sylvain Galineau, Program Manager, Internet Explorer

Let It Snow... Faster!

2011-12-20T17:34:28Z

In the spirit of the holiday season, we offer a new HTML5 experience that makes the most of your PC hardware and the new touch capabilities in Windows 8.

Check out Let It Snow and get ready for a GPU-powered snow storm. This experience brings together hardware-accelerated HTML5 canvas, SVG, CSS, and more. On Windows Developer Preview with support for multi-touch in IE10, you can reach out and brush the snow off the sign and reveal a holiday message -or just use your mouse. If you think your browser can keep up, kick it up to 1000 snowflakes. If it's more of a flurry than a blizzard, try it with IE9 (or IE10) using the hardware acceleration built into the browser.

Click the image to Let It Snow

Earlier this year we showed the first look at IE10, which offers more and more of the site ready HTML5 developers are asking for, so they can build beautiful and interactive Web experiences. With the Windows Developer Preview, we introduced more hardware-accelerated HTML5 for building touch friendly applications on the Web. We’re delighted and amazed by what developers are building on HTML5 and excited to be part of it.

Thank you!

Your participation and feedback is an important part of how we build IE. Today we want to say thank you to everyone who browses the Web with IE9, downloads the IE10 previews, runs the test drives, and reports issues on Connect. We also want to thank the people and groups who make the standards process work, the broad community of Web developers, and enthusiastic consumers who work to move the Web forward.

From the entire IE team, we wish you a Happy Hardware-accelerated Holiday Season, and we look forward to another exciting year on the Web in 2012.

—Rob Mauceri, Group Program Manager, Internet Explorer

Updated Look for IEBlog

2011-12-18T21:29:00Z

Today we introduce an updated look and layout for the IEBlog. Here’s an overview of the design and layout changes we made:

New font family – We’re using the Segoe UI font to align with Windows 8 Metro style.
New color scheme – We have a new color scheme inspired by the Windows 8 Metro style Start screen.
Improved performance – The blog’s home page defaults to excerpt view. This substantially reduces load time since excerpts do not contain images or videos.
Fewer borders – We’ve removed the borders around the right rail items resulting in a cleaner look.
Updated right rail content – We’ve removed the tag cloud and limited the monthly archive list to 24 months. The links section has been updated somewhat and we’ve added the Microsoft Translator machine-translation widget for visitors who may wish to read our blog in languages other than English.

We hope you like the new style as much as we do.

—Ted Johnson for IEBlog

Interoperable HTML5 Quirks Mode in IE10

2011-12-14T17:21:58Z

The fourth IE10 platform preview includes enhanced HTML5 support by using an interoperable quirks mode based on the behavior defined in HTML5. This HTML5-based quirks mode is the default quirks mode in IE10.

Users and Web developers want sites to just work across browsers. A key part of this is making HTML, CSS, and JavaScript work in the same way across implementations. HTML5 facilitates cross-browser consistency by defining parts of the Web platform previously left unspecified. This largely involves the HTML5 parsing rules, but also includes parts about how browsers should behave in quirks mode.

IE10’s HTML5 quirks mode is used for pages without a DOCTYPE or with a legacy DOCTYPE as defined in HTML5. Like HTML5 and other browsers, the behavior of IE10’s quirks mode is the same as standards mode with select quirks applied. This means features like <canvas>, <audio>, and <video> remain available. Most importantly this aligns IE10's quirks mode with the behavior of other browsers, so pages missing a DOCTYPE run consistently across implementations.

Developers can quickly identify which mode a page uses via the F12 developer tools. The latest HTML5 standards and quirks modes are now listed as Standards and Quirks. Legacy modes are still listed by the version of IE that introduced them. IE's legacy quirks mode is now referred to as Internet Explorer 5 quirks.

F12 Developer Tools’ Document Mode menu

IE10 continues to use Internet Explorer 5 quirks in Compatibility View for pages without a DOCTYPE, and for pages that opt-in via X-UA-Compatible.


<meta http-equiv="X-UA-Compatible" content="IE=5">

Call to Action

HTML5 defines quirks mode for compatibility and interoperability, but you should continue to author new sites for standards mode by using <!DOCTYPE html> at the top of your pages. Please help ensure IE10's HTML5 quirks mode works correctly by reporting issues via Connect.

—Tony Ross, Program Manager, Internet Explorer

IE 9.0.4 Available via Windows Update

2011-12-13T18:57:05Z

The December 2011 Cumulative Security Update for Internet Explorer is now available via Windows Update. This security update resolves three privately reported vulnerabilities in Internet Explorer. The most severe vulnerabilities could allow remote code execution if a user visits a specially crafted Web page using Internet Explorer. An attacker who successfully exploited this vulnerability could run a malicious application on the affected system. Users whose accounts are configured to have fewer user rights on the system could be less affected than users who operate with administrative user rights.

This security update is rated Important for Internet Explorer on Windows clients and Internet Explorer 9 for Windows 2008 R2; and Low for Internet Explorer on Windows servers. For more information, see the full bulletin.

Most customers have enabled automatic updating and do not need to take any action. We recommend that customers, who have not enabled automatic updating, enable it (Start Menu, type “Windows Update”). We recommend that administrators, enterprise installations, and end users who want to install this security update manually, apply the update immediately using update management software or by checking for updates using the Microsoft Update service.

—Ceri Gallacher, Program Manager, Internet Explorer

Media Capture API: Helping Web developers directly import image, video, and sound data into Web apps

2011-12-09T19:27:34Z

Last March, we released a prototype implementation of the audio portion of a working draft of the W3C Media Capture API on HTML5 Labs. This prototype publicized some proposed API enhancements described in section 6.1 of Microsoft’s HTML Speech XG Speech API Proposal. We have now updated the prototype to include the image and video capture features described in the proposal to support scenarios we’ve heard are important for Web developers, as well as incorporating your feedback on audio.

As more and more consumers use mobile devices to take still pictures, videos, and sound clips, Web developers increasingly need support to capture and upload image, video, and sound from their Web sites and applications. A usable and standardized API for media capture means Web sites and apps will be able to access these features in a common way across all browsers in the future.

During this past year, the effort to standardize media capture has intensified. The WebRTC working group was formed and combined scenarios that support basic video and audio capture with the ability to share that media in real-time communication scenarios. A broad interest in both of these scenarios from industry partners and browser vendors alike shifted focus away from the Media Capture API and brought the WebRTC draft spec to the forefront.

This past November, we took our experience with the development of this prototype and interest in media capture for the browser to the W3C's technical plenary meeting (TPAC). Travis Leithead shared some of our feedback with the Device APIs (DAP) Working Group and we continued existing discussions within the HTML Speech Incubator Group. One result of our engagement was the formation of a media capture joint task force in order to bring the best of local media capture and real-time communication scenarios together. We are actively participating in the task force and support the getUserMedia approach to capture.

With the release of this prototype, we give Web developers early access to photo, video and audio media capture APIs in the browser. We anticipate evolving the prototype to share implementation feedback and experience with the new media capture task force. The end goal remains to create the best possible standard for the benefit of the whole Web community.

Let’s also look back at our earlier proposals, explain why we believe the scenarios are still important, and why we implemented them in this new version of the prototype:

Privacy of device capabilities

The prototype allows enumeration of the capture device's capabilities (its supported modes). In the old W3C Device Capture API spec, privacy-sensitive information about the device could be leaked to an application because the navigator.device.capture.supported* properties could be accessed without user intervention. Our prototype moves these APIs to an object that is only available after the user gives permission. The W3C's current getUserMedia API does not support enumeration of device capabilities, but we believe it is valuable to Web developers and should be done in a similar privacy-sensitive manner.

Multiple Devices

The W3C's current getUserMedia API is designed to support multiple devices, either via hints to the API or through user preference. This is an improvement for a scenario that was not supported in the old W3C Device Capture API spec.

Our current prototype also supports a conceptually similar design: navigator.device.openCapture() which returns asynchronously with the capture device the user prefers (through preference or UI).

Direct Capture

In the old Media Capture API spec, the Capture.capture[Image|Video|Audio] operations launch an asynchronous UI that returns one or more captures. This means the user has to do something in the Web app to launch the UI and then initiate the capture, which makes it impossible to build capture UI directly into the Web application. Not only would this be unusable for a speech recognition application, but it is also places unnecessary user interface constraints on other media capture scenarios.

Our prototype and the current getUserMedia capture API directly capture from the device and return a Blob. Note that for privacy reasons some user agents will choose to display a notification in their surrounding chrome or hardware to make it readily apparent to the user that capture is occurring, together with the option to cancel the capture.

Streaming

For applications like speech recognition, captured audio needs to be sent directly to the recognition service. However, the current getUserMedia API design only supports capturing to Blobs, which delay the ability to process the recorded data.

Our prototype allows starting a capture asynchronously and returning a Stream object containing the captured data. Support for Streams would also be useful in video recording scenarios. For example, using a capture stream, an app could stream a recording to a video sharing site, as it is recorded.

Preview

In the case of video capture, live preview within the application is important and something that was missing from the old Media Capture API spec.

Both our prototype and the W3C's getUserMedia API, allow a preview of the recording to be created with URL.createObjectURL(). This URL can then be used as the value for the src attribute on an <audio> or <video> element.

End-Pointing

For applications like speech recognition, it's important to know when the user starts and stops talking. For example, if the app starts recording but the user doesn't start talking, the app may wish to indicate that it can't hear the user. More importantly, when the user stops talking, the app will generally want to stop recording, and transition into working on the recognition results. This sort of capability may also be of some use during non-speech scenarios, to provide prompts to users who are recording videos.

Neither the old Media Capture API, nor the current getUserMedia approach support end-pointing.

In order to support key speech/voice scenarios, we recommend adding end-pointing capability. The prototype provides this feature and allows Web developers to experiment and provide feedback on these capabilities which will be useful feedback for the W3C.

Looking Forward

We are supportive of the getUserMedia API, and note that it incorporates many of the points of feedback previously submitted. To avoid confusion about the future direction of media capture at the W3C, the DAP working group has officially deprecated the old Media Capture API, which now redirects to the media capture joint task force's current deliverable.

In addition to a prototype plugin that exposes the modified APIs, we have added to this package a functional demo app that makes use of them.

Building this prototype and listening to your feedback will help Microsoft and the other browser developers build a better and more interoperable Web. We look forward to continuing this discussion in W3C and helping to finalize the specifications.

—Claudio Caldato, Principal Program Manager, Interoperability Strategy Team

Moving to Standards-based Web Graphics in IE10

2011-12-07T23:05:00Z

Users expect to visit any site on the Internet with any browser and enjoy a similar quality experience. We first discussed Internet Explorer’s commitment to achieving the goal of consistent “same markup, same results” across browsers in a post on March 16, 2010 announcing the release of the IE9’s first platform preview. IE9 moved us a long way toward that goal and IE10’s HTML5-based Standards and Quirks modes largely completes that work. The post HTML5 Parsing in IE10 listed some of the legacy features removed from IE10’s HTML5-based Standards and Quirks modes.

This post expands the list of removed legacy features to include two more: Vector Markup Language (VML) and DirectX-based Filters and Transitions. Both of these features were marked deprecated in MSDN documentation as of IE9 (e.g., the first sentence of Filters and Transitions: “This topic documents a feature of Visual Filters and Transitions, which is deprecated as of Windows Internet Explorer 9”) and are now gone from IE10’s Standards and Quirks modes.

The common uses of VML and DX Filters now have standards-based alternatives implemented in IE10 and current versions of other browsers. These legacy IE features remain available in IE10 in document modes 5, 7, 8, and 9 though their performance is inferior to their hardware-accelerated, standards-based replacements. We encourage Web developers to move their sites to standards-based technologies rather than rely on legacy document modes.

Use SVG, not VML

Microsoft and others proposed VML (Vector Markup Language) to the W3C in 1998. IE5 first implemented it. The W3C merged VML with a competing proposal with the outcome being SVG. (See Vector Markup Language for a brief history.)

SVG, implemented in IE9, provides the functionality needed to replace VML in Web sites and applications that use it. The VML to SVG Migration Guide, published on the Microsoft Download Center, provides guidance for moving from VML to SVG.

The Raphaël JavaScript Library is a lightweight and easy-to-use graphics API that uses SVG when available and VML when not. Raphaël is a good choice for building vector graphics solutions that work in IE8 and newer browsers.

Use CSS3, not DX Filters

Internet Explorer 4 introduced a set of visual filters and transitions to allow Web developers to apply multimedia-style effects to their Web pages. The name DX Filters comes from their underlying implementation, DirectX, and their long-form syntax, e.g., “filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50).” DX Filters are not the same as SVG Filter Effects, though both use the CSS property name filter.

The most popular of these effects have since become CSS3 Working Drafts or Candidate Recommendations including opacity, gradients, and shadows. With IE10 supporting these CSS3 specifications, there’s no need for the legacy, IE-specific filters. One additional filter, AlphaImageLoader, was once popular to work around bugs with PNG transparency in IE6 but those bugs were fixed in IE7.

The following table lists the most popular DX Filters and their standards-based alternatives.

DX Filter	Standards-based Alternative
`Alpha`	`opacity`
`AlphaImageLoader`	`<img>` or `background-image` and related properties
`Gradient`	`background-image: linear-gradient()`
`DropShadow`	`text-shadow` or `box-shadow`
`Matrix`	`transform`, `transform-origin`

SVG Filter Effects in IE10 can be used to simulate some of the less common, more esoteric filters in the context of SVG.

Note: Because IE9 document mode supports both DX Filters and some of the standards-based alternatives, it is wise to avoid specifying both properties on the same element. Libraries such as Modernizr make it easy to use feature detection with CSS and avoid duplicate declarations.

Make the Move to Same Markup Now

The changes described above are effective as of IE10 Platform Preview 4, available for Windows Developer Preview.

More than any version of IE before, IE10 works with the same markup and code as other popular browsers (once any CSS vendor-specific prefixes are updated to include “-ms-”). Going the other way, the removal of these two legacy features means that content developed for IE10 should also work in other browsers.

Users benefit when all browsers can work with the same standards-based content.

—Ted Johnson, Lead Program Manager, Internet Explorer Graphics

Working with Binary Data using Typed Arrays

2011-12-01T23:03:05Z

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. But until recently, Web developers haven’t had direct access to the contents of these binary files or any other custom binary files.

This post explores how Web developers can break through the binary barrier using the JavaScript Typed Arrays API, and explore its use in the Binary File Inspector Test Drive demo.

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.

Binary File Inspector

The Binary File Inspector test drive demo highlights some of the new capabilities offered by this combination of new features. You can see the ID3 headers for music files, get a sense of the raw bytes in video files, and also see how additional file formats, like the PCX image file format, can be supported in the browser with the use of JavaScript and Canvas.

In the example above, an .mp4 video is rendered using a <video> element on the left, and the binary contents of the file are displayed on the right, both in HEX form, and as corresponding ASCII characters. In this example, you can see some characteristic elements of the MPEG file format, such as the “ftyp” of “mp4.”

Typed Arrays and ArrayBuffers

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

Each array type is a view over an ArrayBuffer. The ArrayBuffer is a reference to the raw binary data, but it does not provide any direct way to interact with the data. Creating a TypedArray view of the ArrayBuffer provides access to read from and write to the binary contents.

The example below creates a new ArrayBuffer from scratch and interprets its contents in a few different ways:


// Create an 8 byte buffer
var buffer = new ArrayBuffer(8);
 
// View as an array of Uint8s and put 0x05 in each byte
var uint8s = new Uint8Array(buffer);
for (var i = 0; i < 8; i++) {
uint8s[i] = 5; // fill each byte with 0x05
}
 
// Inspect the resulting array
uint8s[0] === 5; // true - each byte has value 5
uint8s.byteLength === 8;  // true - there are 8 Uint8s
 
// View the same buffer as an array of Uint32s  
var uint32s = new Uint32Array(buffer);
 
// The same raw bytes are now interpreted differently
uint32s[0] === 84215045 // true - 0x05050505 == 84215045

In this way, Typed Arrays can be used for tasks such as creating floating point values from their byte-level components or for building data structures that require a very specific layout of data for efficiency or interoperation.

Typed Arrays for Reading Binary File Formats

An important new scenario enabled by Typed Arrays is to read and render the contents of custom binary file formats that are not natively supported by the browser. As well as the various array types introduced above, Typed Arrays also provide a DataView object that can be used to read and write the contents of an ArrayBuffer in an unstructured way. This is well suited to reading new file formats, which are typically made up of heterogeneous mixes of data.

The Binary File Inspector demo uses DataView to read the PCX file format and render it using a <canvas> element. Here’s a slightly simplified version of what the demo does to read the file header, which includes information like the width, height, DPI, and bits-per-pixel of color depth.


var buffer = getPCXFileContents();
var reader = new DataView(buffer);
 
// Read the header of the PCX file
var header = {}
 
// The first section is single bytes 
header.manufacturer = reader.getUint8(0);
header.version = reader.getUint8(1);
header.encoding = reader.getUint8(2);
header.bitsPerPixel = reader.getUint8(3);
 
// The next section is Int16 values, each in little-endian
header.xmin = reader.getInt16(4, true);
header.ymin = reader.getInt16(6, true);
header.xmax = reader.getInt16(8, true);
header.ymax = reader.getInt16(10, true);
header.hdpi = reader.getInt16(12, true);
header.vdpi = reader.getInt16(14, true);

Code similar to the above can be used to add support for rendering a broad range of new data formats in the browser including examples like custom image formats, additional video file formats or domain-specific map data formats.

Getting Binary Data with XHR and File API

Before we can use the Typed Arrays APIs to work with the contents of files, we need to use browser APIs to get access to the raw data. For accessing files from the server, the XMLHttpRequest API has been extended with support for various “responseType”s. The “arraybuffer” responseType provides the contents of the requested server resource to JavaScript as an ArrayBuffer object. Also supported are the “blob,” “text” and “document” response types.


function getServerFileToArrayBufffer(url, successCallback) {
// Create an XHR object
var xhr = new XMLHttpRequest();
 
xhr.onreadystatechange = function () {
if (xhr.readyState == xhr.DONE) {
if (xhr.status == 200 && xhr.response) {
// The 'response' property returns an ArrayBuffer
successCallback(xhr.response);
} else {
alert("Failed to download:" + xhr.status + " " + xhr.statusText);
}
}
}
 
// Open the request for the provided url
xhr.open("GET", url, true);
 
// Set the responseType to 'arraybuffer' for ArrayBuffer response
xhr.responseType = "arraybuffer";
 
xhr.send();
}

In many cases files are provided by the user, for example as an attachment to an email in a Web mail application. The File API offers Web developers tools to read the contents of files provided via an <input> element, drag-and-drop or any other source that provides Blobs or Files. The FileReader object is used to read the contents of a file into an ArrayBuffer and, like the XHR object, is asynchronous to ensure that reading from the disk does not prevent the user interface from responding.


function readFileToArrayBuffer(file, successCallback) {
// Create a FileReader 
var reader = new FileReader();
 
// Register for 'load' and 'error' events
reader.onload = function () {
// The 'result' property returns an ArrayBuffer for readAsArrayBuffer 
var buffer = reader.result;
successCallback(buffer);
}
 
reader.onerror = function (evt) {
// The error code indicates the reason for failure
if (evt.target.error.code == evt.target.error.NOT_READABLE_ERR) {
alert("Failed to read file: " + file.name);
}
}
 
// Begin a read of the file contents into an ArrayBuffer
reader.readAsArrayBuffer(file);
}

Conclusion

Binary data is heavily used by Web browsers. With support for Typed Arrays, XHR2 and the File API in IE10, Web applications can now work directly with binary data, to manipulate byte-level data, to render additional binary data formats, and to extract data from existing media file formats. Try out the Binary File Inspector test drive demo, and take Typed Arrays for a spin in IE10.

—Luke Hoban, Program Manager, JavaScript

HTML5 for Applications: The Fourth IE10 Platform Preview

2011-11-29T19:23:41Z

An updated platform preview of IE10 for the Windows Developer Preview is now available for download. This IE10 preview adds even more support for HTML5 technologies, enabling richer Web applications with significantly improved performance. IE10’s hardware acceleration of technologies like SVG, CSS3 transforms and animations delivers faster rendering than other browsers, as highlighted in this short video.

See some of the new HTML5 capabilities, performance improvements in IE10.

With this fourth Platform Preview, developers can start working with more site-ready HTML5 technologies. You can read the full list here in the IE10 developer guide. Here are a few 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.

These foundational capabilities are what developers building native applications depend on: working with binary data and files, controlling selection and hit testing in application UI, and providing accessible video content with captioning. The features in this platform preview are available to Web pages now, and will be available to Metro style applications in Windows 8.

Building HTML5 Applications

This IE10 preview supports CORS (cross origin resource sharing) to allow developers to use XMLHttpRequest to safely request, share, and move data across applications on different domains. This is a common pattern developers use to bring data and services together from different applications. In this test drive demo, you can see how CORS is used along with XMLHttpRequest, the File API, and HTML5 progress control to deliver a smooth experience for uploading multiple files to a service on another domain.

Click here to see CORS used with XMLHttpRequest to upload files across domains.

Having the ability to work with binary data and files enables developers to build new kinds of applications and experiences on the Web. This IE10 preview supports blobBuilder from File API: Writer for working with large binary objects (blobs) and JavaScript typed arrays. In this test drive demo, you can see how different file types, including file types which are not natively supported in the browser like PCX files can be read, rendered, and even have their internal contents displayed.

Click here to see how JavaScript typed arrays used with File APIs to read and view binary files.

As developers build more sophisticated applications on the Web, they have more need for precise control over how end-users select parts of the page. With CSS user select support in IE10, developers can specify which elements in their page can be selected by the consumer when using their applications. In this this test drive demo, you can see how selection control is applied in a sample blog application using the user-select property in a CSS rule.

Click here to try CSS user-select to control end-user Web page selection.

Improving Same Markup for HTML5

We continue to contribute to the test suites under development at the HTML5 standards bodies, submitting 118 new tests to them, to further the goal of interoperability and same markup. You can view them at the IE Test Center as well. We strongly encourage all developers to write for HTML5 standards first by always using the HTML5 doc type <!DOCTYPE html> in your pages.

IE10 Preview 4 introduces an updated quirks mode that is more consistent and interoperable with the way quirks modes works in other browsers like Firefox, Chrome, Safari, and Opera. This updated quirks mode supports quirks for page layout, while allowing use of more up-to-date standards features like HTML5 elements for audio, video, canvas, and more.

You can find a full list of new functionality available to developers in the IE10 developer guide here. Download the Windows 8 developer preview to try this update to IE10. We look forward to continued engagement with the developer community and your feedback on Connect.

—Rob Mauceri, Group Program Manager, Internet Explorer

Evolving ECMAScript

2011-11-22T18:08:28Z

For the Web and Web applications to keep making progress, the programming language of the Web must continue to improve. Today’s JavaScript standard lacks a few basic objects and library helpers that are vital for building rich, world-wide Web applications. Last week at the Ecma TC39 meeting at Apple’s campus in Cupertino, Microsoft shared reference implementations of proposals to address gaps in Math, String, and Number functionality as well as Globalization.

To ensure that others in the community are also able to provide feedback, we’re releasing these reference implementations via HTML5 Labs. We encourage you to download the prototypes, and play with the sample Web pages which demonstrate their usage. Try it out, and let us know if you have any feedback or suggestions in the comments.

These proposals provide a great deal of much needed functionality by adding only a few objects and library helpers:

Math	String	Number
cosh, sinh, tanh acosh, asinh, atanh log2, log10, log1p, expm1 sign trunc	startsWith, endsWith contains repeat toArray reverse	isFinite isNaN isInteger toInteger

Number Format	Date Format	Collator
format ( number )	format ( date )	compare ( x , y )

When running on Windows 7, the prototype implementation supports 363 available Locales, 18 numbering systems, many date patterns, and includes support for the Gregorian, Islamic, Hebrew, Buddhist, Korean, and Japanese calendars.

Note that as with all previous releases of HTML5 labs, this is an unsupported component with an indefinite lifetime. This should be used for evaluation purposes only and should not be used for production level applications.

Details on the proposals

Computationally intensive Web applications quickly demonstrate that the built-in JavaScript math library is missing basic functions such as cosh and log10 that have been available in other programming language platforms such as C++, .NET, Java, and Python for years. String and Number can also benefit from some basic functionality common to all modern programming language platforms like testing if a String starts with a specific substring or checking that a Number is an Integer. These are addressed in the proposed additions to the Math, String, and Number APIs.

Web applications have been harder to globalize than native applications because JavaScript has not provided native date and currency formats that the underlying OS has. The drop includes a reference implementation of the proposed Globalization APIs which enable applications to deal correctly with locale specific number and date formats and strings in other languages. With this library, developers can show date and numbers in the specified locale and set collation options for the purposes of sorting and searching strings. Developers can also set date and number formats to use alternate calendars like the Islamic calendar or to show a number as the Chinese Yuan currency. This means that JavaScript applications no longer have to round trip to the server to properly display locale specific dates and numbers, which ultimately translates to faster interactive applications for end-users.

The Role of JavaScript in Improving the Web

These proposals are just part of a larger story of the evolution of JavaScript. In 1998, a complex JavaScript application was a few dozen lines of code. By 2008, leading-edge Web applications like Hotmail, Gmail, and CNN.com included hundreds of thousands of lines of JavaScript. Today, there are Web applications with a million lines of JavaScript. These Web applications look more and more like the applications we run on our desktops, with fewer page transitions and more processing occurring on the client, relying on the server for the occasional burst of data rather than frequent expensive server round-trips.

JavaScript is evolving to meet these needs, and it’s important that it does so in a way that respects everything that developers have invested in their own Web sites and their skill sets by focusing on compatibility and incremental introduction of new functionality.

We strongly believe in the community process driven through TC39 as the keepers of these principles. TC39’s work on ECMAScript 5 is a solid step forward for JavaScript in the Web platform. Some of the principles used to design ES5 provide a good template for future versions of the JavaScript standard:

Preserving the fundamental syntax of tomorrow’s “text/javascript” to ensure continuity in the developer skillset and deliver seamless compatibility between today’s JavaScript and tomorrow’s JavaScript.
Provide features that are additive and pay-as-you-go, to help developers get more value with minimal new effort or learning.
Strive for features to be locally detectable, to help developers build applications that work on the broadest range of browsers.
Where possible, allow for a possibly slower library alternative (or ‘polyfill’) for browsers that do not yet support the feature.

We are working with TC39 on applying these same approaches as broadly as possible for the next revision of the ECMAScript standard.

Furthering the JavaScript Runtime

Looking ahead, there is a great opportunity for JavaScript to continue to evolve the core runtime. From talking to developers building HTML5 Web sites, we understand that these areas represent the most value:

Better integration with the native browser platform. With the introduction of recent APIs in HTML5, such as the File API, Canvas Pixel Array, and XHR2, there is an increasing need for JavaScript to have better interoperability with binary data streams. The need is so acute that there are many proposals across many Web communities and they are starting to converge in the Binary Data proposal. The Binary Data proposal aims to improve usability and expressivity for the use cases above.
Improved site load, especially for larger sites. JavaScript today would benefit from a standardized pattern for loading units of code consistently, in a way that won’t cross-contaminate the global scope, with a predictable loading order. A solution would benefit from being integrated into the runtime to ensure efficient page load times in coordination with the other browser subsystems. The modules and module loader proposals look like promising starting points which we aim to make available to scripts in “text/javascript” without needing to introduce breaking changes.
Execution performance and responsiveness. Libraries for interacting with intrinsic JavaScript types should continue to be filled out. As the String and Math extensions proposals suggest, JavaScript would benefit from an intrinsic string search like startsWith or contains and additions to the set of math functions to match other client platforms. JavaScript would also benefit from a format capability to replace variables in strings. Like ES5, when integrated into the runtime, these features can provide clear performance improvements for many real-world Web sites with minimal developer effort.

Larger Scale JavaScript

When building applications on a larger scale, developers depend upon high quality authoring and tooling experiences. For applications of this scale, higher-level abstractions such as classes and other common programming patterns can be the basis for better tooling.

The Office Web Applications, which consist of hundreds of thousands of lines of JavaScript, are written primarily in a variant of Script# that is then compiled into JavaScript that can be executed on today’s browsers. Other toolsets like the Google Web Toolkit take similar approaches. More recently, transforming compiler libraries like Traceur and CoffeeScript show how syntax additions to JavaScript and even completely alternative syntaxes can be supported in today’s browsers, without changes to the runtime.

Some examples, like Dart, portend that JavaScript has fundamental flaws and to support these scenarios requires a “clean break” from JavaScript in both syntax and runtime. We disagree with this point of view. We believe that with committee participant focus, the standards runtime can be expanded and the syntactic features necessary to support JavaScript at scale can be built upon the existing JavaScript standard.

The ECMAScript Standards Process

For the past couple of years, TC39 has been accepting proposals for new features to add to the ECMAScript standard. As we look at the current work being pursued in the committee, we see two categories of investments:

Work on the JavaScript runtime. This work (binary data, private names, globalization, etc.) offers valuable new capabilities to the platform, and can be made available in a feature-detectable way under the existing JavaScript script tags, allowing for smooth and near-term adoption of these features.
Work on JavaScript syntax. This work (let, destructuring, iterators, object literals, etc.) adds to the expressiveness of the JavaScript language, but also requires heavier weight versioning for developers, such as opting in to new script tags.

We prioritize the JavaScript runtime because it fundamentally limits the capabilities of the Web. We participate in the standards body to make sure these features can become ubiquitous tools developers can depend upon.

Looking forward to the future of the Web

As the Web transitions from Web sites to Web apps, and as Web developers build new experiences in HTML5, we know that JavaScript will also need to make this transition without compromising its simplicity, flexibility, or performance. An approach that enables broad, incremental adoption by the Web developer community has the highest chance of success. Many of the ideas coming forward in the community support these ideas, and Microsoft will continue to work in the ECMA TC39 standards body to refine proposals for the core JavaScript runtime advancements. Most importantly, progress on the standard should be based on a dialog with Web developers on what is most needed in the Web platform.

We welcome your feedback and look forward to continuing to participate in this dialog.

—Shanku Niyogi, Amanda Silver, John Montgomery, Luke Hoban, Steve Lucco - JavaScript Team

Adding Personality with CSS3 Transitions and Animations

2011-11-21T22:33:02Z

Advancements like high-performance compiled JavaScript and hardware-accelerated rendering of HTML5 and CSS3 in Internet Explorer 9 and 10 allow Web developers to create richer and richer experiences. Two related features, CSS3 Transitions and CSS3 Animations, give Web developers a declarative way to add personality to Web page interactions easily.

This blog post describes these two features as implemented in IE10 in the Windows Developer Preview and Windows 8 Metro style apps written in HTML.

Same Markup—Except for the Vendor Prefix

Like nearly all features new to IE9 and IE10, CSS3 Transitions and Animations are standards-based features implemented with “same markup” interoperability in mind. However, unlike features such as border-radius, box-shadow, and text-shadow, which are part of stable W3C specifications, Transitions and Animations are still at a specification stage where vendors prefix their implementations. Therefore, in this case, “same markup” must be qualified as “same markup except for the vendor prefix.”

Many other writers have written about these features, including Rich Bradshaw’s excellent article Using CSS3 Transitions, Transforms and Animation. Many articles that discuss these features use only the -webkit- prefix in their examples. Users wishing to experiment in other browsers need to copy the example and change -webkit- to -ms-, -moz-, or -o-, as appropriate. Bradshaw’s examples are an exception; they already work in IE10!

Transitions

The function of CSS3 Transitions is very straightforward: smoothly change the computed value of a CSS property from its old value to its new value. Moreover, changes in value resulting from changes in an element’s CSS class or pseudo-class also trigger transitions.

Consider the following markup:

img {
opacity: 1;
transition-property: opacity;
transition-duration: 2s;
transition-delay: 0s;
transition-timing-function: linear;
}
img:hover {
opacity: 0;
}

The effect of this is that when the user moves his or her mouse over the image, the image will fade out smoothly over 2 seconds starting immediately, as illustrated below (I’ve added a dropped shadow on a wrapping element to illustrate the endpoint).

Fading one image to nothing over 2 seconds

The transition properties that cause this to occur are:

transition-property – specifies which CSS properties are to be transitioned. The keyword “all” causes all animatable properties to transition when changed. The default value is “all.”
transition-duration – the time, in seconds or milliseconds, of the transition, starting after the transition-delay. The default value is zero, meaning that the transition is immediate.
transition-delay – the time, in seconds or milliseconds, after the value is changed before the transition starts. The time may be negative, in which case the transition starts part way through its duration. The default value is zero.
transition-timing-function – describes how the intermediate values of a transition are calculated. This allows a transition to change speed over its duration. The underlying function is a cubic Bézier curve; keywords match common functions. The default value is the keyword “ease,” a function that starts fast and slows down toward the end.

Fading one image to nothing is a simple example. Let’s say we wanted to fade one image to another, as illustrated below.

Fading from one image to another over 2 seconds

The following markup accomplishes this (except that vendor prefixes must precede all the transition properties).

HTML Fragment

<div id="imageWrapper">
<img id="backImage" src="imageB.jpg" /><img id="frontImage" src="imageA.jpg" />
</div>

CSS Fragment

#imageWrapper {
display: inline-block;
width: 400px;
height: 267px;
box-shadow: 2px 2px 5px 0px gray;
position: relative;
}
#imageWrapper img {
width: 400px;
height: 267px;
position: absolute;
transition-property: opacity;
transition-duration: 2s;
transition-timing-function: linear;
}
#imageWrapper #frontImage, #imageWrapper:hover #backImage {
opacity: 1;
}
#imageWrapper:hover #frontImage, #imageWrapper #backImage {
opacity: 0;
}

Here’s a working version of the markup above:

Move your mouse over the image to fade it to another.

Simple transitions, such as the one above, are moderately easy to simulate in JavaScript. The benefits of CSS Transitions are their declarative definitions, making them easier than script, and they run—at least in IE10—asynchronously to the main processing thread resulting in smoother transitions and sites that are more responsive.

An interactive demo of CSS3 Transitions is available on the IE Test Drive site. The demo works in all browsers that support CSS3 Transitions, including IE10 in the Windows Developer Preview.

Animations

CSS3 Animations are similar to CSS3 Transitions in that they smoothly animate a CSS value over time. The differences are (a) how one specifies the properties to animation, (b) how one triggers the animation and (c) the complexity of the animation possible.

You define animations using a CSS “keyframes” at-rule. A simple keyframes rule that matches the fade out behavior of the transition above would be:

@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

We apply this to our image with this CSS:

img {
animation-duration: 2s;
animation-delay: 0s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
img:hover {
animation-name: fadeOut;
}

Many of these properties are familiar from our discussion of transitions. The new ones are:

animation-fill-mode – the “forwards” value of this property means to maintain the “to” property values from the end of the animation going forward in time. The default value of this property is “none,” which causes the properties to return to their non-animated values at the end of the animation. (It’s possible to construct the CSS above without using animation-fill-mode. Simply add “opacity: 0;” to the img:hover rule to maintain the ending opacity at 0.)
animation-name – setting the animation-name property triggers the animation. When the animation-name property is set, the animation-delay time starts counting down. When animation-delay reaches zero, the animation begins and continues for the animation-duration. The animation-timing-function behaves the same as the transition-timing-function described above.

The power of CSS3 Animations lies in the ability to specify multiple keyframes with properties and intermediate values that don’t have to stay within the bounds of the start and end values. In CSS3 Transitions, intermediate values always progress from the start to the end; they will never go outside that range. Animations do not have that restriction.

This makes it possible to program a “bounce” such as shown in the markup and example below.

#bouncingImage {
width: 400px;
height: 267px;
box-shadow: 2px 2px 5px 0px gray;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
#bouncingImage:hover {
animation-name: zoomInBounce;
}
 
@keyframes zoomInBounce {
from {
transform: scale(1);
}
30% {
transform: scale(1.4);
}
40% {
transform: scale(1.15);
}
50% {
transform: scale(1.35);
}
60% {
transform: scale(1.2);
}
70% {
transform: scale(1.3);
}
80% {
transform: scale(1.225);
}
90% {
transform: scale(1.275);
}
to {
transform: scale(1.25);
}
}

Move your mouse over the image to zoom it with a bounce effect.

An interactive demo of CSS3 Animations is available on the IE Test Drive site. The demo works in all browsers that support CSS3 Animations, including IE10 in the Windows Developer Preview.

Building Your Site’s Personality

The two examples shared in this post are unlikely to be things you adopt on your site. Yet, well-designed transitions and animations are becoming an expected part of a modern Web experience. Windows 8 Metro style uses fluid and subtle animations extensively to help users better understand their interactions with the system. These literally make Windows 8 Metro style apps feel more responsive to touch.

We hope the examples here, the IE Test Drive demos, and the growing number of articles and examples elsewhere on the Web help you explore this new technology and add personality to your Web site.

—Ted Johnson, Lead Program Manager for Graphics, Internet Explorer

Typing with Speed and Accuracy in IE10

2011-11-08T17:00:02Z

Typing quickly and accurately is a critical part of the user experience for any piece of software. When using a device without a physical keyboard, providing a great text input experience is even more important. Windows 8 provides several capabilities to make text input great on any device, and spellchecking is one of them.

Spellchecking in Windows 8 allows customers to identify misspelled words while they are entering text, have commonly misspelled words fixed automatically, and take corrective action on others. In Windows 8, spellchecking support is available to applications across the entire operating system, including IE10. Of course, spellchecking will also be available as an IE10 browser feature on all supported versions of Windows (including Windows 7).

Auto-correction

IE10 has the first browser-based implementation of auto-correct.

In some cases, a misspelled word is so common that it is better to just correct the word immediately, rather than wait for you to review the error later In the rare case that auto-correct changes something that you didn’t want changed, you can undo the change via CTRL+Z (Undo) using the keyboard, or bring up the auto-correction context menu using the mouse. In addition to using the mouse, the auto-correction menu can be activated via the keyboard by moving the insertion point inside of the word and pressing SHIFT+F10 (that key combo works to trigger any context menu). From the auto-correction menu you can also prevent the word from being auto-corrected in the future.

For auto-corrected words, press CTRL+Z to undo the change, or bring up a context menu for additional actions

You can try out auto-correct in my test drive demo; it includes a short list of some of the common misspelled words that will be auto-corrected.

Word Identification and Corrective Actions Menu

No spellchecking experience would be complete without the red squiggles you’re familiar with from your favorite Office programs.

By default, as you enter text into any HTML textarea element (a multi-line input box) or any region of editable HTML content, the spellchecking engine will be used to check the last entered word. The word is checked against a dictionary associated with the current keyboard input language. If that word is misspelled or repeated it will be identified as a potential error using the familiar red squiggly underline. The identification of potential misspelled or repeated words is done in the background so that it does not slow your text entry.

The corrective actions menu has suggested alternate words and options to add the misspelled word to your custom dictionary or ignore the word. This works across all supported languages, including Portuguese (shown here).

The corrective actions menu will offer the most likely replacements for the identified word. You can replace the identified word with the suggested word in one step by selecting it from this menu. In addition you may choose to:

Add to dictionary. Your Windows user account has a built-in custom dictionary (which is initially empty). You may add frequently used words to this dictionary (in my case, I always need to add my last name). In Windows 8 this custom dictionary will be roamed to any other Windows 8 machine that you use via the cloud.
Ignore. The word will no longer be identified as a potentially misspelled word on this page. After you navigate away from the current page, the list of ignored words is cleared, and will again be flagged as a potential error.

Spellchecking in Your Language

Each of these spellchecking facilities (auto-correction, and word identification with corrective action menus), use the spellchecking dictionaries installed on your local PC. In the Windows Developer Preview, all of the dictionaries for all the supported languages are pre-installed. Many of the languages also include different language reform variants that you can toggle between in the re-designed Language control panel. All spellchecking options can be managed in the language control panel in Windows 8. On Windows 7, the spellchecking management experience for IE10 will be provided by the browser instead; I'll describe this in more detail in a future post.

The Windows 8 language options dialog for Portuguese (Brazil), including language reform variants

Internet Explorer 10 supports spellchecking in many common languages. View a list of supported spellchecking dictionaries and language/locales, including language reform variants.

There are sometimes needs for highly specialized spellchecking dictionaries, for example, in specific industries with their own vernacular or for languages not commonly spoken such as Latin. To support these scenarios, the Windows 8 spellchecking facility supports 3rd party spellchecking engines. When installed, IE10 and all other Windows components will use the installed 3rd party spellchecking engine.

Web Developer Options

As alluded to earlier, textarea and contenteditable elements are spellchecked by default; single-line input boxes (input type=text) are not checked by default since many sites use them for username fields or other purposes not suitable for spellchecking. We tried to pick good defaults, but if your Web site needs to change any of these defaults, it can. The ‘spellcheck’ attribute defined by HTML5 allows you as a developer to override the default spellchecking behavior for an element and all of its children.

By adding the spellcheck=false attribute value on any element, you disable spellchecking for all textarea, contenteditable, and input type=text elements that are children of the given element (including the element itself). Setting spellcheck=true enables spellchecking in the same scenario, and can also be used to override the spellchecking setting from a parent in the element tree. For example, if you want spellchecking disabled for all textarea elements on a page, with one exception, you can add the spellcheck=false attribute value to the HTML element, and then add a spellcheck=true attribute to the textarea element that is the exception.

Try out this capability using the spellchecking IE10 test drive demo.

The spellcheck attribute gives Web developers the flexibility to tailor the experience to the needs of their users.

Spellchecking and Multiple Languages

We know a lot of our customers speak and write in more than one language. It’s important that the spellchecking engine use the right language when you are entering text, and that it is easy to switch between languages when necessary.

In IE10, the selection of the spellchecking language is determined by evaluating the following sources (in priority order):

The HTML lang attribute. The Web developer knows the design and intent of the site and can control which parts of the page are associated with which language (in multi-language scenarios).
The keyboard input language. Windows 8 makes it easy for users to specify the languages they are interested in and to switch between them on the fly. To switch the language used by the spellchecking engine while entering text, you simply change the input language. With two or more languages configured (or two or more keyboard layouts) simply press the Windows key + spacebar. On the touch keyboard, there is a key to toggle the input language as well.
Window’s current display language (the language you are using to run Windows).

Switch between keyboard input languages via Win+Space or by the language key on the touch keyboard

Spellchecking is an IE10 feature; while it is seamlessly integrated into Windows 8, we want to ensure that all users of IE10 benefit from this feature, including our users of IE10 on Windows 7. I’ll share more about the IE10 on Windows 7 experience in a future post.

Spellchecking in the browser will improve the accuracy and speed at which you input text on the Web. I’ve really enjoyed having it available and I know that the people with whom I correspond online also appreciate it!

—Travis Leithead, Program Manager, Internet Explorer

HTML5 History in IE10

2011-10-31T22:42:13Z

Building fast and functional sites is a challenge with which most Web developers are familiar. Loading a new page every time the user clicks a link is slow. Fetching all content dynamically effectively disables the back button. Working with hashes is better, but still not ideal. Internet Explorer 10 in the Windows Developer Preview eliminates the compromise by adding support for HTML5 History. The pushState, replaceState, and popstate APIs provide fine-grained control over the behavior of the back button and the URL presented to the user for dynamic content. Together these APIs help you improve the performance of your site without sacrificing usability.

If you’re not already familiar with the HTML5 History APIs, think of pushState as being the dynamic equivalent of navigating to another page. Similarly, replaceState is much like location.replace. The difference is these APIs leave the current page intact when updating the session history by storing states instead of pages. Both pushState and replaceState take three parameters: a data object, a title, and an optional URL.

history.pushState(data, title, url);
history.replaceState(data, title, url);

Note that the title parameter to pushState and replaceState is ignored by most browsers, including IE10. If you want, you can still provide this information since future browsers may expose it as part of their history UI.

Setting Custom URLs

The URL parameter to pushState and replaceState can be used to update the URL of the page without navigating. To illustrate, consider you’ve loaded “http://www.contoso.com/index.html.” Using hash changes, you can only append to the URL:

// Change to "http://www.contoso.com/index.html#about.html"
location.hash = "about.html";

But with pushState and replaceState you can point to a completely different page on your site without actually going there:

// Change to "http://www.contoso.com/about.html"
history.pushState(null, "About", "/about.html"); 

Make sure your server can handle all dynamic URLs you create so things like favorites still work. You can also add some data to the state object so you don’t have to parse the full URL later to restore the state:

history.pushState("about.html", "About", "/about.html");

The protocol, hostname, and port must match the current URL, but the path, query, and fragment are fair game for customization. This enables associating dynamic states with URLs that are easily backed by the server and work even when script is disabled. Ultimately, this lets you dynamically fetch and display only the data that changes from page to page while keeping the user experience intact.

Restoring Saved States

You should restore state after navigating the history (for example, when the user presses the back button) or reloading the page. Restoring state is accomplished by listening to the popstate event. The popstate event fires when state changes as a result of history navigation. At this point the data object for the destination state can be retrieved via history.state. In cases where the page is reloaded the popstate event will not fire, but history.state can still be accessed at any time during or even after the load. Thus code like the following can restore state at the appropriate times:

function init() {
/* ... */
// Handle page load and reload
loadState();
// Listen for history navigations (e.g. the back button)
window.addEventListener("popstate", loadState, false);
}
 
function loadState() {
// Grab the data for the current state so we can restore it
var state = history.state;
/* ... */
}
 
init();

Storing Complex, Dynamic Data

The data object stored in a state can be more than a string. Custom JavaScript objects and even some native types such as ImageData can also be used. The data provided is saved using the structured clone algorithm, which preserves complex relationships such as cycles and multiple references to the same object. This makes saving and restoring even complex objects a breeze as illustrated in this simple demo. In the demo, snapshots of a canvas are captured to create an undo stack using code like the following:

function init() {
/* ... */
// Handle page load and reload
loadState();
// Listen for history navigations (e.g. the back button)
window.addEventListener("popstate", loadState, false);
}
 
/* ... */
 
function stopDrawing() {
// Take a snapshot of the current state as an ImageData instance
var state = context.getImageData(0, 0, canvas.width, canvas.height);
history.pushState(state, "");
/* ... */
}
 
function loadState() {
// Grab the data for the current state so we can restore it
var state = history.state;
/* ... */
if (state) {
// Restore the canvas to our saved ImageData state
context.putImageData(state, 0, 0);
}
}

To change this to keep track of the current state without tracking each change, you can use replaceState instead of pushState.

Size Considerations

HTML5 History makes pushing large amounts of data onto the stack easy if you’re not careful. For example, the undo demo above stores ~0.5MB per state and could easily use more if the canvas was larger. This data will consume memory as long the associated state entry remains in the session history, which can be long after the user leaves your site. The more data you store, the sooner a browser may start clearing your entries out to save space. In addition, some browsers also enforce a hard limit on the amount of data that can be stored with a single call to pushState or replaceState.

Cross-Browser Considerations

As always, use feature detection to handle differences in support across browsers. Since most of HTML5 History involves events and properties, the only new parts that truly require detection are calls to pushState and replaceState:

function stopDrawing() {
var state = context.getImageData(0, 0, canvas.width, canvas.height);
if (history.pushState)
history.pushState(state, "");
/* ... */
}

Such detection will at least keep your script from failing in older browsers. Depending on your scenario, you may want to start with full-page navigations and upgrade to dynamic content when HTML5 History is supported. Alternatively, you can use a history framework or polyfill to keep the back button working, but keep in mind that not everything can be emulated. For example, dynamic control over the path and query components of an URL can only be achieved via pushState and replaceState.

Note that some browsers support an earlier draft of HTML5 History with two notable differences from the current draft:

The popstate event fires even during page load
The history.state property does not exist

In order to support these browsers, you can fall back to reading the state information off the popstate event itself.

Wrap Up

Overall, the HTML5 History APIs provide a great deal of flexibility for building responsive and usable Web sites. With some care taken for legacy browsers, these APIs can be used today to great effect. Start testing them with your site in IE10 on the Windows Developer Preview and send feedback via Connect.

—Tony Ross, Program Manager, Internet Explorer