Processing msApplication-Arguments

Developers can build the best experience for consumers by ensuring that the switch from the site to the app is contextual. For example, in the above video, when the user switches to the app while reading a review of a phone on the Web site, the app automatically navigates the user to the phone review within the app. This provides users with a continuous experience from the site to the app.
msApplication-Arguments enables this. The content string of this meta tag is passed to the app as an argument string. The app parses this parameter and navigates users to the relevant in-app content.
The following code fragment shows how to handle this parameter in a Metro style app written in HTML/JavaScript:

// Function available in default.js file in Visual Studio Express 11 templates provided in Developer Preview Build

WinJS.Application.onmainwindowactivated = function (e) {

if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {

// Insert this code to handle incoming argument when Metro style Internet Explorer launches the app

if (e.detail.arguments) {

// Parse the value of the msApplication-Arguments string

// Direct incoming user to relevant in-app content

}

}

}

This fragment could be used in a Metro style app written in XAML/C#

// Function available in App.xaml.js file in Visual C# templates provided in Developer Preview Build Visual Studio Express 11

partial class App

{

protected override void OnLaunched(LaunchActivatedEventArgs args)

{

// Insert this to handle incoming arguments, when Metro Style Internet Explorer launches the app

if (!String.IsNullOrEmpty(args.Arguments))

{

// Parse the value of the msApplication-Arguments string

// Direct incoming user to relevant in-app content

}

}

}

Conclusion

Metro style Internet Explorer lets users discover and experience the Web through associated Metro style apps. It enables Web developers to drive their existing site audience to their apps, giving them new opportunities to engage their users with an immersive experience on Windows 8

Behind the Scenes

Web developers can associate their Web sites with their Windows 8 apps through simple markup on the site by including the following meta tags in the element of their Web pages. Both tags are required for Metro style Internet Explorer to provide the site icon button.

<meta name="msApplication-ID" content="microsoft.build.App" />

<meta name="msApplication-PackageFamilyName" content="microsoft.build_8wekyb3d8bbwe" />

When these tags are present, Metro style IE uses them to identify if the app is already installed on the PC and, if not, to provide a direct link to the app description page in the Windows Store. The desktop version of IE10 on Windows 8 does not provide this linkage.
These two required tags are among the five possible tags available for controlling site/store/app interaction. Below is a complete table of the tags.

name	content
msApplication-ID	Required. Package-relative app-ID from Application Manifest. Used to link your site to your app.
msApplication-PackageFamilyName	Required. Package Family Name of the app created by Visual Studio when the app is published. Used to link your site to the store.
msApplication-Arguments	Optional. Argument string passed to your app. By default, IE passes the URL of the Web page but you can use this to pass a context-relevant string.
msApplication-MinVersion	Optional. Enforces a required minimum version for the installed app. If the user tries to switch from the Web page to an outdated app, he or she is first taken to the Store to update the app.
msApplication-OptOut	Optional. Allows pages to opt-out of all or parts of this functionality: “install” prevents offering the user to get the app when they do not have it installed “switch” prevents offering the user to switch to an already installed app “both” prevents both offers

Connect Your Web Site to Your Windows 8 App

Windows 8 Metro style apps let developers take their Web sites’ experiences to the next level. With Metro style apps, developers can build experiences that are more immersive, beautiful, and better connected with other apps and the rest of Windows. Apps can utilize the Windows Runtime to deliver features beyond what’s possible in a browser alone such as seamless access to local files and folders, integrating with Windows 8 Charms for sharing and search, and interacting with locally-connected devices. The Windows Store will deliver a great end-user experience to browse, find, and get apps users care about. This post describes the features of Metro style Internet Explorer in Windows 8 that connect Web sites to apps. It also describes the mechanisms Web developers use to create that connection.

Browsing for Apps

Browsing the Web is a natural way to find and connect to Metro style apps. Metro style Internet Explorer lets you know when apps for your favorite sites are available. Starting from the address bar, you can seamlessly acquire apps from the Windows Store and you can switch to installed apps from their associated Web sites.
After building a Metro style app, developers can reach their existing Web site audience by adding simple markup to their site that establishes a connection to their apps. This connection makes it easy for users discover your app directly from the Metro style Internet Explorer address bar when they visit your site.

Get the App

You can simply browse to your favorite Web sites and discover they have apps associated with them through the site icon. The site icon turns into a button when IE discovers an app for the site. Tap on it to take you to the app’s description in the Windows Store.

Switch to the App

