Book HomeDynamic HTML: The Definitive ReferenceSearch this book

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.



Library Navigation Links

Copyright © 2003 O'Reilly & Associates. All rights reserved.