Learning a trick everyday

..helps to keep boredom away

Today a colleague asked if he could hide something when printing a web page. Well yes, css can do that easily. Not too difficult as well. Add a class of donotprint to the element in question. Then add a print stylesheet with the following rule.

.donotprint {display:none;}

Yes, but no. He just wanted to add some style to the element in the html. Adding a stylesheet was not an option. There was a quick fix needed in an old site.

So I gave my mind a twist and decided to give something a try. I added the following to the html page.

<style type="text/css" media="print">
  .donotprint {display:none;}
</style>

Much to my surprise: it works!

I never knew that one could use the media attribute like this in the head-section of a page. I seemed possible, that's why I tried it, but I thought it would fail. I certainly had not seen this trick being used before.

I have learned something again. Though probably something I might never use again, but still.

Tags:

• css
• print