I want a media query to detect whether the user has enabled “print background graphics” when printing

Submitted by Anonymous

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:

@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.

Tagged
CSS
Votes
0
What are votes for and how are they tallied?