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