Browser Developers

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

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

Adding a 3rd Dimension to CSS Transforms

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

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

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

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

Perspective

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

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

  transform: perspective(500px) translate(0px, 0px, -300px); transform: translate(0px, 0px, -300px);     transform: perspective(500px) rotateY(30deg); transform: rotateY(30deg);

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

#parent {

perspective: 500px;

}

 

#div1 {

position: absolute;

transform-origin: 0px 0px;

transform: rotateY(30deg);

}

 

#div2 {

position: absolute;

transform-origin: 0px 0px;

transform: rotateY(30deg) translate(220px);

}

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

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

#parent {

perspective: 500px;

perspective-origin: -300px 0px;

}

backface-visibility

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

CSS markup:

.card, .card div {

position: absolute;

width: 102px;

height: 143px;

}

 

.card div:nth-child(1) {

background-image: url('redback.png');

}

 

.card div:nth-child(2) {

background-image: url('8clubs.png');

backface-visibility: hidden;

}

HTML markup for one card:

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

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

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

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

3D Transforms with Animations and Transitions

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

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

#parentDiv {

perspective: 500px;

perspective-origin: 150px 500px;

}

 

#div1 {

transform-origin: 150px 500px;

animation: scrollText 200s linear infinite;

}

 

@keyframes scrollText {

0% { transform: rotateX(45deg) translateY(500px); }

100% { transform: rotateX(45deg) translateY(-8300px); }

}

Try It Today

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

We’d love to see your creations!

—Jennifer Yu, Program Manager, Internet Explorer Graphics

Hello everyone!

My name is Kristine and I'm an all year round intern in Desktop QA. It’s been 938 days since my last blog post and it's good to be back ;)

We are preparing another maintenance release for 11.6x ‘Tunny’ with some stability fixes. This is a normal Opera release, not Opera Next. All of the below fixes are already in the current Opera Next release.

Known issues

• [Mac] Address field blinks while typing
• [Linux] The 64-Bit build has a different build number but is in fact identical

Download

• Windows
• Mac
• Linux/FreeBSD

...

Ook! I'm Dustin Wilson, and I'm a user experience designer for desktop here at Opera. You've probably seen my lurking around here before. I've been with the My Opera community since 2003, and I've been quite a vocal supporter of Opera. I just started working here on the 11th of January, and shortly thereafter I flew out to Oslo to meet and work with everyone. It's been extremely cold and dark, but great. I'm working with a great team, and we have a lot of awesome stuff planned. Fortunately for you all there are some nice design changes coming up! Stay tuned!

Why am I writing this post, then? They just needed a scapegoat person to write an intro to this Opera Next snapshot, and I was readily available and willing to do so. I'm perfectly sure this build contains many worthwhile changes! Have fun testing the build. :D

Known issues

• Crash on start up with saved sessions
• Mail header layout is broken
• Mac: Some font rendering issues, and crashes with Web fonts

WARNING: This is a development snapshot: It contains the latest changes, but may also have severe known issues, including crashes, and data loss situations. In fact, it may not work at all.

Download

• Windows
• Mac
• Linux/FreeBSD

...

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

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

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

HTTP Header

X-UA-Compatible: requiresActiveX=true

META Tag

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

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

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

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

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

—John Hrvatin, Program Manager Lead, Internet Explorer

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

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

BlobBuilder Capabilities

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

• Blob objects
• Plain text
• Array Buffers

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

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

// The BlobBuilder constructor is prefixed in all browsers.

// Use MSBlobBuilder in IE, MozBlobBuilder in Firefox, and WebKitBlobBuilder in WebKit-based browsers.

var bb = new MSBlobBuilder();

 

bb.append("Hello World!");

var blob1 = bb.getBlob("text/plain");

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

var bb = new MSBlobBuilder();

bb.append("Hello World!");

var blob1 = bb.getBlob("text/plain");

bb.append("BlobBuilder is great");

var blob2 = bb.getBlob("text/plain");

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

Getting Blobs via XHR

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

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

var req = new XMLHttpRequest();

var url = 'PianoNotes/AllNotes2.mp3';

req.open('GET', url, false);

req.responseType = "blob";

req.onload = function () { /* ... */ };

req.send(null);

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

Creating the Music File

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