When you navigate to a Web site with an associated installed Metro style app, you can directly switch to that app using the site icon button. For example, a friend shares a link to Web content via email or social media and the link launches the Metro style browser. If there is an app associated with this site, you can tap on the site icon and select “Switch to the app,” which launches it and takes you to very same content within the app.

Try Them Now

We continue to improve the SVG Filters implementation in IE10. For example, there is a known issue that filters applied to text within or elements do not work in the Windows 8 Developer Preview. This is an issue that will be remedied in future builds. You can try out SVG Filters in IE10 now with the Windows Developer Preview and provide your feedback on Connect.
Try the SVG Filter Effects demo on the IE Test Drive site to get a feel for how filters work or read more about it in the IE10 Developer Guide. You can even write your own stack of filter primitives to create a custom effect! Writing complex filters can be a daunting task. Developers familiar with graphics or having a strong background in math might enjoy trying that for yourself. Others may prefer using applications like Inkscape, which have preset SVG Filters that can be toggled and configured. With the right combination of filters, a myriad of desirable effects can be achieved. We look forward to seeing what you build!

When to Use SVG Filters

First, SVG Filters can be used within image and design tools to make SVG elements more interesting. They can provide a sense of depth or create appearances that are otherwise not possible with SVG. It can also be used to achieve a variety of scenarios outside of illustrating tools.
A commonly desired effect on the Web is the CSS3 text-shadow effect. Although text-shadow doesn’t apply to SVG text, the effect can be replicated using SVG Filters.

<filter id="myShadowFilter">

<feOffset dx="5" dy="5"/>

<feGaussianBlur stdDeviation="3"/>

<feColorMatrix type="matrix" values="0 0 0 0 .2, 0 0 0 0 1, 0 0 0 0 .75, 0 0 0 1 0" result="shadow"/>

<feMerge>

<feMergeNode in="shadow"/>

<feMergeNode in="SourceGraphic"/>

feMerge>

filter>

This filter creates a drop shadow effect by taking the pig graphic, offsetting it by 5 units in the x and y directions, applying a Gaussian blur, changing the color of the shadow to a bluish green, then compositing the original pig image with the shadow. It’s easy to create a shadow effect for text or images within SVG.

An image of an SVG pig with a shadow effect applied

In addition to adding dimension to SVG’s flatness, the filter effects can easily be applied to raster images by bringing them into an

An image of an SVG pig with an Inkscape-generated SVG filter applied

If your browser supports SVG Filters, you can click here to see the light changing on the pig above with a single attribute change:

light1.setAttribute("elevation", currentValue);

The filter attribute is a presentation attribute, which means it can be applied to elements through CSS and has all the benefits of styling through CSS, including being able to apply effects using the hover pseudoselector.

Examples of Common SVG Filter Primitives

Below is an example of a lighting effect. There are two light filter primitives to choose from: feDiffuseLighting and feSpecularLighting. There are also three light sources available: feDistantLight, fePointLight, and feSpotlight.

<filter id="lighting_filter">

<feDiffuseLighting>

<feSpotLight x="0" y="0" z="50" pointsAtX="300" pointsAtY="300" pointsAtZ="0" limitingConeAngle="20" specularExponent="5"/>

feDiffuseLighting>

filter>

<g id="myPig" filter="url(#lighting_filter)">

g>

   
An image of an SVG pig before (left) applying an lighting filter and after (right) applying the lighting filter

As you can see, the lighting filter alone produces a greyscale image of a light map. A spotlight filter is located in the upper left hand corner at coordinate (0, 0, 50) and is shining towards the lower right hand corner, creating the grey shape on the black rectangle. The light filter becomes much more useful when it is used in conjunction with another filter:

<filter id="lighting_filter">

<feDiffuseLighting result="result1">

<feSpotLight x="0" y="0" z="50" pointsAtX="300" pointsAtY="300" pointsAtZ="0" limitingConeAngle="20" specularExponent="5"/>

feDiffuseLighting>

<feComposite operator="arithmetic" k1="1" k2="0" k3="0" k4="0" in="SourceGraphic" in2="result1"/>

filter>

An feComposite filter primitive is tacked onto the end of the filter chain. You’ll notice that it takes two inputs: SourceGraphic, the original image of the pig to which the filter is applied, and the result of the lighting filter. The feComposite filter primitive performs a compositing operation on the two inputs. It’s very useful for compositing multiple filter primitive outputs together, such as creating a more complex light map from multiple light sources. In this case, the result of the lighting filter is multiplied with the pig graphic, resulting in the below graphic: a spotlight on a pig.

   
An image of an SVG pig after applying the lighting filter and multiplying it with the original image. Left: transparent background. Right: filter is applied to the SVG pig and a white behind it.

