Print CSS

To enable a 'print stylesheet' what we are doing is telling the browser what these CSS rules are for when the document is printed. One method of doing this is to link an additional stylesheet by using the link element.

<link rel="stylesheet" media="print" href="print.css">

@media only screen and (min-width:35em){
}
@media print,(-webkit-min-device-pixel-ratio:1.25),(min-resolution:1.25dppx),(min-resolution:120dpi){
}
@media print{*,*::before,*::after{background:#fff !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important}
a,a:visited{text-decoration:underline}
a[href]::after{content:" (" attr(href) ")"}
abbr[title]::after{content:" (" attr(title) ")"}
a[href^="#"]::after,a[href^="javascript:"]::after{content:""}
pre{white-space:pre-wrap !important}
pre,blockquote{border:1px solid #999;page-break-inside:avoid}
thead{display:table-header-group}
tr,img{page-break-inside:avoid}
p,h2,h3{orphans:3;widows:3}
h2,h3{page-break-after:avoid}
}

This method does keep your print styles separate from everything else which you might consider to be tidier, however, that has downsides.

The linked stylesheet creates an additional request to the server. In addition, that nice, neat separation of print styles from other styles can have a downside.

While you may take care to update the separate styles before going live, the stylesheet may find itself suffering due to being out of sight and therefore out of mind — ultimately becoming useless as features are added to the site but not reflected in the print styles.

The alternate method for including print styles is to use @media in the same way that you includes CSS for certain breakpoints in your responsive design.

This method keeps all of the CSS together for a feature. Styles for narrow to wide breakpoints, and styles for print. Alongside Feature Queries with @supports, this encourages a way of development that ensures that all of the CSS for a design feature is kept and maintained together.

@media print {

}

Print CSS

To enable a 'print stylesheet' what we are doing is telling the browser what these CSS rules are for when the document is printed. One method of doing this is to link an additional stylesheet by using the link element.

<link rel="stylesheet" media="print" href="print.css">

I do not use cookies on this website

🍪🍪 What cookies?


Your privacy is important. That's why this website doesn't track visitors with fingerprinting, your IP address or cookies.


Web analytics data is your own. Reclaim it.

Gain back control with a privacy-focused web analytics platform (using a cookie-less architecture) from: Data Centurion.