CSS – Simple print styles to never have to suffer

So at the agency I work at we got assigned to re-build a site for a law firm and among the things they desired, they also wanted to have a print button along with one of the forms they have within the site. Sounds simple enough right? Well as my venture to create a button that triggered the same operation as ctrl + p I discovered the @print css decorator, and made this whole endeavour a breeze.

My use case

In my situation I simply used the @print css style to hide content and adjust the size of the form I was looking at print. My stylesheet looked like this.

@media print {
    #form {
        width: 90%;
        -webkit-transform: scale(0.7);  /* Saf3.1+, Chrome */
        -moz-transform: scale(0.7);  /* FF3.5+ */
        -ms-transform: scale(0.7);  /* IE9 */
        -o-transform: scale(0.7);  /* Opera 10.5+ */
        transform: scale(0.7);
        margin: -150px -125px 0;
    }
    #id1, #id2{
        display: none;
    }
}

I use the ids to some text that didn’t need to be printed and then used the width, scale and margins to adjust the placement and size of the form when printed

Additional resources

CSS: The Perfect Print Stylesheet by Andreas Hecht
He does an amazing disection of this bomb print css stylesheet that makes wonders of just about all cases.

Hope this was of use happy coding ✌️😁