Multiple medias in the print.css

Let’s say you have a printer-friendly page that consolidates information from multiple sections. The page uses the print.css as all instead of just print. Let’s also assume you want to show things on the screen, such as a link back to the referral page, and different elements on the printed page, such as the url of the referral page.

Simple HTML Example

Go back to the last page.

CSS solution

You can include multiple medias in one style sheet. Just declare the special rules under @media

@media print{/*show printer only elements, hide screen only elements */
.noprint {display:none;}
.print {display:block;}

Your main CSS file would have already declared .print {display:none;}.

Published by Ted

Accessibility is more than making sure images have alternate text. I work with engineers, product managers, and designers to understand how accessibility impacts the users, set realistic deadlines, and create the solutions to provide a delightful experience to all users, regardless of their physical, sensory, or cognitive ability.

Leave a comment

Your email address will not be published.