The New W3C Site for Handheld Media
When the new W3C site design launched, I was glad to find that the redesign was able to set the bar a little higher for HTML and CSS development. I noticed that the site would switch stylesheets when resizing the browser window to a narrow width. I assumed that this was being accomplished with JavaScript. Not so.
Note the link and style elements in the head of the home page HTML.
<link rel="stylesheet" href="/2008/site/css/minimum" type="text/css" media="handheld, all" />
<style type="text/css" media="print, screen and (min-width: 481px)">
/*<![CDATA[*/
@import url("/2008/site/css/advanced");
/*]]>*/
</style>
<link href="/2008/site/css/minimum" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 480px)" />
<meta name="viewport" content="width=320" />
<link rel="stylesheet" href="/2008/site/css/print" type="text/css" media="print" />
The media attributes include some information that instructs browsers to use different stylesheets for different media types and different screen widths. A coworker created a gist of this CSS snippet to serve content to screen and handheld devices.
View Site The New W3C Site for Handheld Media
Resource Type Bookmarks
Back Resources Main Page