With the feComposite filter, an ‘over’ compositing operation is easy to achieve. That is, it is easy to the composite the results of several filter primitives on top of each other to form a single image. The element is a key filter primitive, as it achieves this exact behavior – compositing the results of several filter primitives on top of each other. simplifies this process with child elements, enabling more than just two filter primitive results to be composited with the ‘over’ operation at a single time.
Another important filter primitive to point out is the feImage filter primitive, as it makes it possible to bring additional images into the filter. It can be used to reference an external image or other svg elements. The image can then be used as an input to another filter primitive.

An image of an SVG pig after applying a filter that multiplies the image with a photo of the sky

These were just a few examples of SVG filter primitives. A complete list of filter primitives can be found in the SVG Filter Effects specification.

Introduction to SVG Filters

SVG Filter Effects expand the graphic capabilities of the Web. An SVG Filter defines an operation on a graphical input. Just like other HTML elements, filters are declarative in nature and have a supporting DOM for dynamic manipulation. A filter is applied to an SVG element via the filter attribute, in the form of filter="url(#filterId)", or it can be applied as a CSS property filter:url(#filterId). Each filter is composed of one or more filter primitives, which are the basic building blocks for creating nifty effects. Each applies a fundamental effect to a graphic. To form more complex effects, filter primitives can be chained together, feeding the output of one to the input of another. When a filter is applied to an SVG element, that SVG element is used as the source graphic for the filter or the first filter in a chain.

   
An image of an SVG pig before (left) applying an SVG filter and after (right) applying an SVG filter

There are 16 different filter primitives. They enable effects ranging from providing light sources to applying matrix transformations to adding a Gaussian blur and much more. SVG Filters make it easy to manipulate and apply Photoshop-like effects to SVG elements. Akin to the rest of SVG, the results are scalable, retaining high quality at any resolution. The filter definition is completely reflected in the DOM as is the original SVG element. Effects can easily be removed by removing the filter attribute. The original, unfiltered image can be attained in this manner. ilter primitives vary widely to cover a large scope of possibilities but there are commonalities between them. Most filter primitives take one or two input parameters. These inputs typically reference the source element, the source element’s alpha channel, or the output of another filter primitive. Having a choice of inputs increases the range of possible effects.
All filter primitives let you specify an identifier for its output so that output can be referenced later. Although filter primitives use the output of the previous filter primitive by default, filter chains don’t have to be completely linear. In fact, more complex filter chains, especially ones that use filter primitives with multiple inputs, often aren’t.
Here’s a simple filter primitive in action:
The feColorMatrix filter primitive applies a matrix transform on the RGBA values of every pixel on the input. A custom matrix can be defined, or a keyword can be used. With it, SVG elements can easily be given a greyscale look or otherwise have their colors altered. Below is an example of the hueRotate keyword being used, and shifting the pixel hues 180 degrees to the opposite side of the color wheel.

<filter id="myHueRotate">

<feColorMatrix type="hueRotate" values="180"/>

filter>

<g id="myPig" filter="url(#myHueRotate)">

g>

   
An image of an SVG pig before (left) applying an feColorMatrix filter and after (right) applying the feColorMatrix filter

SVG Filter Effects in IE10

Scalable Vector Graphics (SVG) provides Web developers with a declarative, markup-based language for building rich, interactive content as part of their Web sites. With SVG Filter Effects, supported in IE10 in the Windows Developer Preview, developers have a collection of powerful, image-based effects that apply to all SVG elements. Like all Web page content in IE9, SVG Filter effects in IE10 are built with hardware-accelerated rendering, resulting in stunning performance and opening up new opportunities for Web developers to create exciting content for end-users.

SVG filters demo on IE Test Drive site

IE 9.0.3 Available via Windows Update

The October 2011 Cumulative Security Update for Internet Explorer is now available via Windows Update. This security update resolves eight privately reported vulnerabilities in Internet Explorer. The most severe vulnerabilities could allow remote code execution if a user views 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 on Windows clients and Moderate for Internet Explorer on Windows servers. For more information, see the full bulletin.
Most customers have enabled automatic updating and do not need to take any action. We recommend that customers, who have not enabled automatic updating, enable it (Start Menu, type “Windows Update”). We recommend that administrators, enterprise installations, and end users who want to install this security update manually, apply the update immediately using update management software or by checking for updates using the Microsoft Update service.

HTML5 Video Captioning

The promise of HTML5 is a Web that works for everyone. Media accessibility through captioning is an important part of that promise and an area that is still emerging through standards work. Using the proposed HTML5 track element, developers can add captioning to HTML5 video by pointing to a caption file that contains a written representation of the dialog or actions in the video. Once the standards for captioning converge, there will be less need for external add-ons to publish accessible video content.

The following HTML fragment shows how the track element works:

<video>

<source type="video/mp4" src="video_file" >

<track src="captions_file" label="English captions" kind="captions" srclang="en-us" default >

<track src="descriptions_file" label="English description" kind="descriptions" srclang="en-us" >

video>

The W3C HTML5 specification allows for multiple caption formats. Internet Explorer 10 in the Windows Developer Preview supports the element, but does not download or display any caption files yet. We use this implementation to prototype how different caption formats can be supported.
Last year at the W3C TPAC meeting, media accessibility was discussed with a proposal for the accessibility requirements that HTML5 should support. Recently, a Web Media Text Tracks Community Group was created to further work on captioning solutions for the Web.
Even though we are not yet at the stage of a final HTML5 spec, it is stabilizing. In order to provide better feedback on and caption file formats, the Internet Explorer and TwC Accessibility teams partnered to build a prototype that uses the element to display captions and descriptions on a video.
We wanted to test a scenario were multiple formats are used to gather more feedback, so we built the demo in such a way that both TTML-1.0 and WebVTT can be used. WebVTT originated from W3C discussions last year after a need for simple caption authoring was identified. TTML is already an established standard for full-featured video captioning and supported in Adobe Flash and Microsoft Silverlight. It is used on Netflix, Hulu and other sites that display broadcast content.

The prototype uses the video and track elements to show how TTML and WebVTT formats can be used to enable captions and descriptions on a video playback. The prototype supports all HTML5-enabled browsers.
You can interact with the prototype at the HTML5 Labs site. Use View Source or your browser’s developer tools to inspect the Javascript that parses the TTML and WebVTT formats.

What Will You Build

We’re eager to see the sites and apps you build with CSS3 Regions and Hyphenation as well as the other new features IE10 brings to the Web platform. Once you’ve had a chance to explore more, send us your feedback here on the IEBlog or at http://connect.microsoft.com/ie/.

CSS3 Hyphenation

The second feature unveiled in the Windows Developer Preview is CSS3 Hyphenation. Native support for CSS3 Hyphenation means developers get high performance and professional-quality hyphenation built into the browser.
Over the last few years, user habits and the Web platform have evolved. Increasingly, users are consuming Web content on a broad range of devices—including phones, tablets, and netbooks. On these devices less text fits on screen and some typographic issues, for example, rivers of white, become more prevalent.
At the same time, new capabilities including CSS3 Multi-Column, CSS3 Regions, and Positioned Floats appeared in the Web platform. Those features enable developers to create more complex text-centric layouts, but may also shorten average line length, increasing the prevalence of some common typographic problems.

A narrow column of text flowing around a Positioned Float, without CSS3 Hyphenation

To build great-looking sites and apps that use the new constructs available in CSS3 and continue to look great across a broad range of devices, it’s important to have robust support for hyphenation in the Web platform.
Building on Microsoft’s expertise acquired over years of hyphenating text in Microsoft Office, Internet Explorer 10 supports hyphenation in 18 of the world’s most common languages. These include Catalan, Czech, Danish, Dutch, English, French, German, Italian, Norwegian (Bokmål and Nynorsk), Polish, Portuguese, Brazilian Portuguese, Russian, Spanish, Swedish, and Turkish (as well as common variants for many of those languages—British and American English, for example).

A narrow column of text flowing around a Positioned Float, with CSS3 Hyphenation

Visit our demo Hands On: Multi-column Layout on ietestdrive.com to play around with CSS3 Hyphenation (Internet Explorer 10 in Windows Developer Preview required).

Building Rich Text-Centric Pages in IE10

Internet Explorer 10 in the Windows Developer Preview introduces two new CSS features designed to make it easier for developers to create rich text-centric Web pages and apps. CSS3 Regions provides a lightweight mechanism to flow content through multiple non-contiguous areas. IE10’s support of CSS3 Hyphenation gives developers a simple mechanism to hyphenate text in a wide range of languages.
These two new features complement other great CSS features we previously announced, including CSS3 Grid Layout, CSS3 Flexible Box Layout, CSS3 Multi-column Layout, and Positioned Floats. Taken together, this set of standards-based features provides developers powerful new tools for designing great Web apps and sites that scale across a variety of screen resolutions and form factors.

CSS3 Regions

CSS3 Regions adds a new mechanism to manage content overflow. In addition to adding scrollbars, clipping content, or letting content spill outside of its container, developers can now direct the overflow from one element into another using a pair of new CSS properties.
Here’s an illustration of how you can use CSS3 Regions:

DOCTYPE HTML>

<html>

<head>

<style>

iframe {

-ms-flow-into: contentIdentifier; /* causes the iframe to hide */

}

#div1, #div2 {

-ms-flow-from: contentIdentifier; /* causes these elements' content to come from the iframe with "-ms-flow-into: contentIdentifier" */

width: 120px;

height: 300px;

float: left;

border: solid 2px lightblue;

margin-right: 8px;

}

