--------- Handheld CSS
If you believe the specs, writing CSS especially for handheld devices such as mobile phones and PDAs should be a simple matter. Unfortunately, as with many things CSS-related, this simplicity is an unrealistic ideal.
Here's how it should work. One page, two style sheets:
<link rel="stylesheet"
src="screen.css" media="screen" />
<link rel="stylesheet"
src="hand.css" media="handheld" />According to the media attributes, desktop browsers should ignore the second <link> tag, which they do. Handheld browsers should ignore the first <link> tag - but they don't.
Why is this? After all, mobile phone browsers are quite new. Aren't they written with the latest standards in mind?
Let's stop and consider what would happen if mobile phones did ignore style sheets intended for desktop browsers. Since the overwhelming majority of sites today provide style sheets for desktop browsers only , the mobile Web would be a very unstylish place indeed. Not great for mobile phone sales...
So, until handheld style sheets really catch on, mobile Web browsers will probably continue to display styles intended for desktops... which, ironically, makes it more difficult for designers to implement handheld style sheets!
For now, the solution is to write in your handheld style sheet (hand.css in the above example) rules that "undo" any styling in your screen style sheet (screen.css above).
For example, say you have the following rule in screen.css that positions a list of navigation links at the top right of the page with a nice background:
#nav {
position: absolute;
top: 57px;
right: 0;
background: url(bgnavtop.gif) no-repeat;
}Now, on a handheld device you probably want these links to appear relatively unstyled. You can use a rule in hand.css to reset the properties we set above to their initial values:
#nav {
position: static;
top: auto;
right: auto;
background-image: none;
}Because hand.css is linked to the document last, the property values in this second rule will override those in screen.css above. This rule will not affect modern desktop browsers, however, as they correctly ignore the <link> tag with media="handheld".
Note that some older handheld browsers stubbornly ignore media="handheld" style sheets. Aside from server-side browser detection, there isn't much you can do for such browsers but hope that users will upgrade!
---------
Neerav Bhatt
http://www.bhatt.id.au
*****************************************************
The discussion list for http://webstandardsgroup.org/
*****************************************************
