CSS Media Type

41 views

CSS properties are only designed for a certain media. For example the “voice-family” property is designed for aural user agents. Some other properties can be used for different media types. the “font-size” property can be used for both screen and print media, but perhaps with different values. A document usually needs a larger font-size on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on paper.

The style in the example below tells the browser to display a 14 pixels Verdana font on the screen. But if the page is printed, it will be in a 10 pixels Times font. Notice that the font-weight is set to bold, both on screen and on paper:

<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}

@media print
{
p.test {font-family:times,serif; font-size:10px}
}

@media screen,print
{
p.test {font-weight:bold}
}
</style>
</head>

<body>

</body>
</html>

The third way to specify a media type is to use the @text rule. This allows you to import a stylesheet but only use it for a specific set of media types. Note, however, that it is not supported in Internet Explorer, and the stylesheet will not be imported for any media type:

p { color: green; }
@media screen, projection, tv {
#foo { position: absolute; }
}
@media print {
#navi { display: none; }
}
@media handheld {
#foo { position: static; }
}

« CSS Image Gallery	CSS Summary »
Posted on Friday, June 27th, 2008 at 5:23 pm under CSS Advanced \| RSS 2.0 Feed

Post Comment

You must be logged in to post a comment.