Usable Development

Media-Specific CSS Tutorial

Overview

  1. Introduction to Media-Specific CSS
  2. @media Approach to Implementing Media-Specific Styles
  3. media Attribute Approach to Implementing Media-Specific Styles
  4. @import Approach to Implementing Media-Specific Styles
  5. <link /> Approach to Implementing Media-Specific Styles
  6. Recommendations for Print Stylesheets
  7. Tutorial Details

Introduction to Media-Specific CSS

Current Browser and Device Support for Media Types

Media Types and Legacy Browsers

@media Approach to Implementing Media-Specific Styles

@media Example 1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Usable Development: @media Example 1</title>
  <style type="text/css"><!--
  @media screen {
    body {font: 75%/1.4 verdana,geneva,lucida,arial,sans-serif;
          background: #fff; color: #000;}
    h1 {font-size: 160%; color: green; font-style: italic;}
  }

  h2 {font-size: 140%; color: purple;}

  @media print {
    body {font: 12pt georgia,serif;}
    h1 {font-size: 18pt;}
    h2 {font-size: 15pt; color: #000;}
  }
  --></style>
</head>
<body>
<h1>Media-Specific CSS</h1>
<h2>Example 1</h2>
<p>Sample text</p>
</body>
</html>

See how the first @media example renders

@media Example 1 Considerations:

@media Example 2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Usable Development: @media Example 2</title>
  <style type="text/css"><!--
  body {font: 75%/1.4 verdana,geneva,lucida,arial,sans-serif;
        background: #fff; color: #000;}
  h1 {font-size: 160%; color: green; font-style: italic;}
  h2 {font-size: 140%; color: purple;}

  @media print {
    body {font: 12pt georgia,serif;}
    h1 {font-size: 18pt; color: #000; font-style: normal;}
    h2 {font-size: 15pt; color: #000;}
  }
  --></style>
</head>
<body>
<h1>Media-Specific CSS</h1>
<h2>Example 2</h2>
<p>Sample text</p>
</body>
</html>

See how the second @media example renders

@media Example 2 Considerations:

media Attribute Approach to Implementing Media-Specific Styles

media Attribute Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Usable Development: media Attribute Example</title>
  <style type="text/css" media="screen"><!--
  body {font: 75%/1.4 verdana,geneva,lucida,arial,sans-serif;
        background: #fff; color: #000;}
  h1 {font-size: 160%; color: green; font-style: italic;}
  h2 {font-size: 140%; color: purple;}
  --></style>

  <style type="text/css" media="print"><!--
  body {font: 12pt georgia,serif;}
  h1 {font-size: 18pt;}
  h2 {font-size: 15pt;}
  --></style>
</head>
<body>
<h1>Media-Specific CSS</h1>
<h2>Example 3</h2>
<p>Sample text</p>
</body>
</html>

See how the media attribute example renders

Considerations with the media Attribute Example:

@import Approach to Implementing Media-Specific Styles

@import Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Usable Development: @import Example</title>
  <style type="text/css"><!--
  @import url(screen.css) screen;
  @import url(printed.css) print;
  h2 {font-size: 140%; color: purple;}
  --></style>
</head>
<body>
<h1>Media-Specific CSS</h1>
<h2>Example 4</h2>
<p>Sample text</p>
</body>
</html>

The screen.css file contains:

body {font: 75%/1.4 verdana,geneva,lucida,arial,sans-serif;
      background: #fff; color: #000;}
h1 {font-size: 160%; color: green; font-style: italic;}

The printed.css file contains:

body {font: 12pt georgia,serif;}
h1 {font-size: 18pt;}
body h2 {font-size: 15pt; color: #000;}

See how the @import example renders

@import Example Considerations:

<link /> Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Usable Development: &lt;link /&gt; Example</title>
  <link rel="stylesheet" type="text/css" href="screen2.css"
   media="screen,projection" />
  <link rel="stylesheet" type="text/css" href="printed2.css"
   media="print" />
</head>
<body>
<h1>Media-Specific CSS</h1>
<h2>Example 5</h2>
<p>Sample text</p>
</body>
</html>

The screen2.css file contains:

body {font: 75%/1.4 verdana,geneva,lucida,arial,sans-serif;
      background: #fff; color: #000;}
h1 {font-size: 160%; color: green; font-style: italic;}
h2 {font-size: 140%; color: purple;}

The printed2.css file contains:

body {font: 12pt georgia,serif;}
h1 {font-size: 18pt;}
h2 {font-size: 15pt;}

See how the <link /> example renders

<link /> Example Considerations:

Recommendations for Print Stylesheets

  1. Switch fonts from sans-serif to serif

    • Serif fonts are slightly easier to read than sans-serif fonts on the printed page.

  2. Make sure that text colors and border colors are black

    • There is no need to switch printers into color mode because one heading is a color other than black.

  3. Specifying display: none is useful for removing tags and their content from the print output

    • All child and descendant elements are also removed from display.
    • Use img {display: none;} to remove images in the printed version.
    • Just keep in mind that elements and content instructed to display: none are ignored by some screen readers, but hopefully the screen reader is not using the print stylesheet.

  4. Use display: none to hide content from the screen display, which then appears in the print output

    • As long as screen and print styles are separate (they do not interact), the content will automatically appear when printing.
    • Just keep in mind that elements and content instructed to display: none are ignored by some screen readers and screen readers are likely to be using the screen stylesheet.

  5. Tables-based layouts effectively 'lock' text at a given location on the page

    • Not all browsers respond well to attempts at restructuring table layouts when printing (the IE 6 and IE 7 browsers being the worst at this, given their limited support for the numerous values available for the display property).
    • The only reliable thing that can be done cross-browser with tables is display: none to remove cells (and be sure to get the entire column and not just part of it).
    • Layouts using divs are much easier to modify when printing.

  6. Allow printed output to render in the normal flow

    • Positioned elements can render off the printed page (or partially off the page), while floated elements can also get clipped.
    • In some cases the floated element or positioned element cuts off all printing after it, so that the rest of the document is lost.
    • Such printing anomalies have historically been in the Gecko-based browsers (e.g., Firefox).

  7. Allow printed output to fill up the printed page width naturally

    • Setting fixed widths for areas can cause content to be cropped in many browsers (IE 7 is the exception; it scales content to fit the printed page).
    • It is best to allow block-level elements to naturally fill up the width of the printed page and flow content to the next line when necessary.

  8. Control page breaks via CSS

    • A way to control page breaks in printed output is via page-break-before and page-break-after, which need to have a value of always to work in IE browsers.
    • For example: 
      page-break-before: always;
page-break-after: always;
    • Just be careful with page breaks inside tables; those are likely to be problematic.
    • It is most reliable to insert breaks between block-level elements.

  9. Opera does not download images that are display: none in the screen styles

    • As a result, these images will never render when printing (printing does not cause the image to be downloaded from the server).
    • Your best approach is to absolutely position the image out of the viewport (such as top: -9999px;) in the screen display, so that it downloads but is not visible in the screen output. That approach allows it to be used in the print output.

  10. Background images will likely not print

    • Keep this in mind when creating your layout.
    • If an image is a background yet you feel it is important to include it when printing, you can call it twice in the screen output (once as a CSS background image and again using an <img /> placed outside the viewport).
    • If you have text positioned on top of that <img /> you will definitely have problems getting the text color to change to something other than black across all the browsers.
    • If you definitely want background images to not print use your print styles to remove them and set a white background color.

  11. If desired (and it may not be), you can display URLs after links in the print output

    • This is handled via generated content, such as: 
      a:after {content: " (" attr(href) ") ";}
    • One issue with this approach is that IE 6 & IE 7 lack support for generated content.
    • A document with lots of links can also result in a very cluttered printout so use with caution.
    • Approaches based on JavaScript are much more elegant; this document uses such an approach in its printed output.

  12. Sequence media-specific styles carefully if there are styles applying to all media

    • If you have styles specified for all media (or have no media specified, which then defaults to all), place print-specific styles (or call those styles) after the other styles.
    • This is important because the later position of the print styles will give them an edge in the cascade when there is conflict between rules and their specificities match.
    • Avoiding styles applied to all media eliminates this concern.

  13. Test thoroughly cross-browser and cross-platform

    • Almost all browsers leave the print margins under the user's control
      • Users specify these in the browser settings and our own padding and margin settings add to what the user has specified.
      • The Mac version of Opera allows the user to override those with their own margin and padding settings and therefore put content right up against the left / right edge of the printed page.
      • Make sure that the result is acceptable across browsers.
    • Layout anomalies can occur when printing from Gecko-based browsers (e.g., Firefox)
      • Sometimes the anomaly (such as linked text losing spacing to its left and right sides) is only in the Print Preview and when the document is printed the spacing is fine.
      • Other times it is a position or float issue and printed content is getting lost.
      • As long as screen and print styles are separate, however, there should not be any floating or positioning impacting the print layout (those instructions would only be in the screen-specific stylesheet).
    • Text rendering anomalies are fairly common in Opera's print preview
      • Older versions of Opera (e.g., Opera 8.x) handled text just fine in their print preview.
      • Version 9.x+ have had lots of anomalies with text display, in particular running text together.
    • Some browsers bring their own unique markup rendering when printing
      • Gecko-based browsers (e.g., Firefox) and Internet Explorer 8 repeat <thead></thead> and <tfoot><tfoot> rows if a table prints across multiple pages and that structural markup is used.
      • No other browsers do this and most of the time the repetition works well.
      • The only time it doesn't work nicely in Firefox is when the table just barely crosses into the next page, because then the repeated header has little value. For Internet Explorer 8 there are bizarre line drawing issues with cells that cross pages. As always, test thoroughly.

Tutorial Details