Windows mobile media queries

When I met up with Malarkey right before An Event Apart in Seattle he told me about a quick bit of guerrilla testing he had been doing. He popped into a store selling Windows Phone 7 devices and started surfing the web. Specifically, he started looking at sites using responsive design like Jon’s and Colly’s.

Most of the sites he looked at displayed the desktop layout instead of adapting to the smaller dimensions of the screen. That’s because the rendering engine for Windows Phone 7—some bastard hybrid of IE7 and IE6—doesn’t support media queries. So if you’re using media queries to undo width and float declarations, the media queries won’t be executed.

A better option is to begin with the layout-less version and use media queries to add in width and float declarations for the browsers that are wide enough to get that layout—this is kinda like Luke’s Mobile First approach. But if you do that, versions of Internet Explorer less than 9 won’t get those layout declarations even though the browser window is wide enough (IE9 is the first version to support media queries).

On Huffduffer I get around this problem by using conditional comments. First of all, I split off the layout styles into a separate stylesheet that is called with a media query in the link element:

<link rel="stylesheet" href="/css/global.css" media="all">
<link rel="stylesheet" href="/css/layout.css" media="all and (min-width: 30em)">

(This isn’t ideal because now there is an extra HTTP request, but hear me out.)

Older browsers—including plenty of mobile browsers—won’t download the layout stylesheet so they’ll just get the linearised content. That’s all well and good but it leaves Internet Explorer out in the cold. Using a conditional comment, I can point older versions of IE to the same layout stylesheet:

<link rel="stylesheet" href="/css/global.css" media="all">
<link rel="stylesheet" href="/css/layout.css" media="all and (min-width: 30em)">
<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/layout.css" media="all">
<![endif]-->

Now older versions of Internet Explorer also get the layout styles. This would all be fine and dandy except for the fact that Windows Phone 7 will also get the layout styles because it will understand the conditional comment. Curses!

But with one little tweak to the conditional comment, we can tell Windows Phone 7 not to follow the link:

<link rel="stylesheet" href="/css/global.css" media="all">
<link rel="stylesheet" href="/css/layout.css" media="all and (min-width: 30em)">
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" href="/css/layout.css" media="all">
<![endif]-->

That’s why Huffduffer serves up the layout styles to desktop versions of Internet Explorer but just gives the linearised layout to Windows Phone 7 …as observed by Andy in an AT&T shop on a rainy afternoon in Seattle.

All of this should become moot by September when word has it that Microsoft will upgrade the engine of Internet Explorer Mobile to be closer to IE9. Until then, this combination of stylesheet separation and conditional comments is the most robust way I’ve found to target as many layout-capable browsers as possible.

Thoughts on Exerting Control With Media Queries - Jim Nielsen’s Blog

Some thoughts on CSS, media queries, and fluid type prompted by Utopia:

We say CSS is “declarative”, but the more and more I write breakpoints to accommodate all the different ways a design can change across the viewport spectrum, the more I feel like I’m writing imperative code. At what quantity does a set of declarative rules begin to look like imperative instructions?

In contrast, one of the principles of Utopia is to be declarative and “describe what is to be done rather than command how to do it”. This approach declares a set of rules such that you could pick any viewport width and, using a formula, derive what the type size and spacing would be at that size.

All Them Switches: Responsive Elements and More

Container queries are like buses: you’re waiting for ages and then two come along at once.

This switch() syntax looks interesting.

Intent to Prototype: Container Queries

Hell has frozen over! Container queries might actually happen!

Intrinsically Responsive CSS Grid with minmax() and min()

When min() gets better support (it’s currently in Safari), we’ll be able to create container queryish declarations like this:

grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));

Concise Media Queries with CSS Grid

‘Sfunny, this exact use-case (styling a profile component) came up on a project recently and I figured that CSS grid would be the right tool for the job.