At-Rules (Dynamic HTML: The Definitive Reference, 2nd Edition)

start page | rating of books | rating of authors | reviews | copyrights

11.3. At-Rules

CSS2 defines an extensible structure for declarations or directives (commands, if you will) that are part of style sheet definitions. They are called at-rules because the rule starts with the "at" symbol (@) followed by an identifier for the declaration. Each at-rule may then include one or more descriptors that define the characteristics of the rule.

Although at-rules typically appear as the first declarations in a style sheet, in practice some (@media in particular) work best when only one occupies each style sheet. The following sequence provides different style characteristics for a document when viewed on screen and printed on paper (relative font size on the screen, absolute on paper):

<style type="text/css">
@media screen {
    body {font-size: 14px}
}
</style>
<style type="text/css">
@media print {
    body {font-size: 12pt}
}
</style>

The @font-face rule can be used to download font definition files to the browser, and associate each font definition with a font family name to be assigned by succeeding style assignments. Here is an example that downloads one of the Internet Explorer accepted font file formats, assigning the definition to a font family name called Stylish:

<style type="text/css">
@font-face {
    font-family: Stylish;
    font-weight:normal;
    font-style:normal;
    src:url(fonts/stylish.eot);
}
</style>

IE allows you to define multiple @font-face rules in the same style sheet. Visit http://msdn.microsoft.com/workshop/author/fontembed/font_embed.asp for details on how to create font definition files that work with IE for Windows and Macintosh.

Table 11-3 provides a summary of the at-rules supported by CSS and mainstream browsers.

Table 11-3. CSS2 at-rules

Name	NN	IE/Windows	IE/Mac	CSS	Description
`@charset`	6	5	5	2	Character set used for external style sheet file.
`@font-face`	n/a	4	n/a	2	Font description to assist in font-matching between an embedded font and the client system font (or downloaded font).
`@import`	6	4	4	1	Imports an external style sheet. See Chapter 3 for the impact on the cascade.
`@media`	6	5	n/a	2	Defines an output media type for one or more style sheet rules. Rules assigned to the same selectors but inside different `@media` rules (e.g., `@media` `print` or `@media` `screen`) adhere to media-specific rules when the document is rendered in the specified medium.
`@page`	n/a	n/a	n/a	2	Defines the page box's size, margins, orientation, crop marks, and other page-related attributes governing the printing of the document.


11.2. Pseudo-Elements and Pseudo-Classes		11.4. Conventions