Inverse of 'no-print'

[Jogai]

To make it easier for implementing in a legacy system a 'print-only' class would be super-useful.

[BafS]

Good idea but the problem is that the stylesheet is loaded with the media="print" attribut thus, it will not work.

<link rel="stylesheet" href="..." media="print">

A solution would be to load the stylesheet anyway, without any media (for all of them) but then you will have the print style applied everywhere.

An other solution would be to add this css for all media

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

What do you think about it ?

[Jogai]

In hindsight I could have worded my request better. What you propose works correct for content that's only for print.

However, I was searching for something that lets me add this to a legacy system without sprinkling .no-print classes everywhere. So i'm looking for something that lets me print only one part of the page.

For example, print only the part with 'print!' from a page that look like this:

+--------------------------------+
|                                |
|            no-print            |
|                                |
+---------+-----------+----------+
|         |           |          |
|         |  no-print |          |
|   no-   |           |    no-   |
|  print  +-----------+   print  |
|         |           |          |
|         |   print!  |          |
|         |           |          |
|         |           |          |
+---------+-----------+----------+
|                                |
|            no-print            |
|                                |
+--------------+--+--------------+
|              |  |              |
|              |  |              |
|   no-print   |  |   no-print   |
|              |  |              |
|              |  |              |
+--------------+--+--------------+

[BafS]

Ok yes, I see. So it would be more something like

// We hide all elements
* {
  display: none;
}
// Except .print-only
.print-only {
  display: initial;
}

The problem is that I can't really add * {display: none} in the main file because it will hide all elements by default. Maybe I can add that in a legacy file but it seems a bit complicated for 2 lines.
What do you think about this solution ?

[Jogai]

Children of elements that are not displayed could not be made visible anymore...

Maybe it is too complicated to solve in a library...

[jdfm]

The problem with the initial value for display is that it will use the value that is defined for it in the standard, not what's defined by default by the browser nor is it what the author has defined in their stylesheet. So, in this case, if we had used display: initial; everything that is .print-only will become a display: inline;. The other problem is that * { display: none; } will also affect the html and body tags if you didn't explicitly set the display property on them, and since display none affects the children of elements as well... Everything is hidden until we make them block again. The last problem is that if you explicitly set the display property on anything using a selector with more specificity than the * selector (which is almost any other type of selector), it won't actually be hidden.

Given the case that was presented here, and the problems I identified, I think the closest you could get (assuming we're using only CSS):

* {
  display: none !important;
}

/* If you used something like display: grid for body, that's gone now. */
html, 
body {
  display: revert !important;
}

/* Get all of our display values as close as possible to what we want */
.print-only,
.print-only * {
  display: revert !important;
}

/* Set the more fancy display values to what they were before */
.print-only.l-flex,
.print-only .l-flex {
  display: flex !important;
}

.print-only.l-grid,
.print-only .l-grid {
  display: grid !important;
}

/* ... */

display: revert; is the closest thing to a sane default behaviour, as it would revert the display value to what it was before author stylesheets were applied to the document (the spec says, user-origin styles are used). This should preserve table display properties, paragraph, heading, etc and get you most of the way. You would still need to set the display properties for elements that you have layed out with flexbox and grid, among other display properties that aren't directly tied to certain elements.

Unfortunately though: ☹️ https://caniuse.com/#search=revert

Maybe if you had a JS file that allowed you to traverse the DOM and find the computed display values before the print stylesheet is applied, and then creates a dynamic stylesheet that would reset those values when a .print-only class is found... Maybe that could get you what you wanted.

[Jogai]

Thanks, but I made a big ugly selector hiding everything i didn't want. Its not the best solution but fine as long as we're using the legacy stuff