14

Im having problems with displaying ONLY some elements ONLY on print page. For example i have a page, where users can see print preview (simple javascript). On that print page im showing just some elements from page (not all of them), using for that:

@media print {
  .noPrint {
      display:none;
  }
}

Now when i apply .noPrint to an element, it will not be showned in print page. But, how it is possible to create for example div on a page, that will be vissible on "print page" but not on regular page.

Is this enough, and supported by most browsers?

@media screen, projection, tv {


 .dontShowThis {
    display:none
  }
}

And now if i want to show element on print page but not on regular page i will do this

<div class="dontShowThis printIt">Some content goes here</div>

Tnx

Deduplicator
  • 43,322
  • 6
  • 62
  • 109
cool
  • 2,755
  • 3
  • 27
  • 54

1 Answers1

31

I did somthing similar a while ago, this is how I did it:

@media screen
{
    .noPrint{}
    .noScreen{display:none;}
}

@media print
{
    .noPrint{display:none;}
    .noScreen{}
}

<div class="noScreen">Some content goes here</div>

AFAIK this is supported by all major browsers, even IE8 started to support it.

Matthew Lock
  • 12,582
  • 11
  • 88
  • 124
Radu Maris
  • 5,468
  • 4
  • 38
  • 54