Using the '@media' Rules
October 30, 2000
The third mechanism for associating style sheets with media types is to use
the @media rules. This specifies the target media types for a set of style
sheet rules. For example, if you write:
@media screen {
h1 { font-size: 18pt }
}
@media print {
h1 { font-size: 10pt }
}
@media screen, print {
h1 { text-align: center }
}
. . . you are indicating that first level header has an 18-point font when
displayed on the screen, a 10-point font when printed, and center-aligned
on both media types. The third of the @media rules above points out that
@media rules may apply to more than one media type. In this case, media
types are separated by a comma.
Note that @media rules are applied in the order in which they are
processed. In other words, if two applicable @media rules define different
styles for the same element or selector, the latter @media rule will apply.
For example, if we wrote:
@media print {
h1 { font-size: 10pt }
}
@media screen, print {
h1 { font-size: 18pt; text-align: center }
}
an 18pt font will be used when displaying on the screen and when printing.
With @media rules, you can specify media-dependencies within an internal
style sheet or with an external style sheet.
Using '@media' Rules Within an XHTML Document
In order to specify media dependencies within an internal style sheet, you
simply include the above information within your document by use of the
<style> element:
<head>
...
<style type="text/css">
<!--
@media screen {
h1 { font-size: 18pt }
}
@media print {
h1 { font-size: 10pt }
}
@media screen, print {
h1 { text-align: center }
}
-->
</style>
...
</head>
In this example, the <style> element's content is three @media rules. The
first @media rule applies to the screen media type, the second to the print
media type, and the third to both screen and print media types. The benefit
of this approach is that common styles (such as center-alignment in the
example above) can be collected under one @media rule to reduce redundancy
and improve maintainability of the style information. The greatest benefit,
however, of using @media rules is when they are used in external style
sheets.
Using '@media' Rules Within External Style Sheets
In order to specify media-dependencies within an external style sheet is
quite straightforward. Simply write your rules in a separate file:
/* mystyle.css */
@media screen {
/* style rules for screen devices */
h1 { font-size: 18 }
}
@media print {
/* style rules for print devices */
h1 { font-size: 10 }
}
@media screen, print {
/* style rules shared by screen and print devices */
h1 { text-align: center }
}
[Note: The 2nd and 3rd lines above are one line, as are the 6th
and 7th and the 10th and 11th. They were split for formatting
purposes]
and save as, for example, mystyle.css. Then, as we've done before, simply
use the href attribute of the <link> element to reference the style sheet
from within the XHTML document:
<link rel="stylesheet" type="text/css" href="mystyle.css" />
Make sure, though, that you do not use the <link> elements media attribute
in addition to the @media rules within the external style sheet – the web
browser might not download your style sheet!
Using the <link> Element
Beginning XHTML
Creating Media-Dependent Style Sheets
|
