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" /> .col{ float:left; width:40%; } @media handheld{ .col{ float:none; width:100%; }}
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 { float:none; width:40%; } }
Finally, since some mobile browsers do (erroneously) interpret the @media screen blocks, a good way to factor all of these considerations is to have:
- a style sheet linked with a media attribute set to "handheld,screen" (or "all") where the basic common rendering rules should be set
- another style sheet linked with a media attribute set to "screen", where the advanced rules for non-mobile devices can be set
- in that second style sheet, having "@media handheld" blocks to undo the said rules for handheld devices that would still try to interpret the screen style sheet
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 { background:url("my-beautiful-but-big-image.jpg"); } @media handheld { .banner { background: #373; /* a similar color to the background image to preserve the thematic consistency */ } }
Back to BestPracticesList