Tell me more ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.
up vote 5 down vote favorite
2

A number of websites that I use have really bad stylesheets for the print media, but their screen stylesheets are quite good. Is there any way to tell my browser to ignore the print stylesheet and just print with the screen stylesheet? I'd also like to do this when I want to show clients the difference between the two. Thanks.

share|improve this question
If websites in question are of third-parties, maybe you could try Chrome's Developer Tools (Ctrl+Shift+I), then right-click on node/element(the print stylesheet in this case) and select Delete This Node. – Davinder Aug 2 '12 at 14:52

migrated from webmasters.stackexchange.com Aug 2 '12 at 11:37

4 Answers

up vote 3 down vote accepted

Using Chrome Developer Tools (Ctrl+Shift+I) is the only thing I have found that works.

  1. Search for all instances of media="screen" and delete that attribute.
  2. Then search for media="print" and delete that whole link.
  3. Then try printing.

This generally gives me the page with screen styling.

If you really just want to disable print styles, you can install the Web Developer extension (I think there is a version for Firefox and Chrome). It has a button to disable print styles. However, it does not extend the "screen" style to print, so most of the time it does not work the way you hope it will.

share|improve this answer
Thanks. That's a great solution. Depressing, but great. The main website that I'm having a problem with is Wired, which for some reason prints horribly but looks great on the screen. – vy32 Sep 23 '12 at 3:52
up vote 1 down vote

1.) Do anything James said ;)

You can check the output opening the Chrome Developer Tools settings (right bottom corner) and select in "Overrides" the option "Emulate CSS media print"-view. By toggling this option you can compare print and screen view. Have fun!

2.) Install this addon: https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk

Now background-images and colors are printed as well.

Bug: Doesn't work with CSS sprites.

share|improve this answer
up vote -1 down vote

Try to enable "Print background (colors & images)" option in Page Setup and check how it looks in Print Preview (It's for FF).

share|improve this answer
Does not have the desired result. Sorry. – vy32 Aug 7 '12 at 2:33
up vote -2 down vote

the proper way to do this is to have a separate css for the printers and use the @media rule

have a look to this arcicle http://www.w3schools.com/css/css_mediatypes.asp

http://www.w3.org/TR/CSS2/media.html

share|improve this answer
1  
-1, but not downvoting because your rep is only 1.. @vy32 said A number of websites that I use Maybe the sites he use are not his own websites. – Davinder Aug 2 '12 at 14:57
This is a fantastic free server to print any website content printfriendly.com – open-ecommerce.org Aug 2 '12 at 19:13
You don't understand the problem. The website has a separate CSS for printers and it's horrible. I want to have the printout look THE SAME AS THE SCREEN. So I want to disable the @media rule for printers and use the @media rule for the screen when printing. How do I do that? – vy32 Aug 3 '12 at 16:07

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.