Greytower Technologies

If the navigation is not visible, this link will take you to it.

 

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

Example
    <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:

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:

Example
   <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

Media Types
Available from http://www.w3.org/TR/REC-CSS2/media.html
The @import rule
Available from http://www.w3.org/TR/REC-CSS2/cascade.html#at-import
Linking Style Sheets to HTML The WDG CSS Reference
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
print 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

Return to the top of the document