IE10 Compat Inspector

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

This Week in Privacy

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

Debugging IndexedDB Applications

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

Introducing Seven More IEBlogs

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

Staying Safe Online in the New Year

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

Under the Covers: Let It Snow…

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

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.

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.

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";

CSS Corner: Using the Whole Font

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.

Controlling Selection with CSS user-select

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.