CSS media:print include something that wasn't displayed on screen?

Question

I have the following

 @media print { DIV { display: block; } }

 <html> <body> <div style="display:none">You can't see me!</div> </body> </html>

But when I tried this, I still couldn't see "You can't see me!" when I print. How can I get this to show up for printing?

Answer 1

Assign a class to your div so you can specify what needs to be seen when being printed:

<html>
    <body>
        <div class="print-only">You can't see me!</div>
    </body>
</html>

Then your CSS would look like:

.print-only {
    display: none;
}
@media print {
  .print-only {
    display: block !important;
  }
}

Answer 2

First of all, from your code I can see you use an inline style of display: none . This will prevent the div from showing. Remove the inline style to correct this.

CSS media:print include something that wasn't displayed on screen?

Question

2 answers

solution1
3 ACCPTED 2017-09-01 17:26:50

solution2
1 2017-09-01 17:29:09

CSS media:print include something that wasn't displayed on screen?

Question

2 answers

solution1 3 ACCPTED 2017-09-01 17:26:50

solution2 1 2017-09-01 17:29:09

solution1
3 ACCPTED 2017-09-01 17:26:50

solution2
1 2017-09-01 17:29:09