All geek questions in one place

Hide all show css class

Context: creating instances for printing in a browser.

Typically, when creating web pages with a printer, the @media print rule is used to change how the content of a printed page is searched. Ideally, since I print only a small part of the page, I would like to hide everything and then display the contents of a specific element.

The structure looks 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>

The material I tried:

Ideally, I would like to do something like

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

But this will not work, because some elements must be inline and some must be block. I played with multiple display values ​​from MDN and cannot find one that easily resets the value to its original. display: initial seems to be seen as inline .

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

Of course, you can explain “hide” material that I don’t want to print, and not display the things that I really want, but it seems to me that I need to go the other way.

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

I note that w3 draft and off-page display seem to recommend using the unknown (to webkit) box-suppress property to preserve the displayed value without displaying the element.

My questions:

What is the best way to hide everything and set certain elements to display when they do not all have a common display property?

What exactly does box-suppress do?

+5
source share
3 answers

Since you specifically noted this CSS3, try using CSS3!

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

This should work on the example you gave. I hope this works for your real application!

To answer your additional question, as of October 2014, box-suppress is a possible future replacement for display:none , which we hope will simplify both hiding and removing items from the stream without worrying about changing its type display (on the contrary, visibility saves it in the stream and position:absolute , which still retains its visibility). I don't think this is currently supported, so I would stay away from it. If you want to know more, see http://w3.org/TR/css-display

+4
source

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

However, you can use visibility if you use absolute positioning for hidden content:

 body, body * { visibility: hidden; position: absolute; } .printing, .printing * { visibility: visible; position: relative; }
+1
source

If you are not using absolute or fixed elements, you can use an alternative way to hide elements.

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

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

To return it back:

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

Source: https://habr.com/ru/post/1204586/

More articles:


All Articles