Question

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

Answer 1

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.