Webpage using @media CSS rule to prevent printing

Question

I have a website which I want to print to PDF using Firefox.

I can see the website correctly on the screen, but printing it results in an empty white page.

By using the Firefox Inspector Tool, I have discovered that the problem resides in the webpage using CSS rules to declare elements hidden when printing, through the @media css at-rule.

It does something like:

@media print {
    div.no-print,
    div.no-print * {
        display: hidden !important;
    } 
}

How can I print my page like it is showed on the screen?

Answer 1

The solution is to overwrite this CSS with our own:

1. Download Stylus Firefox add-on
2. Overwrite the CSS:

@media print{
    div.no-print,
    div.no-print * {
        display: inline-block !important;
    }
}

Remember to re-define the display attribute for elements for which it should not be that, for example tables:

@media print{

    div.no-print table {
        display: table !important;
    }
        
    div.no-print table thead
    {
        display: table-header-group !important;
    }
    
    div.no-print table tfoot
    {
        display: table-footer-group !important;
    }
    
    div.no-print table tbody
    {
        display: table-row-group !important;
    }
    
    div.no-print table td {
        display: table-cell !important;
    }
    
    div.no-print table col {
        display: table-column !important;
    }
    
    div.no-print table tr {
        display: table-row !important;
    }
}