musicBlobBuilder.append(noteBlob);

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

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

// display musicBlob.size

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

musicBlobBuilder.append(musicBlob);

Creating the SVG File

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

svgBlobBuilder.append(document.getElementById("scoreContainer").innerHTML);

var svgBlob = svgBlobBuilder.getBlob("image/svg+xml");

// display svgBlob.size

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

Saving Files to Disk

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

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

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

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

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

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

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

—Sharon Newman, Program Manager, Internet Explorer

We have already introduced address field search suggestions powered by our partners Google (default), Bing, Яндекс (Yandex), and Wikipedia (English only). Now we want our own address field suggestions to meet the same high quality standards as the ones provided by our partners for your bookmarks and history entries.

In our old system; everything including bookmarks was matched against page URL, title, or page content and then ordered in one giant list sorted by last visited time.

The new system assigns a score to each suggestion based on more factors than just the last visited time. For example, we prioritize your bookmarks, the position in the URL where we find a match, and the number of times we get a match on the page.

We are not done yet, and will work on integrating Speed Dials and further improve the scoring system.

What do you think about the new results in the address field? Are we getting you to where you wanted to go?

If you already know exactly where you want to go and don’t care too much about the above improvements; then you will certainly appreciate that we’ve also worked on getting you on your way faster. (Nice segue, huh?) Start-up times and session handling should be snappier in this build. We’ve ironed out a bunch of smaller issues that we think will make a big difference.

PS: There are some other treasures in the change log as well. :pirate:

Known issues

• Mail header layout is broken
• Mac: File uploading, and large network requests never finishes
• Mac: Some font rendering issues and crashes with Web fonts

WARNING: This is a development snapshot: It contains the latest changes, but may also have severe known issues, including crashes, and data loss situations. In fact, it may not work at all.

Download

• Windows
• Mac
• Linux/FreeBSD

...

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

Opera 11.61 is now available for download.

This is a recommended security and stability update.

Download Opera 11.61
(build 1250)
Changelogs:

• Windows
• Mac
• Linux

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

This is a Release Candidate for Opera 11.61. Take a look at the changelog for more information about the changes since the previous build.

Download

• Windows
• Mac
• Linux/FreeBSD

Changelog

• CORE-43788 Can't scroll with mouse wheel over iframe with scrolling=no if smooth scrolling is enabled
• CORE-42642 JavaScript crash
• CORE-43273 Opera freezes when loading a big session with the Tab Vault extension
• CORE-42012 Crash in Carakan on WebGL benchmark
• Reverted CORE-43506 POST request for application/x-www-form-urlencoded always sent as two packets
• CORE-41923 [*nix] Vega crash
• DSK-350900 Block the VLC plug-in due to excessive crashing
• DSK-353378 Opera loses advanced download settings after restart
• DSK-353217 [*nix] Red and blue channels swapped when run with a 16-bit color depth
• DSK-350402 Crashes if you unpin the last message in the "Pinned" view
• DSK-355394 Crash when closing mail window
• DSK-350332 Mail unread count is wrong
• DSK-355604 Update opera:about to show 2012

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

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

It's Friday the 13th, so what better day to stay safely at home and do a bit of testing?

Then again, they say that most accidents happen at home... I think I'll leave it to you to make the decision.

Safe testing!

WARNING: This is a development snapshot: It contains the latest changes, but may also have severe known issues, including crashes, and data loss situations. In fact, it may not work at all.

Download

• Windows
• Mac
• Linux/FreeBSD*

* Note: 64-bit Linux has a higher build number, but it's exactly the same as the other ones. ...

Hello,

Today we published the January Security Bulletin Webcast Questions & Answers page. We fielded nine questions on various topics during the webcast, including bulletins released, deployment tools, and update detection tools. There were two questions during the webcast that we were unable to answer and we have included those questions and answers on the Q&A page.

We invite our customers to join us for the next public webcast on Wednesday, February 15 at 11am PST (UTC -8), when we will go into detail about the February bulletin release and answer questions live on the air.

Customers can register to attend at the link below:
Date: Wednesday, February 15, 2012
Time: 11:00 a.m. PST (UTC -8)
Register: Attendee Registration

Thanks,
Angela Gunn
Trustworthy Computing

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

