Note: 55

TIL about the print media query and the @page rule which together let you define how your website should appear when printed with ctrl+p.

For example:

@media print {
    @page {
        size: legal portrait;
    }
}

will, afaict, resize your viewport to fit the html document into one piece of legal size printer paper. Any other CSS media queries you have that care about size (e.g. max-width) will be applied accordingly.

You can also add normal CSS rules to the media query block, which lets you do things like change the colors of things to look better in black-and-white, or to hide unnecessary elements.

It’s neat!