Handheld CSS variants

For MediaWiki 1.14 I’m doing some refactoring of the CSS configuration to simplify some of the ugly and dupe code and to make things like adding handheld-friendly stylesheets easier…

An older experimental handheld CSS for MonoBook got trashed some time ago after complaints from some Opera folks that it just didn’t seem to work properly… so to experiment with this anew, I’ve added a site config option. By setting $wgHandheldStyle, you can now specify a custom style to use for browsers that think they’re “handheld” media. (These would normally exclude the regular stylesheet anyway, which is listed for “screen” user-agents.)

I’ve currently got it set on Wikipedia to specify the “Chick” style sheet, which is just an extra style variant on the MonoBook HTML, so fits rather conveniently.

Some bits of the HTML output for the curious:

<link rel=”stylesheet” href=”/skins-1.5/monobook/main.css?164″ type=”text/css” media=”screen” />
<link rel=”stylesheet” href=”/skins-1.5/chick/main.css?164″ type=”text/css” media=”handheld” />

You can preview it on-screen by adding &handheld=yes on the URL, just like &printable=yes for the print stylesheet.

I’m still a bit unclear on what devices actually support the ‘handheld’ media type, but I’m pushing for adoption of it with some device makers. :) Note that the iPhone/iPod Touch doesn’t grok ‘handheld’, probably quite deliberately since they want it to understand real ‘screen’ styles most of the time. You can make the iPhone (and Opera Mini in its new, fancier default view mode) use the handheld style by setting $wgHandheldForIPhone to true, which transforms the media types to use CSS3 media type queries on the screen size.

It’s a little funky-looking, but theoretically totally backwards-compatible. :)

Currently I’m not using this option live as the Chick style is still pretty awkward, and there’s no good way to disable the ‘only screen and (max-device-width: 480px)’ stylesheet if you don’t like it (well, other than adding UI and cookie crap).

So you can play with the handheld style on… Opera in “small screen” mode, Opera Mini in “mobile view”, and… anything else that you’ve found that I haven’t. ;)