HTML and CSS Reference
In-Depth Information
If no value is specified for a media feature, browsers assume a value of 0. This is use-
ful as a shorthand method of testing whether a particular feature is present or not. For
instance, the media query
media = screen and (color)
matches screen devices that can display color. If you don't specify a media device,
browsers assume that the query applies to all devices; thus, the query
media = (color)
matches any device that supports color.
Finally, for older browsers that do not support media queries, CSS3 provides the
only
keyword to hide style sheets from those browsers. For example, when an older browser
processes the
link
element
<link href = “color.css” rel = “stylesheet” media = “only screen and
(color)” />
it initially encounters the
only
keyword and interprets it as an unsupported device
name, and thus does not load the
color.css
style sheet file. Newer browsers that sup-
port media queries recognize the
only
keyword and continue to load the style sheet for
screen devices that support color.
Choosing a Media Query for the Mobile Web
Now that you've seen how to write a media query, you'll create one for the mobile style
sheet so that the style sheet is loaded only for devices with small screen widths. As mobile
devices increase in size and capability, one challenge for Web designers is deciding at
what point mobile devices end and tablet and desktop devices begin. For example, the
original iPhone had a screen width of 320 pixels in portrait mode and 480 pixels in land-
scape mode; but other mobile devices support slightly larger widths, up to the iPhone 4
with a screen dimension of 640
960 pixels. For Kevin's document, you decide to apply
the mobile style sheet for screen widths of up to 500 pixels; beyond that, you'll apply the
desktop style sheets that you've been using throughout the course of this tutorial.
3
Writing a Feature Expression
• To associate a style sheet with screen devices that are less than or equal to a specific
width, use the query
media = “screen and (max-width:
value
)”
where
value
is the maximum allowable width of the screen's viewport.
• To associate a style sheet with screen devices that are greater than or equal to a spe-
cific width, use the query
media = “screen and (min-width:
value
)”
where
value
is the minimum allowable width of the screen's viewport.
• To associate a style sheet with screen devices that fall within a range of screen widths,
use the following query:
media = “screen and (min-width:
value
and max-width:
value
)”
• To associate a style sheet with screen devices in portrait or landscape mode, use the
query
media = “screen and (orientation:
type
)”
where
type
is either
portrait
or
landscape
.
