color-adjust

The color-adjust property is described by the spec as "preserving colors in different-capability devices." You know how there are phones, tablets and other devices out there without retina-quality screens? Well, this property provides the browser with a hint to make decisions about how to handle colors based on that quality.

You might be thinking something along the lines of, "Wait, isn't red just red?" And, yes, that is absolutely true. What's the point of optimizing or adjusting a color that's true no matter where it is displayed?

The point is that browsers already tend to make these determinations and adjust colors on their own, like outputting a slightly different red if the user agent is incapable of rendering a specific hex because of the screen quality of some other factor. The property is effectively saying to the browser, "Hey, I'd like you to use this color, but it's cool if you can't and want apply your best alternative for the situation." Or, conversely, it can instruct the browser to exactly match the color at any and all costs.

Printed Styles

Interestingly enough, the spec uses the example of printing webpages throughout the definition of color-adjust. However, there is no actual documentation that it is intended for printing. That hasn't stopped Chrome and Safari from implementing a prefixed version named webkit-print-color-adjust, which is a strong indication that it is intended for printing purposes.

Why does this matter? The spec describes a use case where maintaining the zebra striping of a styled table on a printed page could help legibility:

For example, a mapping website offering printed directions might "zebra-stripe" the steps in the directions, alternating between white and light gray backgrounds. Losing this zebra-striping and having a pure-white background would make the directions harder to read with a quick glance when distracted in a car.

The difference between declared and printed styles when color-adjust is set to economy.

Syntax

.my-element {
  color-adjust: [economy | exact];
}

Values

  • economy (initial value): This value allows the browser to make adjustments to the color and styling of an element where it decides it needs to, whether it's to improve legibility, replace a color a device is incapable of displaying, or some other factor. Note that this is the default value and, even if the property is not applied, this is how browsers will behave.
  • exact: This value instructs the browser to match a color at all costs for the sake of preserving the declared styling. It would be used to call out styles that are "important" or "significant" to the element.

Note that the default usage of economy whether the property is called or not suggests that color-adjust is designed to provide a signal to browsers indicating styles that are important enough to preserve.

Specification Status

The color-adjust property is defined in the CSS Color Module Level 4, which is in first public working draft status at the time of this writing. This means it is yet to be endorsed by the W3C and could be updated, changed or even dropped in later revisions. As such, this property is not production-ready and is considered experimental.

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeOperaFirefoxIEEdgeSafari
19*15*48NoNo6*

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
12-12.1NoNo677063

More Information

This comment thread is closed. If you have important information to share, please contact us.
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag