When the IE team heard that Google had bypassed user privacy settings on Safari, we asked ourselves a simple question: is Google circumventing the privacy preferences of Internet Explorer users too? We’ve discovered the answer is yes: Google is employing similar methods to get around the default privacy protections in IE and track IE users with cookies. Below we spell out in more detail what we’ve discovered, as well as recommendations to IE users on how to protect their privacy from Google with the use of IE9's Tracking Protection feature. We’ve also contacted Google and asked them to commit to honoring P3P privacy settings for users of all browsers.

We’ve found that Google bypasses the P3P Privacy Protection feature in IE. The result is similar to the recent reports of Google’s circumvention of privacy protections in Apple’s Safari Web browser, even though the actual bypass mechanism Google uses is different.

Internet Explorer 9 has an additional privacy feature called Tracking Protection which is not susceptible to this type of bypass. Microsoft recommends that customers who want to protect themselves from Google’s bypass of P3P Privacy Protection use Internet Explorer 9 and click here to add a Tracking Protection List. Customers can find additional lists and information on this page.

Background: Google Bypassing Apple’s Privacy Settings

A recent front page Wall Street Journal article described how Google “bypassed Apple browser settings for guarding privacy.” The editor and CEO of Business Insider, a business news and analysis site, summarized the situation:

Google secretly developed a way to circumvent default privacy settings established by a… competitor, Apple… [and] Google then used the workaround to drop ad-tracking cookies on the Safari users, which is exactly the sort of practice that Apple was trying to prevent.

Third-party cookies are a common mechanism used to track what people do online.  Safari protects its users from being tracked this way by a default user setting that blocks third-party cookies.  Here’s Business Insider’s summary:

What Safari does NOT allow, by default, is for third-party … cookies on users' computers without their permission. It is these ad-tracking cookies that cause lots of Internet users to freak out that their privacy is being violated, so it's understandable that Apple decided to block them by default.

But these default settings have created a problem for Google, at least with respect to its goals for its advertising business.

Google’s approach to third-party cookies seems to have the side effect of Safari believing they are first-party cookies.

What Happens in IE

By default, IE blocks third-party cookies unless the site presents a P3P Compact Policy Statement indicating how the site will use the cookie and that the site’s use does not include tracking the user. Google’s P3P policy causes Internet Explorer to accept Google’s cookies even though the policy does not state Google’s intent.

P3P, an official recommendation of the W3C Web standards body, is a Web technology that all browsers and sites can support. Sites use P3P to describe how they intend to use cookies and user information. By supporting P3P, browsers can block or allow cookies to honor user privacy preferences with respect to the site’s stated intentions.

It’s worth noting that users cannot easily access P3P policies. Web sites send these policies directly to Web browsers using HTTP headers. The only people who see P3P descriptions are technically skilled and use special tools, like the Cookie inspector in the Fiddler tool. For example, here is the P3P Compact Policy (CP) statement from Microsoft.com:

P3P: CP="ALL IND DSP COR ADM CONo CUR CUSo IVAo IVDo PSA PSD TAI TELo OUR SAMo CNT COM INT NAV ONL PHY PRE PUR UNI"

Each token (e.g. ALL, IND) has a specific meaning for a P3P-compliant Web browser. For example, ‘SAMo’ indicates that ‘We [the site] share information with Legal entities following our practices,’ and ‘TAI’ indicates ‘Information may be used to tailor or modify content or design of the site where the information is used only for a single visit to the site and not used for any kind of future customization.’ The details of privacy are complex, and the P3P standard is complex as well. You can read more about P3P here.

Technically, Google utilizes a nuance in the P3P specification that has the effect of bypassing user preferences about cookies. The P3P specification (in an attempt to leave room for future advances in privacy policies) states that browsers should ignore any undefined policies they encounter. Google sends a P3P policy that fails to inform the browser about Google’s use of cookies and user information. Google’s P3P policy is actually a statement that it is not a P3P policy. It’s intended for humans to read even though P3P policies are designed for browsers to “read”: 

P3P: CP="This is not a P3P policy! See http://www.google.com/support/accounts/bin/answer.py?hl=en&answer=151657 for more info."

P3P-compliant browsers interpret Google’s policy as indicating that the cookie will not be used for any tracking purpose or any purpose at all. By sending this text, Google bypasses the cookie protection and enables its third-party cookies to be allowed rather than blocked. The P3P specification (“4.2 Compact Policy Vocabulary”) calls for IE’s implemented behavior when handling unknown tokens: “If an unrecognized token appears in a compact policy, the compact policy has the same semantics as if that token was not present.”

Similarly, it’s worth noting section “3.2 Policies” from the P3P specification:

3.2 Policies

In cases where the P3P vocabulary is not precise enough to describe a Web site's practices, sites should use the vocabulary terms that most closely match their practices and provide further explanation in the CONSEQUENCE field and/or their human-readable policy. However, policies MUST NOT make false or misleading statements.

P3P is designed to support sites that convey their privacy intentions. Google’s use of P3P does not convey those intentions in a manner consistent with the technology. 

