A.1. At-Rules
The CSS2 recommendation from the W3C defines a new type of CSS rule. It's called an "at-rule" because all the rules of this type start with an "at" sign (@). This type of rule is meant to be extensible. In other words, future editions of the W3C recommendation, browser developers, and others may define new sets of rules that begin with @.
For now, there are four groups of @ rules:
@import
@media
@page
@font-face
The @import rule is discussed in Chapter 12.
The @media rule allows you to define different output options for various media in a single style sheet. Browser support is somewhat inconsistent, though it seems to be getting better with each release. Right now, support for this rule is at least usable in most modern browsers (the most notable exception being IE 5.2 on Macintosh).
Initially, W3C defines that the following media types are valid for use with the @media rule. However, you should note that the list is not guaranteed to be complete. As new technologies and display platforms emerge, more keywords will undoubtedly be added.
all
aural
braille
embossed
handheld
print
projection
screen
TTY
TV
The purpose of all of these is largely self-explanatory with the exception of "embossed", which is intended to define output for a Braille printer. The following HTML produces two decidedly different appearances, depending on whether you're viewing the page on your computer screen or printing it out. It demonstrates the syntax and use of the @media rule.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demonstrating @media Rules</title>
<style type="text/css">
<!--
@media print {
body {
font-size: 12pt;
font-family: courier;
}
}
@media screen {
body {
font-size: 36px;
font-family: arial;
}
}
@media screen, print {
body {
line-height: 1.2;
}
}
-->
</style>
</head>
<body>
Let's see if this actually works and, if so, in which browsers.
I've defined an @media rule for print that makes it print
12-point Courier, but another @media rule that displays in
36-pixel Arial on the screen. Both devices produce output with a
line-height 120% of the default value.
</body>
</html>
Notice that it's OK to define a single @media rule to apply to multiple media. In that case, the names of the media must be separated by commas. There are two other ways to specify the medium to be used with a given style sheet or rule. You can use the @import rule and supply the media type as a parameter, as in this example:
@import url(bossvoice.css) aural;
This rule tells the browser to import the CSS stylesheet called bossvoice.css, and that it is to be applied to aural output devices.
The second way to define a style's medium is to use the media attribute of the style tag, as shown here:
<style type="text/css" media="projection">
body {
color: blue;
background-color: white;
}
</style>
If you define a style sheet for a medium that understands the notion of a "page," you can use the @page at-rule to declare sizes, borders, page breaks, and the presence or absence of crop marks on the output page.[1]
[1] The @page rule has some complexity associated with it that I'm not going to attempt to cover here. If you're curious, I suggest you go to the W3C page where the @page rule is defined.
For example, to define an 8.5-inch by 11-inch page with a 0.5-inch border all the way around, you would write a @page rule like this:
@page {
size: 8.5in 11in;
margin: 0.5in;
}
The size property can be given one of three constant values, in addition to the specific size values shown earlier:
auto, which tells the browser to use the default page size for the browser application
landscape, where the larger dimension is the width
portrait, where the larger dimension is the height
The margin property is a shorthand for the following, more specific properties, which may be specified individually:
margin-top
margin-right
margin-bottom
margin-left
You can also define special, overriding dimensions and margins for the first page of a document, and separate dimensions for left- and right-hand pages using the :first , :left , and :right pseudo-classes. Here's a set of @page rules that defines the layout for a document to be printed on both sides, with a special setting for the front page:
@page {
margin: 2cm; /* All margins set to 2cm */
}
@page:first {
margin-top: 10cm; /* Top margin on first page 10cm */
}
/* 1cm larger margins near binding */
@page:left {
margin-left: 3cm;
margin-right: 4cm;
}
@page:right {
margin-left: 4cm;
margin-right: 3cm;
}
Under the CSS2 Recommendation, you can control page breaks in paged output as well. Page control is a very complex topic and one that is probably beyond not only the scope of this discussion, but also the interest level of the vast majority of Web designers. So, I'm not going to go into it here, except to say that if you ever get into a position where you want or need to prepare a Web page for printed (or other paged) output, you can confidently state that you can control the page break situation… The relevant properties are described in detail in Appendix B.