CSS vs. Media
This document will discuss the problem inherent in rendering content on different types of equipment - referred to here as media types. Imagine for instance how a layout, and with it the content, would appear when printed. Paper is, however, not the only media type for which a screen oriented layout would be inappropriate.
Imagine, again, your layout and your content projected onto a one hundred inch screen, rescaled down to the monitor of a PDA, or translated into Braille. It is quite easy to imagine elements of design that break down in the most spectacular fashion - how would text in 12 point appear on a 8 foot movie screen ?
The common solution has been to provide separate versions of a webpage for each type of media, typically in the form of a 'printer friendly' page. This method is not without it's drawbacks, both in terms of maintainability, but also in terms of the rather restricted control you get over the layout of this printer version.
CSS - specifically CSS level 2 - has a different approach. Using the
@media at-rule and the <link> element
we can assign different styles to be used for each media type. In this
way you can have one CSS file for layout on screen, and one for layout
on paper.
CSS Syntax
There are two methods of supplying media-specific styles in CSS 2:
linking to external files, and specifying the target media for a group
of styles with the @media rule.
Linking External Files
The usual syntax for linking an external CSS file to a webpage
<link rel="stylesheet"
type="text/css"
title="My CSS Properties"
href="stylesheet.css" >
can be augmented with the media attribute, by which you
specify the media type that this CSS file should apply to. Example:
<link rel="stylesheet"
type="text/css"
media="screen"
title="My CSS Properties"
href="screen-stylesheet.css" >
This link now indicates that the file screen-stylesheet.css
contains CSS properties suitable for rendering the document on a
screen type device, typically a regular computer monitor.
A complete list of the currently defined media types, alongside their descriptions and a rough guide to support in current browsers is provided at the end of this article.
If you now want to add a stylesheet specifically for use when printing, the code might look something like this:
<link rel="stylesheet"
type="text/css"
media="screen"
title="My CSS Properties"
href="screen-stylesheet.css" >
<link rel="stylesheet"
type="text/css"
media="print"
title="My CSS Printer Properties"
href="print-stylesheet.css" >
A browser which support CSS 2 would now - when rendering this page
on a screen device - download and apply the file
screen-stylesheet.css. When rendering onto paper, the
file print-stylesheet.css would be downloaded and
applied.
The names screen-stylesheet.css and
print-stylesheet.css can of course be changed to whatever
filenames you feel comfortable using.
The markup code used above to link external stylesheets are specific to HTML. No XML specific code has been supplied.
Embedding Styles
On occation it might not be desireable to link to external files, and so CSS supplies a method with which you can embed styles in the document:
<style type="text/css">
P {
font-family : verdana, helvetica, helvetic, sans-serif ;
font-size : 12px ;
margin-left : 2em ;
margin-right : 2em ;
}
</style>
This is common practice for any author using CSS. However, CSS 2 gives
you the option of applying media specific rules to your styles. This is
done with the @media at-rule:
<style type="text/css">
@media screen {
P {
font-family : verdana, helvetica, helvetic, sans-serif ;
font-size : 12px ;
margin-left : 2em ;
margin-right : 2em ;
}
}
@media print {
P {
font-family : garamond, bodoni, "times new roman", serif ;
font-size : 10px ;
margin-left : 2em ;
margin-right : 2em ;
}
IMG {
display : none ;
}
}
</style>
With the above, you'd declare that a P tag should be rendered differently on a screen and on paper - in this case with a different font and size. In addition, when printing on paper, any IMG tag should not be rendered.
It is also possible to import media specific styles through an
addition to the @import rule. Normally, you'd import
styles with a construct such as
@import url("mystyle.css");
This can be augmented by specifying the media type:
@import url("myprintstyle.css") print ;
in which case the styles will be imported only for use with the specific media. If no media type is specified, or type all is given, the import will be unconditional.
Support Today
Testing for support in todays browsers is usually limited to the screen and print media types. At the time of writing support has been found in Opera 5, Mozilla, Netscape 6 and IE from version 5.5 and upwards. Further information on support especially for the aural and braille types would be greatly appreciated.
A questionmark would be as to the effect of using multiple media types with browsers who has faulty or poor/no support for CSS. A point in case is Netscape's 4-serie browser, which has flawed support for CSS. Netscape 4.x browsers will ignore any styles declared with a media type other than screen. This flaw is not present in Netscape 6.x.
Browsers that do not support CSS at all are left with only the regular markup version of the page. In the case of pages constructed with content and layout properly separated in markup/CSS, this will leave the non-CSS browser to determine an alternative media rendering on its own. In such cases supplying - for instance - a printer friendly version of the page in PostScript or PDF format would be very nice.
Effects
All of these examples can be used from external stylesheet files as well as through the embedded styles method used here.
Escaping Netscape 4
As noted above, Netscape 4 is particularly odd in its treatment of CSS, and especially CSS 2 media types. However, this oddity can be used to our advantage. Since Netscape 4 ignore all styles for media types other than screen, lets play with using the media type named all:
<link rel="stylesheet"
type="text/css"
title="Styles"
media="screen"
href="limited.css" >
<link rel="stylesheet"
type="text/css"
title="Styles"
media="all"
href="full.css" >
What the above does, is take advantage of Netscape 4's ignorance of
media types. Netscape 4 will load the styles in limited.css,
but ignore full.css. Other CSS 2 supporting browsers will
load both, and since CSS properties are cascaded they will overload the
former with the latter.
Now you can put complex CSS properties in full.css, and a
more limited set in limited.css.
Fontability
Experience indicate that it may be better to use sans-serif fonts for text on computer screens, and serif fonts for text on paper. On paper, in addition, the font size can be reduced with less degradation in readability:
<style type="text/css">
@media screen {
P {
font-family : verdana, helvetica, helvetic, sans-serif ;
font-size : 12px ;
}
}
@media print {
P {
font-family : garamond, bodoni, "times new roman", serif ;
font-size : 10px ;
}
}
</style>
Links
When a visitor prints a document, having links underlined rarely improve readability. The same applies for having specific colors on linked text. What may enchance the experience on screen, might impede the same experience on paper. Turning links non-underlined and black-on-white might help:
<style type="text/css">
@media screen {
A:link {
color : #FF0000 ;
text-decoration : underline ;
}
}
@media print {
A:link {
background-color: #FFFFFF ;
color : #000000 ;
text-decoration : none ;
}
}
</style>
Image Visibility
Printing images may occationally be desirable, but in many cases graphical elements are used to make an on screen layout more powerful. On paper - and indeed on other media types such as braille having images present might just ruin the experience.
Here is an example that removes the border on images used as links on screen, whilst in effect removing the image alltogether when rendering on paper:
<style type="text/css">
@media screen {
IMG {
border-style : none ;
}
}
@media print {
IMG {
display : none ;
}
}
</style>
Color Chaos
More and more people come into the posession of color printers, but even so colors used on screen might not translate very well onto paper. The styles supplied for BLOCKQUOTE elements in this document server as an excellent - if somewhat lengthy - example:
<style type="text/css">
@media screen {
BLOCKQUOTE {
font-family : verdana, helvetica, helvetic, sans-serif ;
font-size : 14px ;
font-style : italic ;
background-color : #FFFF00 ;
border-style : solid ;
border-color : #FFD700 ;
border-width : 1px ;
padding : 4px ;
}
}
@media print {
BLOCKQUOTE {
font-family : garamond, times, utopia, serif ;
font-size : 12px ;
font-style : italic ;
background-color : #FFFFFF ;
color : #000000 ;
border-style : solid ;
border-color : #000000 ;
border-width : 1px ;
padding : 4px ;
}
}
</style>
Summary
For any forseeable future, CSS 2 multiple media types will not replace separate, alternative-media friendly content. With the current crop of browsers, it is quite possible to enhance the experience for many users by applying carefully chosen styles.
Using specific styles for printing, braille output, and speech synthesis of articles and documentation would be an invaluable addition to any website. Even in the case of browsers with broken support, this author believes the benefits to outweight any commonly encountered problems.
References
The @import ruleMay 12th 2001
Available from http://www.w3.org/TR/REC-CSS2/cascade.html#at-import
Linking Style Sheets to HTMLThe WDG CSS Reference November 30th 2000
Available from http://www.htmlhelp.org/reference/css/style-html.html
Media Types
| Media Name | Description | Support |
|---|---|---|
| all | Suitable for all devices. | IE 5.5+, NS 6+, Opera 5+, Mozilla |
| aural | Intended for speech synthesizers. | n/a |
| braille | Intended for braille tactile feedback devices. | n/a |
| embossed | Intended for paged braille printers. | n/a |
| handheld | Intended for handheld devices. | n/a |
| Intended for paged, opaque material. | IE 5.5+, NS 6+, Opera 5+, Mozilla | |
| projection | Intended for projected presentations. | n/a |
| screen | Intended primarily for color computer screens. | IE 3, 4, 5, 5.5, 6. NS 4, 5, 6. Opera 5, Mozilla, Konqueror |
| tty | Intended for media using a fixed-pitch character grid. | n/a |
| tv | Intended for television-type devices. | n/a |
This list is not definitive and may be extended in a later CSS specification. Note however - as the CSS 2 document state:
Authors should not rely on media type names that are not yet defined by a CSS specification.
Tina Holmboe, September 2001