Because of the issues noted above, and the ongoing development of new mechanisms to track users that do not involve cookies, our focus is on the new Tracking Protection technology.

Next Steps

After investigating what Google sends to IE, we confirmed what we describe above. We have made a Tracking Protection List available that IE9 users can add by clicking here as a protection in the event that Google continues this practice. Customers can find additional lists and information on this page.

The premise of Tracking Protection in IE9 is that tracking servers never have the opportunity to use cookies or any other mechanism to track the user if the user never sends anything to a tracking server. This logic underlies why Tracking Protection blocks network requests entirely. This new technology approach is currently undergoing the standardization process at the W3C.

This blog post has additional information about IE’s cookie controls, and shows how you can block all cookies from a given site (e.g. *.google.com) regardless of whether they are first- or third-party. This method of blocking cookies would not be subject to the methods Google used. We recommend that users not yet running IE9 take steps described in this post.

Given this real-world behavior, we are investigating what additional changes to make to our products. The P3P specification says that browsers should ignore unknown tokens. Privacy advocates involved in the original specification have recently suggested that IE ignore the specification and block cookies with unrecognized tokens. We are actively investigating that course of action.

―Dean Hachamovitch, Corporate Vice President, Internet Explorer

With Windows 8, you have an unprecedented choice of devices for browsing the Web, from large desktop screens to small slates. In order to accommodate this range of devices, the browser must be able to scale and layout the Web at many different screen sizes and dimensions. We've previously blogged about some of the features in IE that support these scenarios. Sub-pixel positioning (of text and layout) is one of the core platform technologies which enable Web pages to look beautiful and consistent at any scale.

In this post, we describe changes made in IE10 to better support sub-pixel positioning through the CSS-OM.

Web developers can build beautiful layouts through a variety of platform technologies. Generally, developers use CSS style sheets to describe the layout a Web site. In some scenarios, Web developers also depend on JavaScript code to measure, align, or position elements of a Web page with pixel-perfect precision. For example, some online editors carefully position an edit box exactly over the top of existing content so that it only appears as if you are directly editing the existing content. Scenarios such as this one may use the CSS object model (CSS-OM) APIs to read and/or set element position. The CSS-OM is a set of JavaScript APIs for programmatically manipulating CSS.

Measuring and aligning layout elements using the CSS-OM APIs can be problematic because of the way that those APIs round or truncate sub-pixel positioned values to whole-pixel numbers.

A Quick Note about Pixel-perfect Layouts

In general, pixel-perfect layouts on the Web tend to conflict with the goals of enabling accessible, compatible, and adaptable content, and consequently are not a best practice. The following collage illustrates some of the bugs that can occur when the Web designer attempts to create a pixel-perfect design but unexpected Web platform differences cause their designs to go awry.

Examples of pixel-perfect designs gone wrong

When using the CSS-OM to dynamically generate a layout, Web developers should allow for a few pixels of potential error. Better yet, IE10 provides several new layout options that developers can use to better achieve many of these desired layouts without requiring pixel-perfect alignment using the CSS-OM.

An Illustration

To illustrate how the CSS-OM APIs may cause subtle positioning problems, consider a simple example. Sub-pixel positioning allows four boxes to be evenly distributed inside of the container, despite the container's size not being evenly divisible by four.

Consider the following HTML markup fragment:

with this partial CSS markup:

Now, let’s add a function that runs on load and reports the widths of these items:

The result of running this markup and code in IE9 is something like this:

content 1content 2content 3content 4 content 1 offsetWidth = 139
content 2 offsetWidth = 139
content 3 offsetWidth = 139
content 4 offsetWidth = 139
Total calculated offsetWidth = 556
Actual container width = 554

Note that summing the values returned by the CSS-OM API offsetWidth results in the total calculated offsetWidth differing from the actual container width by two pixels, due to rounding that occurs in the offsetWidth of the individual div elements.

The results in other browsers show a similar discrepancy, though sometimes the total is less than the actual and sometimes greater.

When the rounding/truncation leads to a sum total that overflows the container size (as illustrated), content will start to wrap or cause unwanted scroll-bars to appear. Additionally, many containers are sized according to the text and the font used to render the text, and those font metrics may be different across browsers or alternate fonts may be selected if the requested font isn't available.

The offsetWidth API, along with many other widely used CSS-OM properties (most dating back to IE4 in 1997), provide a convenient and fast way to extract integer pixel values for an element from a variety of different coordinate systems. All major browsers implement most of these APIs for compatibility and they are also part of the CSS-OM View module, a W3C draft standard.

New browser features continue to demonstrate the shortfall of limiting CSS-OM properties to whole-value pixels. For example, features like SVG and CSS 2D/ 3D Transforms allow an element's dimensions to easily fall between pixels.

Addressing the Problem

