70

Firebug is an excellent tool to to show a screen media CSS for some HTML element, but is there a way to look at the print media CSS too? Or is there any other tool to see the print media CSS?

1

10 Answers 10

35

What about Web Developer Toolbar?
https://addons.mozilla.org/en-US/firefox/addon/60
when installed go to CSS -> Display CSS by media type -> Print

2
  • 10
    You might want to enable persist features under the options menu to save some sanity when reloading changes
    – alex
    Commented Aug 6, 2009 at 23:39
  • This is now dead, but see core Firefox answer stackoverflow.com/a/40377948/623519 Commented Nov 9, 2017 at 17:50
33

Newer Firefox

  1. Open devtools with F12.
  2. Go to Inspector tab.
  3. Open Rules subtab.
  4. There will be print media button.

enter image description here

Old firefox

Firefox does not need firebug now.

  1. Run developer toolbar by pressing Shift+F2
  2. Type media emulate print

Type media reset in order to return to standard view.

2
31

I would have never expected this to work, but it does. Install -both- the 1.5 beta of Firebug and Web Developer. When you choose the print css from Web Developer, the tools in Firebug suddenly work on the new print version of the page. So far I haven't found any problems with running both at the same time.

6
  • 17
    After installing web developer (addons.mozilla.org/en-US/firefox/addon/web-developer) the print view looked much different than an actual print. Commented May 12, 2011 at 14:25
  • 3
    It appears to use ONLY the print styles. :(
    – jezmck
    Commented Apr 10, 2012 at 8:17
  • 2
    @jezmck to my defense, that was in '09. :)
    – clintm
    Commented Apr 10, 2012 at 19:01
  • It appears to use ONLY print styles. A nice trick is to not only set your specific media types, but also set all other stylesheets to media="all, print". Works for me :-)
    – Jeroen
    Commented Jan 16, 2013 at 13:54
  • 1
    For me it appears to use also screen styles and just apply the print one on top
    – Andy
    Commented Feb 20, 2013 at 12:48
4

Use the Web Developer plug in. Then you can choose from the CSS menu which media you want the page to display as.

3

You might want to take a look at the webdeveloper toolbar - it allows you to select what CSS you want to see. In conjunction with firebug, it should be possible to see the print media CSS.

3

In Firefox (and some other browsers), you can see a static display of the print stylesheet by using Print Preview. It's nowhere near as useful as the web developer toolbar, but it can also help you understand what is going to be printed.

3

Actually, be aware that you might see @media print CSS when you don't expect it.

Like SO uses:

[..]@media print{#sidebar,#nav,[..],div.vote{display:none;}}[..]

...and hence one might expect the CSS panel in Firebug to somehow show:

@media print {
  #sidebar, #nav, [..], div.vote {
    display: none;
  }
}

But instead it shows the CSS as if the @media print is actually active, like:

#sidebar, #nav, [..], div.vote {
  display: none;
}

(See also the related issue report: CSS Panel does not have @media UI.)

3

Edit 2 After reading Arjan's answer, I realize that this solution does not address correctly sites using (or abusing) the @media print CSS. (See example below.) But I think this solution still holds valid as a "non-perfect-quick-and-dirty-trick", above all for code that you have written and that you know beforehand that it doesn't have this.


With Firebug, you also can edit the <link rel="stylesheet" type="text/css" ...> and <style> tags to your convenience.

For example, you can switch an original

<link rel="stylesheet" type="text/css" media="print">

to

<link rel="stylesheet" type="text/css" media="screen">

and the browser will apply it. You'll also have to deactivate the screen-only ones.

Of course, this is only useful if you only want to quick-check a few pages with very few stylesheet links, but at least, you do not need to install any additional plugins.


Edit 1 This trick suggests me using javascript to automate this...

(Disclaimer: I'll use JQuery for simplicity. I'm not a Javascript expert.)

// Save all stylesheet links
allStylesheets   = $('link[rel="stylesheet"], style');
// Save the print-stylesheet links
printStylesheets = $('link[media*="print"], link[media*="all"], style[media*="print"], style[media*="all"]');

// Set all stylesheet medias to something 'exotic'
if (null != allStylesheets) {
    allStylesheets.attr("media", "aural");
}
// Switch the print-stylesheet medias to 'screen'
if (null != printStylesheets) {
    printStylesheets.attr("media", "screen");
}

Note that the default media is "screen" (w3.org - media attribute). This could be used in a button to show a page preview. The only drawback is that you have to reload the page to restore the original view.

As pointed out above, this solution does not work with html code like this, because the styling inside the @media print won't be applied by the browser:

<html>
    <head>
        <title>Hello world</title>
        <style type="text/css" media="all">
            @media print { h1 { color: red; }}
        </style>
    </head>
    <body>
        <h1>Hello world</h1>
    </body>
</html>
2

Web developer toolbar has one big drawback for CSS debugging though: every time you refresh the page it reverts to the screen stylesheet.

What I tend to do these days is temporarily switch the media of the print stylesheet to screen while I'm developing, and then switch it back before going live.

2
  • 10
    "every time you refresh the page it reverts to the screen stylesheet" Options > Persist Features Commented Apr 19, 2009 at 20:30
  • Ambrose, thanks for that hint. I never thought that Options > Persist Features could mean that! Commented Apr 20, 2009 at 7:37
0

Firefox 68 added a button to "Toggle print media simulation for the page" to the Rules View of the Page Inspector (Bug 1534984):

Screenshot of Firefox Page Inspector with "toggle print media" button hovered

There's a video of how to use the button in "View @media rules for Print" section of the "Examine and edit CSS" page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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