Recommend a way to optimize a certain webpage for prints using CSS

In this article, we are going to see how we can optimize a webpage for prints. Using CSS and media query in it we are going to achieve the task.

Printing a webpage is a very common practice and users can print a webpage for various reasons like storing data, some information that needs to be printed like tickets, etc.

Approach: Using the “@media print” media query in CSS, we can specify what styles the webpage needs to apply when it is considered for printing.

Syntax:

@media print{
    /* CSS CODE */
}

You can place this query at the end of your stylesheet so that the styles apply to each element overriding the previous styles. Moreover, you can use “!important” to make your styles compulsory.

Tips to follow:

• Remove the unnecessary/redundant information like header, footer, CTA, etc which need not be there in print.  You can simply do “display: none;” for all those elements using the following syntax:

@media print{
    selector{
        display: none;
    }
}

• Use the “@page” rule of CSS to define margins, paddings, etc for a particular page’s specific style.

@page{
    margin: 1cm;
    border: 2px solid black;
}

• If you are playing with margins and padding then try to use “cm” instead of “px”.
• You can add the address of the link after the text of the link as the link text will not be that useful in print form. You can do that by adding this line:

@media{
    a::after{
        content: "("attr(href)")";
    }
}

• Make your text readable and try to remove the excess background color and background images wherever possible.
• Make the website look simpler, concise, and clear for achieving much more printer friendliness.

References:

• CSS media queries
• CSS | @page rule