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. In a simplified example of an at-rule for embedding a downloadable font, the format for making the at-rule declaration and assigning descriptors is as follows:

<STYLE TYPE="text/css">
@font-face {font-family: stylish; url(fonts/stylish.eot)}
</STYLE>

This example merely downloads the font and associates it with a font family name. Other style sheet rules can then apply that font family name to the font-family style attribute.

The CSS2 specification includes a few at-rules of its own, for tasks such as directing a browser to import a style sheet from an external file or preparing page output for printers. Each browser can add its own at-rules as needed. Table 10.3 provides a summary of the at-rules supported by CSS.

Table 10-3. CSS2 At-Rules

Name

NN

IE

CSS

Description

@font-face

-

4

1

Font description to assist in font-matching between an embedded font and the client system font (or downloaded font). CSS2 defines nearly two dozen finely detailed descriptors that may be of interest to authors who are concerned about the extremely accurate representation of a font in a document (primarily for printing).

                               @import ...

Get Dynamic HTML: The Definitive Reference now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.