style>

head>

<body>

<iframe src="content.html">iframe>

<div id="div1">div>

<div id="div2">div>

body>

html>

CSS has traditionally been a styling language optimized to lay out content on bottomless, vertical-scrolling Web pages. CSS defines properties that developers can use to position content, including several mechanisms to handle ‘overflow’—the handling of content that doesn’t fit within its containing space. Most typically, Web pages manage overflow by adding scrollbars. Experts in such matters have blogged on the impact of scrolling on reading speed and comprehension.
It’s traditionally been challenging on the Web to creating complex text-centric designs that look great—like newspapers or magazines—without relying heavily on scrollbars.
A few short months ago Adobe introduced the CSS3 Regions working draft at the W3C with Internet Explorer’s Alex Mogilevsky as co-editor. CSS3 Regions offers developers a new approach and is a great addition to the Web platform. Internet Explorer 10 in the Windows Developer Preview gives developers their first look at CSS3 Regions in vendor-prefixed (-ms-) form.
To enable advanced scenarios, the CSS3 Regions specification also defines an event, a property, and a method that, together, enable developers to create and manage regions dynamically through JavaScript. We have an early version of those capabilities available in IE10. The current draft of the W3C CSS3 Regions specification describes these in detail.
The ietestdrive.com demo Hands On: CSS3 Regions provides an interactive example of CSS3 Regions in action (Internet Explorer 10 in Windows Developer Preview required).
As HTML5 Web applications continue to evolve, we expect developers will want to use CSS3 Regions to create complex text layouts designed to adapt fluidly to a variety of different screen resolutions and form factors.

