IE Mobile has supported installable user stylesheets ever since Windows Mobile 2003.  User stylesheets provide a powerful way for you to customize the web browsing experience—one of the core features of CSS.  For more information on user stylesheets and the “cascade” part of Cascading Style Sheets, see http://www.w3.org/TR/REC-CSS1#the-cascade. (Note that the spec refers to “reader” stylesheets whereas I prefer the term “user”.  For the sake of this article, consider them as synonymous terms).

Let’s use an example to demonstrate how you can use this feature of IE Mobile.  IE Mobile has a Show Images feature, whereby you can turn off the downloading and display of images on the page.  This can speed up page load times and reduce the amount of data you download over your slow (and possibly expensive) cellular connection.  Instead of the image, you see the placeholder image and the text in the image’s ALT attribute, if there is any text.  Like this:

Now I’m going to be honest with you—I’m not crazy about how this looks.  The placeholder image and alt text take up valuable screen real estate without much benefit.  We are reviewing improving this feature for a future release—perhaps we just remove the placeholder image and still display the ALT text.  For now let’s use a user stylesheet to turn off display of images altogether.

We are going to install a stylesheet that has one simple rule:

img { display:none !important }

This turns off the display of img elements altogether, and IE Mobile knows to not download an image if the element’s display property is set to none.  The !important ensures that this rule will trump any author rules that set the display property of images.

Let’s name this file noimages.css and put it in the \windows directory of the device.

The next step is to tell IE Mobile to load this style sheet.  When the browser app starts, it enumerates the following registry key for user style sheets:

HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\Stylesheet

Every subkey under this represents a style sheet to load.  Each subkey must have the following values:

• “Enabled” – a REG_DWORD value indicating if this style sheet should be loaded or not.  Set it to 1 to have your style sheet loaded.
• “File” = a REG_SZ value containing the path to the style sheet

For our example, the necessary registry entries would look like this:

HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\Stylesheet\NoImages

Enabled = 1

File = “\windows\noimages.css”

There is one last requirement if you are doing this for Windows Mobile 5.0.  For security reasons, the SYSTEM attribute must be set on the style sheet file (\windows\noimage.css in this example). This can be done by setting the SYSTEM attribute on the file on your desktop, and then copying the file to the device via trusted install (more on that below). 

If the browser app is already running, you will have to terminate the browser app and re-start it for the new style sheet to take effect.  On PocketPC, Ctrl-Q will end IE Mobile, and on Smartphone you can turn the phone off and then back on.

The end result looks like this:

That’s it.  A fairly simple process for a powerful tool to affect the way the browser presents pages.  As an example of this power, our One Column view in the browser is implemented almost entirely with a style sheet (we had to add a little extra code to remove spacer images). 

If you come up with a style sheet you’d like to distribute, you’ll probably want to create a CAB file for app install that will place the style sheet (with the SYSTEM attribute set) on the device, and modify the registry as explained above.  You can read more about how to do this at http://msdn.microsoft.com/library/default.asp?url=/library/en-us/guide_ppc/html/ppc_wce51conapplicationinstallationozup.asp

Randy Ramig

August 8, 2006 Addendum:  Your CSS file must be stored as Unicode.  You can do this by opening it up in notepad and saving it as Unicode.