CSS Print Styles

So, part of the assessment for the IDM 18 Web Development module is to create 2 stylesheets that are “switchable” in Firefox. As I was actually doing a site for a client, I thought that I would just do an additional print style sheet.

Here’s the thing – I have created 2 style sheets that are switchable in Firefox (following Liz Guy’s instructions) – unfortunately, however, this method does not actually work when printing…and I need it to. I will therefore submit the “switchable” Shackadelic site on zip but for the actual live site I have used another method.

Some links on the subject here :

http://edutechwiki.unige.ch/en/CSS_for_print_tutorial

http://www.benmarshall.me/css-print-stylesheet/

http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/

Moral of the story…having 2 switchable styles is great if you need to be able to change them in Firefox but do not define a print style like this, use the @media print { styles go here } rule. As outlined here :

http://benfrain.com/create-print-styles-using-css3-media-queries/

* Update 10/04

Apparently this does not work consistently either. Some additional info here: http://stackoverflow.com/questions/20172681/css-media-print-rule-does-not-work-anymore

So, for now I have gone back to 2 x style sheets defined like so:

1. <link href=”themes/mytheme/css/styles.css” media=”screen” rel=”stylesheet” type=”text/css” />

2. <link href=”themes/mytheme/css/print.css” media=”print” rel=”stylesheet” type=”text/css” />

At present, this seems to work. Although this can also depend on the browser being used…