Targeting mobile-optimized CSS at Windows Phone 7

There have been several posts on how to style sites for mobile devices.  These approaches all use CSS3 Media Queries.  As many of the articles point out, not all mobile browsers support this feature.  The Windows Phone 7  browser's base functionality is built on Internet Explorer, which does not support CSS3 Media Queries until Internet Explorer 9.  The browser team's primary goal in the initial release of Windows Phone 7 was to ensure any site designed for Internet Explorer would render correctly and then add optimizations where we could to enable mobile scenarios.  Some examples of these additional features can be seen in Joe's post.

Getting reacquainted with an old friend: IE Conditional Comments

Conditional Comments have been part of Internet Explorer since version 5.  They enable developers to include or exclude lines in the HTML document based on a features existence or version.  On Windows Phone 7 we have added a "IEMobile" feature.  Its version information matches the mobile token in our user agent string introduced here.  

<!--[if IEMobile]>
<p>Welcome to Internet Explorer Mobile.</p>
<![if !IEMobile]>
<p>All other browsers</p>

The first block will display "Welcome to Internet Explorer Mobile" only on Windows Phone 7 devices.  The second block will display "All other browsers" on Internet Explorer, Firefox, Webkit, or Opera. This is because the second block is a downlevel-revealed comment, instead of the more common downlevel-hidden type.  More information on conditional comments is available on MSDN.

In the example above, the conditional comments surround HTML content.  While it is possible to use conditional comments on HTML, script, or CSS the remainder of this post will focus on the CSS case.  

Mixing it up with queries and comments

Add a couple lines where you include your mobile style sheet to add Windows Phone 7 support to your site.

<!—Mobile -->
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-device-width: 480px)" />
<!--[if IEMobile 7]>
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen" />

A caveat to this method is that some of your mobile webkit CSS might not work on Internet Explorer and need to be tweaked.  Also this does not provide a mechanism to support import style media queries like below since conditional comments are only supported in the HTML markup not in CSS files.

@media screen and (max-device-width: 480px) { div {border:none;}}

One advantage of this approach is that unlike media queries, which download all the referenced style sheets even if the criteria is not met, conditional comments are part of the parsing stage and anything excluded from parsing will not be downloaded later.

Adding a conditional comment for Windows Phone 7 to a solution such as the one proposed in "Bulletproof CSS3 Media queries" would enable you to target Webkit based smartphone browsers, Windows Phone 7, and a large range of desktop browsers.

Mike O'Malley
Program Manager
Windows Phone