Graphics Programs Reference
In-Depth Information
Tailoring Web Pages to Display on
Different Media
Users can view Web pages on a variety of media platforms. For example, a user might
view a Web page on a computer screen or handheld device. A user might use an assis-
tive device to experience the Web page aurally. A user might also print the Web page
and view it on paper. Originally, designers created different versions of Web pages to
accommodate the various needs of target users, then they created code to determine
how the user was experiencing the page and routed the user to the correct version of the
page. Today, designers use CSS to style and lay out pages, and use a media type attribute
to specify how the document is presented on different media.
The media attribute lets you create separate style sheets for a site that specify how the
pages display on different types of media. For example, you might have one style sheet
that specifi es how a page displays on a computer screen and another style sheet that
specifi es how the page is displayed for print. If you don't want to create a separate style
sheet for each media type, you can use the media attribute to create rules in the main
style sheet that apply only to certain media types. For example, you could create a style
that is used for the body tag when the page is displayed on a computer screen and an
alternate style for the body tag in the same style sheet that is only used when the page
is printed. In this example, you might specify the size of the font in pixels for the screen
and in points for print.
In this session, you will learn about various media types, their benefi ts and limitations,
and how to use them effectively. You will add a media type attribute to the NextBest Fest
style sheet and create alternate styles for display in the print media type.
Because styles are cascad-
ing, it's important to see
what styles are affecting a
particular element. Click
the Code Navigator icon
to display a list of the
code (including styles) that
affects the display of a
particular element.
Specifying a Media Type
The most recent documentation at w3.org, ( w3.org/TR/CSS21/media.html ) lists 10 rec-
ognized CSS2.1 media types, which are described in Figure 8-37. Each type is named to
refl ect the target device (also referred to as the user agent ) on which the relevant prop-
erties are most likely to be used. Each user agent can support only one media type. For
example, your computer monitor is, most likely, a screen type media. The media type
names are case sensitive.
Figure 8-37
CSS2.1 media types
Type
Used For
all
All devices
braille
Braille tactile feedback devices
embossed
Braille printers
handheld
Handheld devices, generally with small screens and limited bandwidth
print
Print devices and for print previews
projection
Projected presentation of Web pages
screen
Display on a color computer screen
speech
Speech synthesizers (CSS2 used the aural media type for this purpose)
tty
Media that uses a fixed-pitch character grid such as teletypes and some portable devices
tv
Television-type devices
When you specify a media type for a style sheet or a style, the Web page only uses the
CSS styles in that style sheet, or the specifi c style, when it is displayed on the specifi ed
type of media device. If no media type is specifi ed, the styles are displayed on all media
Search WWH ::




Custom Search