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.

MobileTracker – Cell News

I ran across MobileTracker on MovableType’s list of spotlight sites. In a nutshell, it’s a blog on cell news, such as new phones and new services. I didn’t expect it to be that interesting, but it’s surprisingly well written and the entries are brief but not curt.

My current phone is a Nokia 3390 — which is fine, I suppose. However, it has areas of improvement: no color screen, monophonic ring tones, and no network connectivitiy. And that last one gets to me most. If you’re lucky, your cell phone might have Bluetooth. Or, if not that, there’s a decent chance your phone has at least a data port (though a special cable may be required). This phone has neither.

So, I’ll have to remedy that with my next phone (though I can’t afford a new one quite yet). A recent post on MobileTracker mentions the Nokia 3650 which almost resembles something out of The Jetsons ;). Still, the Sony Ericsson P800 also looks very tempting (but, it may never make it to North America for all I know).