Recognizing this limitation (in part), the W3C CSS-OM View spec describes the coordinates returned via the getBoundingClientRect() API to be floats; in other words, in values that can represent sub-pixel precision. (getBoundingClientRect() is another CSS-OM API that provides an element's bounding-box position and dimension using the same origin as the offsetWidth API.)

In IE10 we've updated the getBoundingClientRect() API to return sub-pixel resolution by default in IE10 standards mode in order to be interoperable with other browsers and align with the W3C standard.

Updating our example above to report the width component of the rectangle returned by getBoundingClientRect(), IE10 now reports these fractional values:

content 1content 2content 3content 4 content 1 offsetWidth = 139, getBoundingClientRect().width = 138.5
content 2 offsetWidth = 139, getBoundingClientRect().width = 138.5
content 3 offsetWidth = 139, getBoundingClientRect().width = 138.5
content 4 offsetWidth = 139, getBoundingClientRect().width = 138.5
Total calculated offsetWidth = 556
Total calculated getBoundingClientRect().width = 554
Actual container width = 554

Taking Sub-pixel Values Everywhere

In addition to getBoundingClientRect, we also report sub-pixel position for mouse/pointer events in IE10 standards mode by default. It's only possible for the mouse/pointer to land between pixels when the zoom factor is set to a value other than 100%. Specifically, the affected mouse/pointer APIs are:

• MouseEvent.offsetX/Y
• MouseEvent.layerX/Y
• MouseEvent.clientX/Y
• MouseEvent.pageX/Y
• MouseEvent.x/y

To continue our commitment to compatibility with legacy Web pages (pages which may not be prepared to handle sub-pixel values from the CSS-OM in general), IE10 continues to reports whole-value pixel units by default for the other CSS-OM properties. These APIs are:

• Element.clientHeight
• Element.clientWidth
• Element.clientLeft
• Element.clientTop
• Element.scrollTop
• Element.scrollLeft
• Element.scrollWidth
• Element.scrollHeight
• HTMLElement.offsetWidth
• HTMLElement.offsetHeight
• HTMLElement.offsetTop
• HTMLElement.offsetLeft
• TextRange.offsetLeft
• TextRange.offsetTop

However, if necessary, IE10 now allows Web developers to enable sub-pixel positioned values from the above-listed CSS-OM properties as well. Use of this special feature requires that the site run in IE10 Standards mode and opt-in by setting the following property on the document object:

When enabled by setting document.msCSSOMElementFloatMetrics to true, all CSS-OM APIs in the previous list will begin reporting their values in sub-pixel precision that will reflect exactly the calculations used internally by the layout and rendering engine. Note that JavaScript will convert 1.00 into 1 so you may not always see a decimal point in returned values.

Going back to our example and setting document.msCSSOMElementFloatMetrics to true results in this in IE10:

content 1content 2content 3content 4 content 1 offsetWidth = 138.5, getBoundingClientRect().width = 138.5
content 2 offsetWidth = 138.5, getBoundingClientRect().width = 138.5
content 3 offsetWidth = 138.5, getBoundingClientRect().width = 138.5
content 4 offsetWidth = 138.5, getBoundingClientRect().width = 138.5
Total calculated offsetWidth = 554
Total calculated getBoundingClientRect().width = 554
Actual container width = 554

Note the fractional values returned by offsetWidth and that all totals now match.

Summary

It is sometimes helpful (and, in rare cases, necessary) to be able to use the CSS-OM properties for pixel-perfect layout calculation. When using the CSS-OM, be aware of the whole-pixel-reporting characteristics of those APIs. When designing layouts either with CSS or the CSS-OM APIs, be sure to accommodate a few pixels of tolerance in order to ensure a more robust site across multiple browsers and/or devices.

—Travis Leithead, Program Manager, Internet Explorer

Editor's note: Updated to correct a few typographic errors.

To help celebrate Valentine’s Day, we’re pleased to offer another new HTML5 experience that makes the most of your PC hardware and touch on Windows 8. Check out Love is in the Air and feel the warm embrace of hardware accelerated HTML5.

This experience brings together hardware-accelerated HTML5 canvas, SVG, CSS transforms & transitions, WOFF, audio, and more. On Windows Developer Preview with support for multi-touch in IE10, you can reach out and swipe to reveal a special message of love -or just use your mouse. If you think your browser can keep up, turn up the volume to 1000 floating hearts. Using another browser and not feeling the love? Try it with IE9 (or IE10) using the hardware acceleration built into the browser.

Click the image to feel the love

Demos like this are best when shared, so we made it easy for you to experience Love is in the Air and send a special message to your friends.

From the entire IE team, we want to share the love for HTML5 and wish you a Happy Valentine’s Day.

—Rob Mauceri, Group Program Manager, Internet Explorer

The February 2012 Cumulative Security Update for Internet Explorer is now available via Windows Update. This security update resolves 5 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 any of these vulnerabilities could gain the same user rights as the local user.  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 Critical for Internet Explorer Windows Clients, except IE6 client, where it is rated Moderate; and Moderate for Internet Explorer on Windows servers, except IE6, where it is not rated. 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

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

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

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

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

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

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.

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

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

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

Actual Request

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

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

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

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.

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:

HTML markup for one card:

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.

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

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

META Tag

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

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:

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:

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:

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:

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

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

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:

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:

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

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:

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

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

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

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

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

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

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

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

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:

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:

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:

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:

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