Using HTML5 details element in printing

Question

We use the HTML5 element <details> to offer simple show/hide functionality.

This works fine on-screen but in print, any <details> elements not already open on screen are hidden when printing.

I thought this would work:

@media print {
    details { display:block !important }
}

but it doesn't.

Obviously, this represents a negative print user experience - has anybody managed to get this to work for printing?

Thanks

Answer 1

As at 2024-11-15 current CSS Working Group (csswg) proposal for issue 2084 Draft added for pseudo-element ::details-content

Draft added for pseudo state :closed and :open but minimal browser support

details[open]::details-content { display: contents; }