I want a media query to detect whether the user has enabled “print background graphics” when printing
Submitted by Anonymous
Permalink https://webwewant.fyi/wants/1b0674d9-fce4-4175-bee2-70f881f12d14/
This idea is currently being discussed.
I want a CSS media query that tells me whether the user has enabled "print background graphics" (or "print background colors and images") in their browser's print dialog so that I can serve appropriately styled pages in both cases.
When printing a web page, most browsers provide an option to include or exclude background colors and images. CSS already exposes the @media print query, but it gives no signal about the background-printing preference. This means I currently have no reliable way to distinguish between a user who wants a full-color printout and one who wants an ink-saving, background-free version.
With such a media query — for example @media print and (prefers-printed-background: include) — I could:
- Serve rich, colorful pages to users who opted into background printing.
- Automatically replace colored backgrounds with simple black borders or minimal styles for users who turned backgrounds off, without requiring them to use a separate "printer-friendly" link.
@media print {
.alert {
border: 2px solid black;
color: black;
}
}
@media print and (prefers-printed-background: include) {
.alert {
background-color: #e53e3e;
color: white;
border: none;
}
}This would allow a single stylesheet to handle both cases gracefully, improving print accessibility and reducing ink waste for users who prefer it.
- Votes
- 0
What are votes for and how are they tallied?