Touch Input for IE10 and Metro style Apps

The Web is more interactive, fun, and immersive when sites work well with new input devices and touch screens. The Windows Developer Preview introduces support for handling touch and pen input in your sites and apps. Developers can now ensure their sites work well with touch and build powerful new experiences that make the most of advanced input such as multi-touch and gestures. You can see this in action on the IE Test Drive site in the new and updated demos Touch Effects, Lasso Birds, and Flying Images.

Handling touch-first input without compromising mouse

“Windows 8” Metro style IE and applications bring a first-in-class touch experience to Windows and does so without sacrificing other forms of input. Developers can build sites and apps with that same touch-first experience.
This starts with basic input handling. In IE10 and Metro style apps, developers can write to a more abstract form of input, called a “Pointer.” A Pointer can be any point of contact on the screen made by a mouse cursor, pen, finger, or multiple fingers. This model makes it easy to write sites and apps that work well no matter what hardware the user has. Similar to our approach for hardware acceleration, the experience gets better with better hardware yet the APIs developers write to are hardware agnostic.

Pointer events encapsulate input from touch, pen, and mouse making it easy to build experiences that are hardware independent.

The events for capturing generic pointer input look a lot like those for mouse: MSPointerDown, MSPointerMove, MSPointerUp, MSPointerOver, MSPointerOut, etc.
Pointer events provide all the usual properties expected in mouse events (client X/Y coordinates, target element, button states, etc.) in addition to new properties for other forms of input: pressure, contact geometry, tilt, etc. So developers can easily write to pointer events and their apps just work no matter what input hardware is being used.
Sometimes, developers do want to provide different experiences for touch input. For that, pointer events also indicate the type of input (touch, pen, or mouse) via the event.pointerType property.
Here’s a primitive paint application slightly modified from that included in the IE10 Developer Guide:

<style>

html {

overflow: hidden;

-ms-content-zooming: none; /* Disable pan/zoom */

}

style>

<canvas id="drawSurface" width="500" height="500" style="border: 1px solid black;">canvas>

<script type='text/javascript'>

var canvas = document.getElementById("drawSurface");

var context = canvas.getContext("2d");

context.fillStyle = "rgba(255, 0, 0, 0.5)";

canvas.addEventListener("MSPointerMove", paint, false);

