Printer friendly

To create a printer friendly page I initially experimented with swapping the .css file using the code below:

<link rel="stylesheet" type="text/css" href="./css/main.css" id="printswap">
<button class="printBtn">Printer Friendly</button>

function printerButton() {
 document.getElementById('printBtn').addEventListener('click', function () {
 printer = false;

The code works, the .css file is changed and immediately reloaded, but I quickly realised the drawbacks heavily outweigh the positives.

The thought process and experimentation went something like this:

  1. I tried using the new {all: unset} (MDN, 2017a) selector/attributes. It doesn’t really work and I was trying to reset a whole blob of stuff without being picky (using “*” no less). Result = mess.
  2. To do this properly I would have to unpick the CSS and create a whole new style sheet, with a resulting extra HTTP request.
  3. Why am I not using @media print – I already have a perfectly good layout that would work for print – it is the one for small screens. And this would mean no JS, and no HTTP request.
  4. The print @media query needs to be the bottom one, to override all others.

I duplicated the small screen media query as the print query and added a few other things to make the print version friendlier:

#bubbles {display: none;} //get rid of the bubbles in the background – this ID is on the <canvas> tag.
* img {max-width:50%;} // change all images to max 50% of the page width


Mozilla Developer Network. (2017a). all. [online] Available at: [Accessed 10 Dec. 2017].


Please find all references here.

Leave a Reply