No print vs print and no screen

HTML & CSS
1

I have this:

 <style media="screen">
  .noPrint{ display: block; }
  .yesPrint{ display: block !important; }
</style> 
<style media="print">
  .noPrint{ display: none; }
  .yesPrint{ display: block !important; }
</style>

I use: <div class="noPrint"> for no print what is on the screen.

If I want to hind from viewing on screen, but want to print what is hidden on screen, can I use the same css but with a different class or something else best to use?

Thank you.

2

Hi,
Rather than two stylesheets you can target your print rules with @media.
Then the rules for screen can just go with your normal styles.

Try to stay away from !important , it usually means that there was some bad logic in your css.

.noPrint,
.yesPrint {display:block;}

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

In that case you might do something like this…

.hide-on-screen {display:none;}
.yesPrint, .noPrint {display:block;}

@media print {
   .noPrint {display:none;}
   .hide-on-screen {display:block;}
}
3

If your print styles get real extensive you can link to a print stylesheet lower in the cascade in your <head> tags

<link rel="stylesheet" href="css/screen.css" media="all">
<link rel="stylesheet" href="css/print.css" media="print">
4

Thanks for that:

The <div class="hide-on-screen"> work fine (didn’t show on screen, but the noPrint didn’t - it printed.

Any thoughts?

5

I think your reply may be missing some text. ( It’s fixed now)

work fine (didn’t show on screen, but the noPrint didn’t - it printed.

Can you post the css in the order it was in your stylesheet, it may be a cascade issue

6

Fixed.

@javascript7: you need to place a backtick ` before and after inline code to make it show up in your post.

7

Just looked through one of my documents I print on a regular basis and I see where I had done this in the stylesheet. I think that was to get away from using !important

@media all {
  .hide-on-screen,
  .noPrint {display: none;}
}

@media print {
  .hide-on-screen,
  .noPrint  {display: block;}
}
8 
 <style media="screen">
.hide-on-screen {display:none;}
.yesPrint, .noPrint {display:block;}

@media print {
   .noPrint {display:none;}
   .hide-on-screen {display:block;}
}
</style>

Then:

<div class="hide-on-screen"> WORKS FINE

<div class="noPrint">

DIDN’T WORK

I tried using the period before the noPrint and that didn’t make any difference.

9

Look back at post#7 and see if that will work for you

<style media="screen">
Could be causing a conflict

Try <style>

EDIT:

This seems to be working fine on my screen and print preview

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
.hide-on-screen {display:none;}
.yesPrint, .noPrint {display:block;}

@media print {
   .hide-on-screen {display:block;}
   .noPrint {display:none;}
}
</style>
</head>
<body>

<div class="hide-on-screen">Hidden on screen and shown in print</div>
<div class="yesPrint">Show on screen and print</div>
<div class="noPrint">Shown on screen and hidden in print</div>

</body>
</html>
10

Yes, thanks, that does work. I just must have, by mistake, messed up somewhere!

For my education, why is !important not good to use?

Thanks for you time and expertise, I appreciate it.

1 Like
11

It puts way too much specificity on the styles, it can wind up causing more harm than good.
Use it only as a last resort when there is no other possible way out of a trap.

Here’s some good info for reading

How is specificity calculated

Some rules of thumb:

  • Always look for a way to use specificity before even considering !important
  • Only use !important on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap or normalize.css).
  • Never use !important when you’re writing a plugin/mashup.
  • Never use !important on site-wide CSS.
12

Thank you for that. I will copy and paste that in my information library of good coding.

1 Like
13

You are not by any chance using !important elsewhere in your style sheet. That may explain why it does not work for you without it. Also a good example of how it causes problems.

14

Thanks for that! I might be elsewhere which I will now check.

15

I was going to say that the dev tools will tell you. But then remembered that they don’t work on print previews.
I recall thinking a while back when working on a print stylesheet that being able to use “Inspect” on the preview would be really useful in debugging.

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.