Getting Pocket IE to Obey the “Screen” CSS Media Type

CSS Media Types can be rather handy for delivering CSS rules to one platform or another. Not uncommonly, they can be used to automagically create printer-friendly pages. They can, however, also be used to create mobile-friendly pages (such as for PDAs, cell phones and the like) through the “screen” media type. The general idea is that large screen devices (CRTs and LCD monitors) can be fed CSS rules with the “screen” media type while handheld devices get a set of CSS rules with the “handheld” media type.

One fly in the ointment is that Pocket IE tries to outthink a page’s media types. Because some front-end coders put much of their CSS in a file with the “screen” media type, the Pocket IE development team decided that their browser should render rules with the “screen” media type. Ruh-roh. All of a sudden, all of the potentially small screen-unfriendly declarations “ floating, absolute positioning and the like — were being gargled and swallowed by this diminutive browser.

What that meant was that coders had to employ CSS with “screen” and “handheld” media types; and, in addition to having the usual mobile-type tweaks in “handheld” (such as perhaps removing extraneous page elements), coders also had to resort to undoing the effects present in “screen” stylesheets. Yuk. Pleasantly, Michael Angeles discovered a workaround — by capitalizing “Screen”, Pocket IE properly ignores CSS with that media type.

I’ve not been able to find a comprehensive table of CSS media support among handheld browsers, but the comments attached to this post about CSS for Mobiles are a decent starting point. There, the author set up some test pages for CSS media support and invited readers to send in their results. Here’s an excerpt:

• Pocket IE — applies “screen” and “handheld”
• SonyEricsson browser — passes over “screen” and applies “handheld”
• Blackberry (7730) — neither “screen” nor “handheld” are applied
• Motorola browser — passes over “screen” and applies “handheld”

I wouldn’t be surprised if some handheld browsers still incorrectly apply the “screen” media type. All the same, with Pocket IE back on the good side of the force, that helps quite a bit; granted, Pocket IE doesn’t have quite the market dominance that desktop IE does, but (until now) it was still one of the major offenders among mobile support for CSS media types. And, with a work-around as straightforward as tossing in some capitalization, it’s not hard to push Pocket IE in the right direction.