This is an archive of an inactive wiki and cannot be modified.

This technique gives a possible implementation for CategoryBpStyleSheetsUse and CategoryBpExternalResources in the Mobile Web Best Practices Guidelines 1.0 Candidate Recommendation.

It details how the use of the @media rule inside style sheets and through the media attribute in HTML can help produce a good mobile and non-mobile Web experience from a single HTML page.

Example of @media rule

The @media handheld can be used in a regular style sheet to enhance and cancel the basic rules set beforehand.

This code sample is a skeleton only, demonstrating how columns can be set in the regular style sheet and unset in the handheld block.

<link rel="stylesheet" type="text/css" href="style.css" />

@media handheld{

Note that the @media rule is a CSS 2 notation, and thus isn't recognized by the Default Delivery Context as it stands (although this is in discussion in the Working Group at this time - WCSS does include the @media rule). To cater this, an other option is to rely on the fact that modern desktop browsers do recognize that CSS notation: so, in the linked style sheet, you could put all the default mobile-view directly in the body of the style sheet, and add further refinements for the desktop browsers in an @screen rule:

Example of @media screen

@media screen {
.col { 
} }

Finally, since some mobile browsers do (erroneously) interpret the @media screen blocks, a good way to factor all of these considerations is to have:

Example of using CSS handheld/screen medias

In the HTML head:

<link rel="stylesheet" href="my-basic-stylesheet.css" media="all" />
<link rel="stylesheet" href="my-advanced-stylesheet.css" media="screen" />

In the second style sheet (my-advanced-stylesheet.css):

.banner {
@media handheld {
  .banner { background: #373; /* a similar color to the background image to preserve the thematic consistency */

Back to BestPracticesList


Contributions to this wiki are governed by the W3C policies for Contribution to W3C' wiki on Mobile Web.