Targeting mobile-optimized CSS at Windows Phone 7

  • Artigo

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>
<![endif]—>
<![if !IEMobile]>
<p>All other browsers</p>
<![endif]>

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" />
<![endif]-->

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

Comments

  • Anonymous
    December 08, 2010
    I can't wait for you guys to be using Webkit so my app will work in your phone. WP7 is really slick, but needs webkit.

  • Anonymous
    December 09, 2010
    Many people are in search of a cross platform mobile solution. It seems like HTML 5 is the answer to this issue since it works on all modern mobile devices (even Balckberry). All except for Windows Phone 7. This is coming fast and unless MS wants to get caught flat footed (again) you really need to have this in your pipeline.

  • Anonymous
    December 10, 2010
    Looks like Windows phone 7 Emulator is not in sync with the real phone. The web app. I am building for mobile phones looks perfect on all phones and even on MS phone  emulator. Surprise: When I look it on real windows phone. It looks completely different and chaotic. Finally, RIM has done it all perfectly for BBs. I Hope MS will soon start using webkit too. It's much easier for developers. So, @MS please go for webkit. Cheers!

  • Anonymous
    December 10, 2010
    @Alex Grande and Mihir I don't understand why you guys want Microsoft to adopt WebKit. Trident 5.0 (IE9's layout engine) renders 99% of the web correctly without workaround. All Microsoft has to do is port it to Windows Phone 7. The Windows Phone team also have more experience with Trident than Webkit so it's not just a matter of pride.

  • Anonymous
    December 11, 2010
    Thanks for posting this, it's good to know this option is available. Can you share any of your roadmap for IE Mobile? Are you planning to move the base to IE 9 or bring features like media queries back into Mobile? I've been very impressed by Windows Phone but the browser capabilities do seem a bit dated compared to the competition.

  • Anonymous
    December 12, 2010
    WebKit is just as flawed as any other engine. You have even bigger problems when you consider that it is very fragmented and you can't expect that two "WebKits" work the same... I would have been happy if IE9 would have been ported to WP7. @2nd comment: HTML5 has nothing to do with that. The web as a common denominator is important, but it doesn't really matter if it is HTML5 or 4. The problem is that not two browsers are the same...

  • Anonymous
    December 13, 2010
    @Matt, @HadesMR: We haven't yet made any announcements on IE9 for WP, but we are always working to improve our browser experience. Thanks for the comments, we do appreciate the feedback.

  • Anonymous
    December 13, 2010
    This is the main reason why I've switched back to my Nexus One from my HTC 7 Mozart... the browser just wouldn't render sites correctly. Hopefully trident or webkit adoption is taken up sharpish so that I can go back to playing Alphajax soon...

  • Anonymous
    December 23, 2010
    I was looking to handle touch events in JavaScript. It looks like they are not supported yet. Is it in the works?

  • Anonymous
    January 03, 2011
    This is not so much a developer question but will IE for Windows Phone 7 be updated so that the address bar can be accesed when the phone is in landscape mode? This is very annoying to have to flip the phone back to portrait to  type into the address bar.

  • Anonymous
    January 03, 2011
    @Rama: they are not supported yet. We're taking a look at them. @Tom: we've heard this feedback, we're always considering ways to improve the UX. No definite decisions yet.

  • Anonymous
    January 04, 2011
    is there anywhere i can get a supported list of CSS and javascript elements that are supported on IE Mobile?

  • Anonymous
    January 05, 2011
    corey: IE Mobile 7 is essentially the rendering engine of IE7 with some scripting enhancements from IE8, so it supports the same CSS that IE7 does. We also added support for getElementsByClassName and the querySelector and querySelectorAll JavaScript APIs. You can also check the last few pages of: http://bit.ly/giUNXg

  • Anonymous
    January 10, 2011
    Hello, why do you have used the IE7 engine in your Windows Phone? I don't understand why you didn't have used a new rendering engine like Webkit, to propose an enhanced web experience with your mobile... You are a break for the web development, because in the past, with Internet 6 (horrible) and IE7, and with Windows Phone today, it is very difficult to create innovating web applications...

  • Anonymous
    January 12, 2011
    @Matt Microsoft started working on Windows Phone 7 in a time IE8 was still in beta, WebKit was still in its infancy and Google Chrome doesn't yet exist: that's why.

  • Anonymous
    January 18, 2011
    The comment has been removed

  • Anonymous
    January 19, 2011
    The comment has been removed

  • Anonymous
    January 24, 2011
    To be honest I think it's ridiculous that you guys have the the Win7 phone browser in the state its in, especially with all the other devices. If it wasn't enough to continue to be the bain of the desktop world you want to drop your grubby mits into mobile devices. IE for win7 phone is absolutely awful. Whether that be with media queries, or lack of decent anti-aliasing on hi-res down-scaled imagery for larger resolution displays, to just generally messing up layouts with the finnesse of IE6. I can test my layouts successfully on BB, Android, and iOS to great success but IE as always presents unforgivable and irritating problems that should not be occuring on such a new device. Sort it out or get out.