Here's another Opera 11.61 snapshot. The changelog is fairly short, but it has some useful fixes that are ready for testing.

Changelog

• CORE-42565 Crash on applying 3025 background images
• CORE-43307 Do not cache invalid UserJS source files
• CORE-42991 Stylesheet not applied due to malformed gzip content
• CORE-42472 Secure iframe with URL to image lowers security level to "Unsecure" (breaks Paypal checkout)
• CORE-43506 POST request for application/x-www-form-urlencoded is always sent as two packets
• CORE-43173 Incorrect value of elements in ArrayBufferView created with byteOffset to an ArrayBuffer
• DSK-353403 Unite related crash
• DSK-346438 Opera Turbo tooltip repeated multiple times
• DSK-354552 Crash on shut down (regression in the previous 11.61 snapshot)

WARNING: This is a development snapshot: It contains the latest changes, but may also have severe known issues, including crashes, and data loss situations. In fact, it may not work at all.

Download

• Windows
• Mac
• Linux/FreeBSD

Hello. As I previously mentioned in the Advance Notification Service blog post on Thursday, today we are releasing seven security bulletins, one of which is rated Critical in severity, with the remaining six classified as Important.

These bulletins will address eight vulnerabilities in Microsoft products. Customers should plan to install all of these updates as soon as possible. For those who must prioritize deployment, we recommend focusing first on the sole critical update:

• MS12-004 (Windows Media Player): Vulnerabilities in Windows Media Player Could Cause Remote Code Execution. This bulletin – the only one in January’s set to include multiple CVEs – addresses two issues that could arise if a would-be attacker sent a malicious MIDI or DirectShow file to a targeted user. Both of these issues were cooperatively disclosed to Microsoft, and we know of no active exploitation in the wild. Still, we recommend that customers read through the bulletin information concerning MS12-004 and apply it as soon as possible.

In the video at the bottom of this post, Pete Voss discusses this month's bulletins in further detail.

As always, we recommend that customers deploy all security updates as soon as possible. Below is our deployment priority guidance to further assist customers in their deployment planning (click for larger view).

Our risk and impact graph shows an aggregate view of this month's severity and exploitability index (click for larger view).

You can find more information about this month's security updates on the Microsoft Security Bulletin Summary web page.

As you may remember, last month we announced a bulletin addressing the SSL issue we described in Security Advisory 2588513. Days before release, we noted a compatibility problem that might have affected certain users of third-party products, and decided to hold that bulletin until we could complete further investigation. We’re-releasing that bulletin today as MS12-006; we’re also providing further information and guidance to customers with a Knowledge Base article and a Fix-it that will be useful in certain installation circumstances.

As usual, our colleagues in SRD have prepared blog posts that delve more deeply into technical details of this month’s releases. In addition to a discussion of this month’s deployment priorities, SRD has a post examining some of the finer points of MS12-001, which addresses an Important-class issue affecting the SafeSEH security mitigation, and an overview of the aforementioned MS12-004.

Per our usual process, we’ll offer the monthly technical webcast on Wednesday, hosted by Pete Voss and Dustin Childs. I invite you to tune in and learn more about the January security bulletins, as well as other announcements made today. The webcast is scheduled for tomorrow, January 11, 2012, at 11 A.M. PST. Click here to register.

Thanks,
Angela Gunn
Trustworthy Computing.

Welcome back on the desktop blog in the New Year! Our batteries are fully loaded, we hope yours too ;), so lets start this year with something interesting, that will catch your eyes! Let us share with you an experimental Camera build, which we made available at Opera Labs. From now on you can set and manage privacy settings for the camera directly from the UI, which wasn't possible in earlier build we showed you. When you are visiting the page, that wants to use your camera, you'll be asked to grant permission to camera stream for that site via special notification callout.
This new privacy settings interface contains information about all used devices, including geolocation settings.

With the getusermedia support you don't depend on the 3rd party plugins or special extensions. Everything what you need is just Opera Browser ... oh and web camera of course!

So if you have some webcam plug it in, grab the build from Opera Labs and check how it works!

Developer notes: If you've tried to use camera with our previous labs camera build, notice that we are up to date with latest specification. Remember to use video as an object instead of a string when accessing video stream through getusermedia.