CODEWITHSUNDEEP
htmlcssprinting
Josiah
Josiah

Reputation: 3158

Hide all, show a class with css

Context: making printable invoices to generate in a browser.

It's common in making printable webpages to use an @media print rule to change the way the content looks for a printed page. Ideally, because I'm printing only a small part of the page, I'd like to hide everything and then display the contents of a particular element.

Structure is something like this:

<body>
    <div id="topMenu">...lots of elements...</div>
    <div id="sideMenu">...lots more...</div>
    <div class="tools">...some tools...</div>
    <div class="printing">...some elements I want to print...</div>
    <div class="tools">...more stuff I don't want to print...</div>
</body>

Stuff I've tried:

Ideally, I'd like to do something like 

body * {
    display: none;
}
.printing, .printing * { /* Both parts are needed to make it display */
    display: block !important;
}

But this won't work because some elements need to be inline and some need to be block. I've played with some different values for display from MDN and can't find one that easily resets the value to its original. display: initial seems to be treated like inline.

The suggestion in CSS: "display: auto;"? seems to only work for JS.

Of course, it is possible to explicity "hide" the stuff I don't want printed rather than display the stuff I do want, but it seems to me that it should be possible to go the other way.

In this question How to only show certain parts with CSS for Print? suggests body *:not(.printable *) {display:none;} but notes (as backed up on the w3 negation page ) that this is not yet supported.

I note that the w3 draft and the display-outside page seem to recommend using an unknown (to webkit) box-suppress property to preserve the display value while not displaying the element.

My questions:

What is the best way to hide everything and target certain elements for display when they don't all share a common display property?

What exactly does box-suppress do?

Upvotes: 5

Views: 4966

Answers (3)

Ky -
Ky -

Reputation: 32073

Since you specifically tagged this CSS3, try using CSS3!

body>:not(.printing) {
    display: none;
}

This should work for the example you gave. I hope it works for your real-world application!

To answer your auxiliary question, as of October 2014, box-suppress is a possible future replacement for display:none that will hopefully make it easier to both hide and remove elements from the flow without worrying about changing its display type (as opposed to visibility still keeps it in the flow, and position:absolute which still keeps it visible). I don't think it's currently supported so I'd stay away from it for now. If you want to know more, see http://w3.org/TR/css-display

Upvotes: 5

quw
quw

Reputation: 2854

If you don't use any absolute or fixed elements, you can use an alternative way of hiding elements.

Instead of using display: none to hide your elements, try using:

body * {
    position:absolute;
    top: -999999px;
    left: -999999px;
}

To set it back use:

.printing, .printing * {
     position: initial;
     /* OR */
     position: static;
}

Upvotes: 0

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

You cannot use display for this purpose. See Display HTML child element when parent element is display:none

However, you can use visibility, as long as you use absolute positioning for the hidden content:

body, body * {
  visibility: hidden;
  position: absolute;
}

.printing, .printing * {
  visibility: visible;
  position: relative;
}

Upvotes: 1

Related Questions