So I'm redesigning my portfolio at the minute, and I'm doing a bit of work on the print-specific style sheet. Traditionally I have always had a ".no-print" generic selector that, when applied to any element, will set "display:none;" when printing, and it works great. But what I want to do now it do the opposite, and have a ".print-only" selector, which makes the element invisible when viewing in the browser, but visible when printed.
The problem is, I would prefer to not have to have different print-only selectors for each variant of the "display" property (e.g. .print-only-inline, .print-only-block, etc), but I can't figure out how to do it.
Question
+Majesticmerc MVC
So I'm redesigning my portfolio at the minute, and I'm doing a bit of work on the print-specific style sheet. Traditionally I have always had a ".no-print" generic selector that, when applied to any element, will set "display:none;" when printing, and it works great. But what I want to do now it do the opposite, and have a ".print-only" selector, which makes the element invisible when viewing in the browser, but visible when printed.
The problem is, I would prefer to not have to have different print-only selectors for each variant of the "display" property (e.g. .print-only-inline, .print-only-block, etc), but I can't figure out how to do it.
An example:
@media all { .no-print{} .print-only{display:none;} } @media print { .no-print{display:none;} .print-only{<What-Goes-Here?!>} }Surely this must be a reasonably common problem, and if so, does anyone know how its solved?
Thanks in advance,
-- Majesticmerc
Link to comment
Share on other sites
5 answers to this question
Recommended Posts