While most people don’t feel the need nor want to print websites anymore, some people still print them. Developing a website to see how it looks when printed can be a hassle. You can keep printing your pages on paper until you get things to look right or you can keep previewing how it would look in your browser’s print dialog window. You can also temporarily change the CSS media of your print CSS to “screen” while you develop. Fortunately, if you use Google Chrome, there’s an ever easier way as pointed out by my colleague, Keith Shaw, the other day. If you open a page in Chrome and Chrome’s Inspector, you can hit the escape button to toggle additional controls as shown in the screenshot below. With the control panel open, click “Emulation”, “Screen”, and check the “CSS Media” checkbox with the media selection set to “print”. You can then view how your pages will look when printed right in your browser and easier adjust CSS styles instantly.