function paint(event) {

context.fillRect(event.offsetX, event.offsetY, 5, 5);

}

script>

By default, IE10 enables panning and zooming with touch. Sometimes, developers may want to manage panning and zooming in the site itself. In this example, we show how to handle the touch input in your site and not pan/zoom using the style rules overflow:hidden and –ms-content-zooming: none to do exactly that.

Built-in support for multi-touch

Down, moves, and ups fire for each touch contact. So applications like the above paint example support multitouch without any special code. In some cases, you might want to know information about other pointers on the screen. On any pointer event, you can easily get the complete list of pointers on the screen:

<style>

html {

overflow: hidden;

-ms-content-zooming: none; /* Disable pan/zoom */

}

#foo {

width: 500px;

height: 500px;

background-color: red;

}

style>

<div id="foo">div>

<script>

function handleEvent(event) {

var currentPointers = event.getPointerList();

if (currentPointers.length == 1) {

event.target.style.backgroundColor = "red";

} else {

event.target.style.backgroundColor = "green"; //multiple touch points are used

}

}

document.getElementById("foo").addEventListener("MSPointerMove", handleEvent, false);

script>

Advanced gesture input

The Windows Developer Preview also includes support for recognizing higher level gestures with pointers, such as scaling, panning, and rotating. Developers can easily take advantage of these using the MSGestureStart, MSGestureChange, and MSGestureEnd events. For each of these, information about the transform of the gesture is provided (rotation, scale, translation, etc.) that can be applied to your application in many ways, such as CSS Transforms:

<style>

html {

overflow: hidden;

-ms-content-zooming: none; /* Disable pan/zoom */

}

#foo {

background-color: red;

width: 500px;

height: 500px;

-ms-transform-origin: 50%;

-ms-transform-origin: 50%;

}

style>

<div id="foo">div>

<script>

function handleEvent(event) {

event.target.style.msTransform = "scale(" + event.scale + ")";

}

document.getElementById("foo").addEventListener("MSGestureChange", handleEvent, false);

script>

Feature detection, fallback, and supporting other models

For code that is used across other platforms, IE10 offers simple feature detection for pointer events:

if (window.navigator.msPointerEnabled) {

// the system will fire pointer events

}

Note: in the current Windows Developer Preview, this property indicates the system supports pointer events for touch or pen input. However, at a future date it will be updated to indicate support for pointer events for mouse, pen, and touch.
Using feature detection, it’s possible to make sites that work well across different input models. Lasso Birds is an example that works well across the Windows 8 Developer Preview, Apple iOS, Google Android, and mouse-only systems. On Windows 8, it uses pointer events to handle all input in a single code path. On other platforms, it uses a combination of mouse events and proprietary touch events to deliver a similar experience.

if (window.navigator.msPointerEnabled) {

elm.addEventListener("MSPointerDown", handleInput, false); // Fires for touch, pen, and mouse

} else {

elm.addEventListener("mousedown", handleInput, false); // Fires for mouse only

}

Pointer and gesture events are just one part of our developer model for touch. We'll talk more about our other touch APIs as well as how Lasso Birds works in future posts.
For more details on pointer events, gesture events, and other touch APIs check out the IE10 Developer Guide. We look forward to seeing the touch experiences you build, and welcome your feedback through Connect.

CSS3 text-shadow in IE10

IE10 in the Windows Developer Preview introduces support for hardware-accelerated CSS3 text-shadow. Text-shadow is one of the top requested features from Web developers. It enables text effects that were previously difficult or impossible to accomplish in a standards-friendly way without resorting to inline images of text.
Text-Shadow in IE10

As its name suggests, text-shadow is a CSS property that draws a shadow behind text.

Example of a purple text-shadow behind text

Use it to draw attention to text and to give the text some depth. In some cases, especially with text over an image or color background, text-shadow can be used to add contrast and improve readability. Because IE10 as well as other browsers support the standard, no-vendor-prefix form of text-shadow, sites using text-shadow today will just work in IE10. As part of our commitment to standards-based quality, we’ve submitted 10 test cases to the CSS3 Text Test Suite with a pass rate of 9/10.

Example: a subtle text-shadow appears when navigating to Twitter in IE9  and IE10

Example: text-shadow appears when navigating to an auto service Web site in IE9 and IE10

IE10 supports the same definition of across box-shadow and text-shadow as called out in the text-shadow spec: “ is the same as defined for the ‘box-shadow’ property except that the ‘inset’ keyword is not allowed.” This definition is color plus four parameters: x offset, y offset, blur radius, and spread distance. Only IE10 currently supports the spread distance parameter (see “The ‘spread’ parameter and interoperability,” below).

