Limited supportUseful when color-adjust helps adapt the interface to user preferences, display capability, or environment conditions.
Media queries Limited support

color-adjust

The color-adjust shorthand CSS property allows multiple performance related color adjustments to be set at once. Setting the print-color-adjust CSS property directly is preferred, as it is the only such adjustment so far defined.

Media queries

Overview

The color-adjust shorthand CSS property allows multiple performance related color adjustments to be set at once. Setting the print-color-adjust CSS property directly is preferred, as it is the only such adjustment so far defined.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
color-adjust
Deprecated
48
15.4
15.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.printable-chart {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

Live demo

Exact (backgroundretain)

CSS Exact (backgroundretain) demo.

PreviewFullscreen

economy

CSS Economy demo.

PreviewFullscreen

Gradientretain

CSS Gradientretain demo.

PreviewFullscreen

Use cases

  • Adaptive styling

    Use color-adjust to tailor layout or presentation to device features and user settings.

  • Progressive enhancement

    Keep the default experience solid, then layer in device-specific or preference-aware improvements.

Cautions

  • Do not rely on a media condition as the only path to essential functionality.
  • Document the breakpoint or environment strategy so conditions stay consistent across the codebase.

Accessibility

  • Media-query adaptations should preserve keyboard access, reading order, and touch usability.
  • Preference-aware styling should enhance accessibility rather than replace baseline accessible defaults.

Related links

Powered by web-features