Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add preserve-parent-color value for forced-color-adjust property #37394

Merged
merged 5 commits into from
Dec 30, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions files/en-us/web/css/@media/forced-colors/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,13 @@ The system colors that are forced for the above properties depend on the context

In addition to these adjustments, browsers will help ensure text legibility by drawing "backplates" behind text. This is particularly important for preserving contrast when text is placed on top of images.

There are two cases where the user agent does not force the values for the above properties — when a {{cssxref("forced-color-adjust")}} value of `none` is applied to an element, or when a system color is specified by the author.
There are some cases where the user agent does not force the values for the above properties:

When forced-color-adjust is set to `none` on an element, none of the forced color values will apply, and author styles will be applied as normal. Additionally, the backplate for text will be disabled.
When {{cssxref("forced-color-adjust")}} is set to `none` on an element, none of the forced color values will apply, and author styles will be applied as normal. Additionally, the backplate for text will be disabled.

When a system color is specified, it will be used instead of the value that would otherwise have been forced.
When {{cssxref("forced-color-adjust")}} is set to `preserve-parent-color` on an element, and the {{cssxref("color")}} property does not inherit from its parentl then the element will behave the same as set `preserve-parent-color` to `none`.
skyclouds2001 marked this conversation as resolved.
Show resolved Hide resolved

When a {{cssxref("system-color", "system color", "", 1)}} is specified, it will be used instead of the value that would otherwise have been forced.
skyclouds2001 marked this conversation as resolved.
Show resolved Hide resolved

You can also use system colors with any property _other_ than those listed above, to ensure that the rest of the page integrates with the restricted color palette available in forced colors mode.

Expand Down
5 changes: 4 additions & 1 deletion files/en-us/web/css/forced-color-adjust/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ The **`forced-color-adjust`** [CSS](/en-US/docs/Web/CSS) property allows authors
```css
forced-color-adjust: auto;
forced-color-adjust: none;
forced-color-adjust: preserve-parent-color;

/* Global values */
forced-color-adjust: inherit;
Expand All @@ -31,6 +32,8 @@ The `forced-color-adjust` property's value must be one of the following keywords
- : The element's colors are adjusted by the {{Glossary("user agent")}} in forced colors mode. This is the default.
- `none`
- : The element's colors are not automatically adjusted by the {{Glossary("user agent")}} in forced colors mode.
- `preserve-parent-color`
- : In forced colors mode, if the {{cssxref("color")}} property inherits from its parent (i.e. there is no [cascaded value](/en-US/docs/Web/CSS/Cascade) or the cascaded value is `currentcolor`, {{cssxref("inherit")}}, or another keyword that inherits from the parent), then it computes to the {{cssxref("used color", "", "", 1)}} of its parent's `color` property. In all other cases, it behaves the same as `none`.
skyclouds2001 marked this conversation as resolved.
Show resolved Hide resolved

## Usage notes

Expand All @@ -50,7 +53,7 @@ This property should only be used to makes changes that will support a user's co

In the example below the first box will use the color scheme that the user has set. For example in Windows High Contrast mode black scheme it will have a black background and white text. The second box will preserve the site colors set on the `.box` class.

By using the [`forced-colors`](/en-US/docs/Web/CSS/@media/forced-colors) media feature you could add any other optimizations for forced color mode alongside the `forced-color-adjust` property.
By using the {{cssxref("@media/forced-colors", "forced-colors")}} media feature, you could add any other optimizations for forced color mode alongside the `forced-color-adjust` property.

#### CSS

Expand Down
Loading