Hide from Print

Have you ever wished you could hide a portion of HTML from being printed when a visitor prints a web page? Well, believe it or not, it's a simple feat to accomplish, and it will leave observant viewers thoroughly astounded by your greatness.

Hiding objects from print is something we like to do on Spoono on certain pages like this one. We hide undesirable objects like ads and the back button below from printing. (Go to Print Preview to see for yourself). This trick can be accomplished by creating a print-only style that has a hidden visibility and applying it to certain objects. The most efficient way to do this is by linking to an external CSS document like so:

Note that the media attribute is set to the value "print." This tells browsers to only use the classes in this file when printing. If you also have a regular CSS file that loads styles for regular screen display, you can leave the code for that untouched. Now, the following is the code that needs to go into your hide.css file (or whatever you've named it):

That was certainly simple enough. The last step is to define the hide class for the content that you want to hide. To do this, you can add a class attribute to any of the following tags: <div> <p> <span> <td> plus many others. So here is an example for the code of hidden content:

That's it. Now don't you feel sneaky?

Computer Playground · Templates Resource