Same print CSS as screen

Question

It seems like there should really be an easy solution to this, but so far I've been unsuccessful in finding one.

I'm using Zurb Foundation and I'm basically creating a live form that takes inputs from a form (above), and fills in a content (below) using angular.js. Users will then print the page to a PDF. I'd like to maintain the layout I have for the content below, and I'd like to hide the form above when printing. Zurb has a fine "hide-for-print" css rule that seems like it should work just fine when applied to the form above, but when I toggle print stylesheets, it basically strips all CSS and goes back to ugly.

Suggestions?

Answer 1

What I have done in these type situations is use a separate file for the print.css.

<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

If the browser is printing, the global.css file will be loaded first and than the print.css file will overwrite anything aftewards.

Keep in mind though, that all background: * rules will be turned off in all browsers by default when printing, so some styles are going to be compromised regardless.

Answer 2

Have you tried using CSS media queries for print media?

.foo {
    height:150px;
    width:150px;
    background-color:#F00  // see what I did there?
}

.bar {
    height:10px;
    width:50%;
    border-radius:5px;
    background-color:#000
}

.baz {
    width:100px;
    height:150px;
    background-color:#FFF;
}

@media screen {
    .baz {
        display:block;
    }
}

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

Now, only some of .baz's properties are targeted by the media queries. You can feel free to put in any of .baz's properties inside or outside of the queries themselves. Likewise, you can put all of .baz's properties in the media query, but I gather that's not what you're looking for.