• 0

[CSS] how to implement a "print-only" selector?


Question

So I'm redesigning my portfolio at the minute, and I'm doing a bit of work on the print-specific style sheet. Traditionally I have always had a ".no-print" generic selector that, when applied to any element, will set "display:none;" when printing, and it works great. But what I want to do now it do the opposite, and have a ".print-only" selector, which makes the element invisible when viewing in the browser, but visible when printed.

The problem is, I would prefer to not have to have different print-only selectors for each variant of the "display" property (e.g. .print-only-inline, .print-only-block, etc), but I can't figure out how to do it.

An example:

@media all
{
    .no-print{}
    .print-only{display:none;}
}

@media print
{
    .no-print{display:none;}
    .print-only{<What-Goes-Here?!>}
}

Surely this must be a reasonably common problem, and if so, does anyone know how its solved?

Thanks in advance,

-- Majesticmerc

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

So I'm redesigning my portfolio at the minute, and I'm doing a bit of work on the print-specific style sheet. Traditionally I have always had a ".no-print" generic selector that, when applied to any element, will set "display:none;" when printing, and it works great. But what I want to do now it do the opposite, and have a ".print-only" selector, which makes the element invisible when viewing in the browser, but visible when printed.

The problem is, I would prefer to not have to have different print-only selectors for each variant of the "display" property (e.g. .print-only-inline, .print-only-block, etc), but I can't figure out how to do it.

An example:

@media all
{
    .no-print{}
    .print-only{display:none;}
}

@media print
{
    .no-print{display:none;}
    .print-only{<What-Goes-Here?!>}
}

Surely this must be a reasonably common problem, and if so, does anyone know how its solved?

Thanks in advance,

-- Majesticmerc

I'm almost certain you need to use the variants (.print-only-inline, .print-only-block, etc), as far as I know, you cannot quite achieve the effect you want.

Link to comment
Share on other sites

  • 0

Why would you need multiple print selectors in the first place? Just wrap your printable area in one block and write your rules for that container.

Most of it is! It's contained in the "#content" block, and all the sidebars, navigation, etc are simply hidden using the ".no-print" selector. The problem is that I have a site header that is an image, and it looks out of place when I print the page (it blends well with the background image of the page, but looks wrong when the header is printed on its own). I would like to have a hidden "alternate header" that is displayed when printing. I also want to show the blog post time/dates in a different format at the bottom of the page (instead of the top) in its own section, but not have it shown in the screen version of the page.

Does that make sense, or is there a better way?

Link to comment
Share on other sites

  • 0

Instead of trying to override the all media style in your print style, you could make your media queries exclude each other with "not":

@media not print {
    .print-only{display:none;}
}
@media print {
    .no-print{display:none;}
}

When the page is rendered for print, only the second block is executed, and for the other media only the first block is executed. This way, only one CSS statement is active per media which prevents statement overriding. ;)

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.