Katherine Lynch.org

So, mobile stylesheets are not the Holy Grail of mobile web development that they once were, but they do still come in handy.  Rather than attempting to recognize the technology or the OS specifically, it's easier now to go by device width.  I used this technology in order to have a "switch to mobile version" toggle in the footer of the full browser version of a site, but only on mobile devices:

<link rel="stylesheet" href="handheld.css" type="text/css" />
<meta name="viewport" content="width=device-width" type="text/css" />
<link rel="stylesheet" href="override-handheld.css" type="text/css" />
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="handheld.css" type="text/css" />
<link rel="stylesheet" media="all and (min-device-width: 481px)" href="handheld.css" type="text/css" />
<link rel="stylesheet" media="all and (min-device-width: 1024px)" href="override-handheld.css" type="text/css" />

Let me expand this a little.  In "handheld.css," we have the following:

#footer-switch{
    display: block;
}

This allows the toggle switch in the footer of the full browser version to be displayed.  In "override-handheld.css," we have, not surprisingly:

#footer-switch{
    display: none;
}

This is, obviously, meant to hide the toggle.  Please note, this CSS will actually remove the toggle entirely from the browser, not just visually, but for all hardware including screenreaders, as if it doesn't exist.  This is our goal though, as we only want to call "override-handheld.css" when this particular navigational element should not exist.  

So, in the first line, we call the "show" CSS.  We do this as a "just in case," should all of our conditionals fail for an edge-case mobile user, the switch is available.

This little line - 

<meta name="viewport" content="width=device-width" />

is used to help ID the device width, and is mostly needed to make Android 2.2 and beyond play nicely with mobile stylesheets.  Without this, Android devices running 2.2 and above will simply ignore these media queries. 

Now, these last three -

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="handheld.css" type="text/css" />
<link rel="stylesheet" media="all and (min-device-width: 481px)" href="handheld.css" type="text/css" />
<link rel="stylesheet" media="all and (min-device-width: 1024px)" href="override-handheld.css" type="text/css" />

work for all other mobile devices.  Most devices will be served by the first line, as many handhelds still have a width of 480px or less.  The second line is for (again) many newer Androids, some Blackberries, and of course, tablet devices (*cough iPad cough*).  The last line of CSS is only called for desktop devices, and this hides the mobile toggle switch.  Win!

And speaking of iPads, if your mobile optimized site needs some love especially for the iPad or tablet devices, you can use this same technique in your mobile site's CSS.  Just throw this into the header -

<link rel="stylesheet" media="all and (min-device-width: 481px)" href="tablet.css"> 

and put your tablet-optimized CSS into the appropriate file.  Yay, many conditions!