Tuesday, September 21, 2004

CSS for ill-behaved handheld devices

My PCS phone's browser is either over-confident or just plain ignorant. Either thinks that it is a "screen" browser rather than a handheld device, or it is totally unaware of media types at all. In any case, it tries to interpret all CSS rules, even those explicitly set off inside "@media screen" blocks. It foolishly obeys CSS positioning, even when this results in things being positioned off of the right edge of the screen in no-man's land. And it really is no-man's land, because there is no horizontal scrolling.

Today the way to deal with devices like this finally hit me like a ton of bricks: import a "@media handheld" stylesheet after the "screen" stylesheet. Correctly behaving graphical browsers will ignore this stylesheet. Correctly behaving handhelds will see it and use. The beauty is, ill-behaved handhelds like mine will use it to! Just use this stylesheet to explicitly override all those positioning rules that the phone shouldn't have seen anyway.

@media handheld {
#container { position: static; }
#sidebar { position: static; }
#main { position: static; }
Viola! No more positioning!


Brilliant! Now I can effectively punish ubar-kewl hipsters who try to read my site on stupid webphones!