As touch becomes a more and more prevalent means of interacting with PCs as well as phones and tablets (I’m typing this on a Lenovo Carbon X1 Touch laptop), developers should be aware of how to create touch-friendly sites and apps that help users make the most of touch-enabled devices.

If you’re building apps for the Windows Store, there’s good guidance available on touch interaction design on the Windows Store developer center.

There’s also some guidance available for building touch-friendly sites in Internet Explorer 10. One interesting piece of that discussion is the –ms-touch-action CSS property, which defines the default behavior for the browser’s response to touch.

The reason I’m mentioning all of this is that sometimes the default behavior of the browser may not be what you want…for example, if you’re developing a full-screen game using HTML5 Canvas, having double-tap-zoom enabled (which is the default), may have undesired results, particularly when playing the game on a touch-screen device.

If you’re a developer, it’s easy enough to add an appropriate CSS style rule to prevent double-tap-zoom on the canvas element in your game, like so:

   1:  #myGameCanvas {

   2:     -ms-touch-action: none;

   3:  }

But what happens when you run into a game where the developer hasn’t provided such a rule? Sure, you could just write it off and go find another game to play. But what fun would that be?

User Style Sheets to the Rescue!

A fairly simple workaround is to take a peek at the DOM for the running site, using the IE10 developer tools (just press F12 to launch the tools), and find the canvas element for the game, and write a rule similar to the above that targets the game’s Canvas element. Then save that rule in a text file with the .css extension.

Next, open up the Internet Explorer options dialog, and click the Accessibility button, as shown below:

Then check the “Format documents using my style sheet” checkbox (as shown below), and browse to the location of your .css file. Click OK twice, and just to be on the safe side, close and restart Internet Explorer.

If your selector is correctly targeting the canvas element, you should now be able to play the game without encountering unwanted double-tap zooming.

A Word of Caution

The workaround suggested here is a fairly broad-brush solution, and depends highly on the specificity of the CSS selector used to apply the rule. If the selector isn’t correct, the rule won’t be applied, but if the selector is too broad (for example, if you applied the rule to all canvas elements) you might find that the workaround prevents double-tap zooming (or other touch behaviors) where you want them to work.

Conclusion

Sure, this is a bit of a hack to be able to play a game. But the User Style Sheets feature of IE can be used to tweak any preferences you might have in terms of CSS to make sites more readable, etc. So it’s handy to keep it in your back pocket for when you might need it. Just remember, be specific in your rules, and remember that you have it enabled…just in case you happen to run into other sites where your user style sheet rules apply.