Web Design in a Nutshell, 3rd Edition

@media rule

The @media rule enables style instructions for a number of media to be placed within one style sheet. Each @media rule can be interpreted as, “If the medium is going to be this, use these style instructions.” Using the same style sheet information from the original example, the style sheet would look like this:

<style>@media screen {
    #printonly {display: none;}
    body {background: #CCC; color: #333; font: 95%;}
    h1 {font: 1.5em Futura, Verdana, sans-serif; color: #C03;}
    p {font: 1em/1.5em Verdana }
}
@media print {
    #masthead {display: none; }
    #printonly {padding-bottom: 10px; border-bottom: 1px solid;
        font-size: 10pt; }
    body {background: white; color: black; width: auto; }
    h1 {font: 18pt Times bold;}
    p {font: 12pt/18pt Times; }
}
</style>

Screen Versus All

The first style sheet in this example targets screen display specifically. If the media had been left unspecified for that style sheet, it would apply to all media (because all is the default).

A style sheet that targets all media may be used strategically if there is a lot of redundant information between the screen and print versions. The print style sheet would then contain only styles that override the general settings.

When using this approach, be careful that unwanted styles that apply to “all” don’t leak through into the print version. It may be necessary to increase the specificity of the selectors in the print style sheet or use the !important qualifier to ensure that critical styles are properly overridden.

It may ...