How to Use Text-Shadow

The most basic text-shadow requires an x and y offset:

.shadow1 { color: black; text-shadow: 2px 2px; }

Most of the time, you will also want to specify a text-shadow color as well:

.shadow2 { color: black; text-shadow: #87CEEB 1px 3px; }

The color parameter can be placed at the beginning or end of the shadow definition. You may also add a blur radius, which describes the amount the shadow should be blurred using a Gaussian blur algorithm:

.shadow3 { color: black; text-shadow: 1px 3px 3px rgba(135, 206, 235, 1); }

A spread distance may also be specified. A positive value describes the amount that a shadow expands, whereas a negative value describes the amount that a shadow contracts:

.shadow4 { color: black; text-shadow: skyblue 0px 0px 0px 4px; }

The effect of a text-shadow with positive spread can often be imitated by drawing enough 0-spread shadows. However, the markup to achieve this is more complex and may result in a lower-performance, lower-quality shadow:

.shadow4_nospread { color: black; text-shadow: skyblue 0px 2px, skyblue 2px 0px, skyblue -2px 0px, skyblue 0px -2px, skyblue -1.4px -1.4px, skyblue 1.4px 1.4px, skyblue 1.4px -1.4px, skyblue -1.4px 1.4px; }

The spread parameter makes accomplishing the effect much easier. It can also be used to accomplish effects that otherwise impossible to achieve when negative values are used:

.shadow5 { text-shadow: 5px 5px 2px -2px #9966CC; }

The above five parameters describe only a single shadow. The text-shadow property supports a list of shadows, stacked from front to back. Below is a text-shadow with a partially transparent white shadow drawn on a yellow shadow, drawn on top of an orange one which is drawn above a red one:

.shadow6 { text-shadow: rgba(255, 255, 255, .5) 1px 1px, yellow 2px 3px, rgba(255, 153, 0, .7) 3px 6px, rgba(255, 0, 0, .5) 4px 8px; }

The ‘spread’ parameter and interoperability

At this time, only IE10 supports spread distance. The lack of support can be attributed in part to conflicting implications in the W3C spec, which states the computed value is “a color plus three absolute s” while also stating “ is the same as defined for the ‘box-shadow’ property except that the ‘inset’ keyword is not allowed.” The box-shadow spec defines as “specified by 2-4 length values, [and] an optional color.”
When interoperability is the goal, keep in mind that a text-shadow with a spread parameter will be parsed as invalid by browsers that do not support it. Your markup should include a fallback version of text-shadow without ‘spread’ should you choose to use the last parameter, otherwise no text-shadow will appear in browsers that do not support spread.

.shadow7 {

color: black;

text-shadow: #99FFCC 0px 0px 10px; /* for browsers without spread distance */

text-shadow: #99FFCC 0px 0px 10px 10px; /* for browsers with the full spec */

}

Text spread enables many more effects, such as stroked text (as seen above), a darker blurred shadow, or a skinnier shadow. We welcome your feedback regarding the ‘spread distance’ parameter and are committed to conversing with the CSS Working Group to improve clarity around text-shadow in the CSS Text specification.

Improving upon the past

In older versions of Internet Explorer, the proprietary DXImageTransform.Microsoft.Shadow, DXImageTransform.Microsoft.DropShadow, DXImageTransform.Microsoft.Glow, and DXImageTransform.Microsoft.Blur filters were often used to produce the text shadow effect that is now supported in IE10 via CSS3 text-shadow. Instead of using these DXImageTransform filters to achieve a text shadow effect, use the text-shadow property for IE10. Not only does it achieve the effect in a standards-compliant interoperable way, but hardware-accelerated CSS3 text-shadow also provides significant performance gains over the older alternative.

Fallback behavior

Sites using text-shadow today degrade gracefully when rendering without a text-shadow. In many uses of text-shadow on the Web now, the text shadow is subtle decoration that adds visual depth. However, text-shadow can also be used form more creative visual effects.

Example of text-shadow use that has poor fallback viewed in IE9 (left) and IE10 (right)

If you need to support browsers without text-shadow support, make sure to use feature detection for textShadow in the CSSOM to conditionally change the color of your text when taking this artistic liberty.
Using feature detection:

if (typeof document.body.style.textShadow == 'undefined') {

// text-shadow is not supported

document.body.style.color = 'black';

}

else {

// text-shadow is supported

document.body.style.color = '#FFFFCC';

document.body.style.textShadow = 'turquoise -2px -2px, black 2px 2px';

}

Give text-shadow a try

Try using text-shadow today! If you already are, explore the new possibilities that the ‘spread’ parameter unlocks. Using multiple shadows and tweaking the different parameters can create some interesting effects.
Here’s my gallery of interesting and silly text-shadow effects:

Click here to view a live copy of this gallery in a separate tab

Note that you can use text-shadow with WOFF fonts and input elements and in conjunction with CSS3 Transitions and Animations! If you are using a browser that supports both text-shadow and CSS Transitions and Animations, view the gallery above in a separate tab to see the features in action together. You can then use View Source or your browser’s developer tools to view the markup.
Get your creative juices flowing and try out text-shadow in IE10 in the Windows Developer Preview. The IE Test Drive demo Hands On: text-shadow offers an interactive way to experiment with text shadow. See how easy it is to make your text spring to life!

One Billion Dots and Beyond – the Viral Phenomenon of World’s Biggest PAC-MAN

we teamed up with NAMCO BANDAI Games America to launch WorldsBiggestPacMan.com at MIX11. It was an instant, viral phenomenon and in its first week over 242 million PAC-DOTS™ were eaten, 2.2 million mazes were played and over 10 thousand new mazes were created. WBPM caught the imagination of PAC-MAN® fans all over the world and soon a massive and sprawling universe of interlocking mazes had been built. Internet Explorer 9 users who pinned the site to their taskbar were treated to one-click access to the game and a quick-view of their personal stats.

Today we are very excited to announce that we have reached an impressive milestone: over 1 BILLION PAC-DOTS™ have been eaten! To celebrate, we want to dig in to the amazing story behind World’s Biggest PAC-MAN® and put some of the other usage stats into context.
It All Started With an Unexpected Partnership

Like most great things, WBPM wasn’t built alone. When we heard about some of the work in Soap Creative’s repertoire, we paired up with them to design, develop and deploy WBPM. The team was excited to build an experience that would capture peoples’ imaginations using the power of HTML5. Given the ongoing focus of HTML5 in IE9, we knew it would take advantage of the new browser’s unique capabilities. A few weeks after the project was launched, it was clear there was an overwhelming response from users; here’s a bit more info from the lead developers of WBPM on how the project came together:

Operating at Web Scale

WBPM has served-up multiple terabytes of data and tens of millions of page views. As we approached the “one billion PAC-DOTS eaten” mark, we wanted to better understand what people were doing on the site. With numbers as enormous and abstract as these, we tried to find ways to frame the figures in a way that people would be able to grasp the scale. For instance, over 40 thousand mazes have been created in a connected web of PAC-MAN® mazes. If you think of each of these mazes as being the size of the screen on an original PAC-MAN arcade machine (23 x 23 inches), then you would need a screen TWICE the size of the field at Wembley Stadium to fit the WBPM universe!

In order to celebrate the success of WBPM and give everyone a window into the excitement around the game, we constructed a live look at the numbers behind the experience. This page pulls data directly from the application’s database and the website’s analytics. For performance reasons, different data points are cached for different amounts of time. The heat map, which shows-off where in the world most of our users are playing the game, is generated and refreshed once a day.

One of our favorite stats about the site is the percentage of visitors using the site in IE9. As Mark Fennel noted in the video, “when we whacked it onto a PC with IE9, it was like, ‘oh ho, look at this thing, it screams!’ It was great.” Since we built WBPM with IE9 in mind, it is gratifying to see that IE9 users are visiting the site in large numbers and spending 37% more time on the site than the average user. It’s really a testament to the value of taking an amazing experience and making it easy for IE9 users to pin it to their taskbar.

The Road to Two Billion PAC-DOTS Starts with a Contest

Of course, the only thing cooler than one billion Pac-Dots eaten is… two billion! In order to reward the die-hard WBPM players and introduce the game to millions more, we are kicking-off the World’s Biggest PAC-MAN® Gobbling Ghosts contest. Grand Prize is a PAC-MAN® Arcade Party machine pic with runner-ups winning limited-edition World’s Biggest PAC-MAN t-shirts! The challenge is simple:

Install IE9
Pin WorldsBiggestPacMan.com to your Windows 7 taskbar
Gobble as many ghosts as you can!
Right-click on the WBPM icon on your taskbar and take a screen-shot of “Ghosts Eaten” score
Enter the screen-shot in the contest by sending it to @IE on Twitter with the hashtag #worldsbiggestpacman.

That’s it! The contest will run through August 18, 2011. Official rules and regulations will be posted shortly on BeautyOfTheWeb.com.