CSS Media Selectors: Screen versus Print

...

As we move ever onward with our online web presence there are certain conventions that we’ve already agreed upon and have implemented (opening external links via target="_blank", using icon sprites indicative of what type of link the hyperlink refers to (email, pdf, external link, tag, etc.)). As we march ever onward there are new technologies, new techniques, and even old technologies/techniques that we’re not currently using to be considered.

To that end I bring up for your consideration and input the CSS Media selector, specifically for print.

Now, there are some non-developers included in this conversation so I’ll “water it down” a little bit (developers, don’t give up on me here).

CSS allows us to apply a set of stylistic rules to our site, ya’ll know that already. What you may not have known is what we’re currently NOT using: CSS Media Selectors.

CSS Media Selectors let you specify the medium on which your style rules should be applied: screen versus print.

Obviously, we deal primarily in the Screen medium while we’re developing web pages, but what happens when people print our pages?

Printing screws up how web pages look on the printed page due to several reasons, including but not limited to:

  • Margins
  • By default NOT printing background images or colors
  • Screen-based layouts do not necessarily translate well into printed layouts
  • Etc.

We can use CSS Media Selectors to essentially write an entirely new set (or override our existing set) of style rules.

This article (http://css-tricks.com/dont-rely-on-background-colors-printing/), although it’s about a related topic, shows what you can do with a webpage that is printed. Basically, you’re re-styling the page to look good on a printer.

What does this mean to all of us?

  • For the business it would mean that the data on our web pages would now be able to be printed in a format that can be easily referenced offline, not just on-screen.
  • For marketing/graphics it means that each “screen” styleguide that is delivered needs to be accompanies with a “print” styleguide (what the page should look like when printed).
  • For developers it would mean writing a new set of CSS styles to realize the “print” styleguide.

Thoughts?

2 thoughts on “CSS Media Selectors: Screen versus Print

  1. Pingback: CSS Media Selectors: Screen versus Print | Adobe Tutorials
  2. We can use CSS Media Selectors to essentially write an entirely new set (or override our existing set) of style rules.

Leave a Reply