How to only show certain parts with CSS for Print?

Question

I have a page with lots of data, tables and content. I want to make a print version that will only display very few selected things.

Instead of writing another page just for printing, I was reading about CSS's feature for "@media print".

First, what browsers support it? Since this is an internal feature, it's OK if only the latest browsers support it.

I was thinking of tagging a few DOM elements with a "printable" class, and basically apply "display:none" to everything except those elements with the "printable" class. Is that doable?

How do I achieve this?

EDIT: This is what I have so far:

<style type="text/css">
@media print {
    * {display:none;}
    .printable, .printable > * {display:block;}
}
</style>

But it hides everything. How do I make those "printable" elements visible?

EDIT: Trying now the negative approach

<style type="text/css">
@media print {
    body *:not(.printable *) {display:none;}
}
</style>

This looks good in theory, however it doesn't work. Maybe "not" doesn't support advanced css ...

Answer 1

Start here. But basically what you are thinking is the correct approach.

Thanks, Now my question is actually becoming: How do I apply CSS to a class AND ALL OF ITS DESCENDANT ELEMENTS? So that I can apply "display:block" to whatever is in the "printable" zones.

If an element is set to display:none; all its children will be hidden as well. But in any case. If you want a style to apply to all children of something else, you do the following:

.printable * {
   display: block;
}

That would apply the style to all children of the "printable" zone.

Answer 2

Nearly all browsers support it. It might be advantageous to use the media attribute on the link tag.

Using display: none; in some of your rules would be an appropriate way to handle your situation.

Answer 3

According to Code Style, the print media type is supported in every browser that's realistically in use.