Adds the ‘preserve-parent-color' value to the ‘forced-color-adjust' CSS property. When Forced Colors Mode is enabled, the ‘color’ property is inherited, and we’ve set ‘forced-color-adjust: preserve-parent-color', the ‘color’ property will compute to the used value of its parent. Otherwise, ‘forced-color-adjust: preserve-parent-color' value behaves the same as ‘forced-color-adjust: none’.

Motivation

"forced-color-adjust" is a CSS property that allows developers to opt out of Forced Colors Mode. Previously, there were two supported values: "auto" and "none", which can be used to control whether or not an element's styles are adjusted by the UA in Forced Colors Mode. A third value, "preserve-parent-color", has recently been introduced in the spect, which provides similar behavior to 'none', except that it also allows us to inherit its parent's used 'color' value. The intention of 'preserve-parent-color' is to get a reasonable behavior for SVG icons that utilize 'currentColor' when styling 'fill' and 'stroke' in Forced Colors Mode, as described in https://github.com/w3c/csswg-drafts/issues/6310. The use of 'currentColor' when styling an SVG icon is a common pattern sued by authors to ensure an accessible experience in Forced Colors Mode. For example, in this logo (https://codepen.io/somelaniesaid/pen/Yzqxogg), an author would expect the logo to automatically adjust to use the 'CanvasText' system color or 'fill' and 'stroke' in Forced Colors Mode, as a result of setting each to 'currentColor'. This behavior, however, became broken when we moved from forcing color at computed value time to used value time: https://github.com/w3c/csswg-drafts/issues/4915. Instead of inheriting 'CanvasText', as before, the above logo (https://codepen.io/somelaniesaid/pen/Yzqxogg) would inherit the computed 'color' value of its parent, resulting in a logo that is no longe

Specification

Specification link


Unknown standards status - check spec link for status

Status in Chromium

Blink>CSS


In developer trial (Behind a flag) (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owners

Comments

This scenario was initially brought up in order to color SVGs correctly. In particular, we would like the ‘color’ of the SVG to match the color of the surrounding text in Forced Colors mode, as noted in https://github.com/w3c/csswg-drafts/issues/6310. For this reason, the ‘preserve-parent-color' value will be the new default for SVGs. In addition, ‘forced-color-adjust: preserve-parent-color' can be used by an author on any element to achieve similar behaviour.

Search tags

css, forced, colors, forced-colors, forced-color-adjust, preserve-parent-color,

Last updated on 2021-11-05