Refine CSS Value Processing document #40546

sakupi01 · 2025-07-27T10:58:07Z

Description

The change mainly aims for better accuracy to describe CSS value processing flow according to the specification.

Motivation

The previous version sometimes used incorrect terminology and descriptions, which will ultimately lead differences between mdn and the specs.

e.g.

CSS property value result will not come only from specificity - it will be the result of the entire cascade process
"specified values" were mostly used incorrectly/confused with "declared values" - "specified values" result from the defaulting process after cascading, but the previous version didn't make this clear
The document mainly described the stages after the Defaulting process, even though the terminology and phases before Defaulting
(which are Filtering, Cascading, and related terms) are necessary to make after-Defaulting values understandable. Omitting the before-Defaulting process essentially leads to misworded descriptions.
Initial value shouldn't be listed as a value processing stage according to the spec - it is the terminology used in the specified value resolution process

The change also includes some typo/wording updates, which will make the description more accurate or simpler.

Additional details

The changes ensure compliance with:

Related issues and pull requests

Signed-off-by: saku <[email protected]>

Josh-Cena

Drive-by, just looking at Markdown correctness. Not interested in reviewing, although this looks like good work; thank you!

Josh-Cena · 2025-07-27T11:15:31Z

files/en-us/web/css/css_cascade/value_processing/index.md


-To determine which specified value is applied, the user agent gathers and processes all the styles from different sources, such as inline styles, and internal and external stylesheets.
+To determine which [declared value](#declared-value) is applied, the user agent gathers and processes all the styles from different sources, such as inline styles, and internal and external stylesheets.


Suggested change

To determine which [declared value](#declared-value) is applied, the user agent gathers and processes all the styles from different sources, such as inline styles, and internal and external stylesheets.

To determine which [declared value](#declared_value) is applied, the user agent gathers and processes all the styles from different sources, such as inline styles, and internal and external stylesheets.

Make sure all your anchor links are valid

Josh-Cena · 2025-07-27T11:16:54Z

files/en-us/web/css/css_cascade/value_processing/index.md

@@ -10,50 +10,156 @@ For every element in a document tree, the browser assigns a value to every CSS p

 ## Property values

-Every CSS property's value comes from the declaration with the greatest {{cssxref("specificity")}}. If two or more declarations with the same specificity provide different property values for the same element, the declaration value whose selector has the greatest algorithmic weight gets applied.
+Every CSS property's value comes from the declaration that wins the {{cssxref("Cascade")}} algorithm. When multiple declarations provide different property values for the same element, the declaration that ranks highest in the [Cascade Sorting Order](/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order) gets applied.


CSS/Cascade is a redirect, plus {{cssxref("Cascade")}} would be rendered as code, so you should just use a markdown link instead. Also sentence case.

Suggested change

Every CSS property's value comes from the declaration that wins the {{cssxref("Cascade")}} algorithm. When multiple declarations provide different property values for the same element, the declaration that ranks highest in the [Cascade Sorting Order](/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order) gets applied.

Every CSS property's value comes from the declaration that wins the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) algorithm. When multiple declarations provide different property values for the same element, the declaration that ranks highest in the [cascade sorting order](/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order) gets applied.

Same below.

Josh-Cena · 2025-07-27T11:18:14Z

files/en-us/web/css/css_cascade/value_processing/index.md

+
+```css
+/* Example of inherited property */
+color: /* inherits from parent's computed value */


sakupi01 · 2025-07-27T11:52:00Z

@Josh-Cena

Thanks for the quick review! Fixed in:

correct anchor links
use non-code/redirect ref
update non-inherited/inherited property code description

sakupi01 · 2025-07-27T11:53:57Z

files/en-us/web/css/css_cascade/value_processing/index.md


-Each property value comes from a single property-value pair; is single value is applied from each property. Even if the value is a comma separated list of values, that list of values came from a single declaration.
+Each property value comes from a single property name-value pair; a single value is applied from each property. Even if the value is a comma separated list of values, that list of values came from a single declaration.


property = name + value

see: https://www.w3.org/TR/css-syntax-3/#declaration

sakupi01 · 2025-07-27T11:57:05Z

files/en-us/web/css/css_cascade/value_processing/index.md


-To determine which specified value is applied, the user agent gathers and processes all the styles from different sources, such as inline styles, and internal and external stylesheets.
+To determine which [declared value](#declared_value) is applied, the user agent gathers and processes all the styles from different sources, such as inline styles, and internal and external stylesheets.


The term "specified value" was confusing in the entire context.
"specified value" comes after declaration value and cascaded value, but here it sounded like it comes before cascading.

https://www.w3.org/TR/css-cascade-4/#value-stages

sakupi01 · 2025-07-27T11:59:47Z

files/en-us/web/css/css_cascade/value_processing/index.md

@@ -10,50 +10,156 @@ For every element in a document tree, the browser assigns a value to every CSS p

 ## Property values

-Every CSS property's value comes from the declaration with the greatest {{cssxref("specificity")}}. If two or more declarations with the same specificity provide different property values for the same element, the declaration value whose selector has the greatest algorithmic weight gets applied.
+Every CSS property's value comes from the declaration that wins the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) algorithm. When multiple declarations provide different property values for the same element, the declaration that ranks highest in the [cascade sorting order](/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order) gets applied.


It could be read like property value comes because of only from the resolution of the specificity algorithm, but it's actually not.

sakupi01 · 2025-07-27T12:05:19Z

files/en-us/web/css/css_cascade/value_processing/index.md

-The [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) determines which value should be applied when multiple conflicting styles target the same element. The cascade algorithm defines how user agents combine property values originating from different sources, scopes, and/or layers. When a selector matches an element, the property's [specified value](#specified_value) from the origin with the highest precedence gets applied, even if a selector from a lower precedence origin or layer has greater {{cssxref("specificity")}}.
+After applying the [cascading](#cascading) rules and defaulting values step by step, the browser ensures the visual presentation matches the processed CSS.
+
+## Processing overview


In order not to use "specified value" incorrectly (or to use "declared value" and "cascaded value" correctly), and in order to follow Value Processing steps based on the spec, the pre-description of three processing steps, which are Filtering, Cascading, and Defaulting, is essentially needed.

sakupi01 · 2025-07-27T12:10:15Z

files/en-us/web/css/css_cascade/value_processing/index.md

+- [Declared value](#declared_value)
+- [Cascaded value](#cascaded_value)
 - [Specified value](#specified_value)
 - [Computed value](#computed_value)
 - [Used value](#used_value)


The terminology "Initial value" is used IN the resolution phase of specified value, that is Defaulting phase - it's not the term to describe the part of value processing flow.

https://www.w3.org/TR/css-cascade-4/#value-stages
https://www.w3.org/TR/css-cascade-4/#defaulting

renew css value processing document

00b8842

Signed-off-by: saku <[email protected]>

sakupi01 requested a review from a team as a code owner July 27, 2025 10:58

sakupi01 requested review from estelle and removed request for a team July 27, 2025 10:58

github-actions bot added Content:CSS Cascading Style Sheets docs size/m [PR only] 51-500 LoC changed labels Jul 27, 2025

Josh-Cena reviewed Jul 27, 2025

View reviewed changes

sakupi01 added 3 commits July 27, 2025 20:39

correct anchor links

7a730ad

use non-code/redirect ref

e16c142

update non-inherited/inherited property code description

0a5567b

sakupi01 commented Jul 27, 2025

View reviewed changes

sakupi01 changed the title ~~renew css value processing document~~ Refine CSS Value Processing document Jul 27, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Refine CSS Value Processing document #40546

Refine CSS Value Processing document #40546

sakupi01 commented Jul 27, 2025 •

edited

Loading

Uh oh!

Josh-Cena left a comment

Uh oh!

Josh-Cena Jul 27, 2025

Uh oh!

Josh-Cena Jul 27, 2025

Uh oh!

Josh-Cena Jul 27, 2025

Uh oh!

sakupi01 commented Jul 27, 2025 •

edited

Loading

Uh oh!

sakupi01 Jul 27, 2025

Uh oh!

sakupi01 Jul 27, 2025 •

edited

Loading

Uh oh!

sakupi01 Jul 27, 2025 •

edited

Loading

Uh oh!

sakupi01 Jul 27, 2025 •

edited

Loading

Uh oh!

sakupi01 Jul 27, 2025 •

edited

Loading

Uh oh!

Uh oh!


		To determine which specified value is applied, the user agent gathers and processes all the styles from different sources, such as inline styles, and internal and external stylesheets.
		To determine which [declared value](#declared-value) is applied, the user agent gathers and processes all the styles from different sources, such as inline styles, and internal and external stylesheets.

	Every CSS property's value comes from the declaration that wins the {{cssxref("Cascade")}} algorithm. When multiple declarations provide different property values for the same element, the declaration that ranks highest in the [Cascade Sorting Order](/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order) gets applied.
	Every CSS property's value comes from the declaration that wins the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) algorithm. When multiple declarations provide different property values for the same element, the declaration that ranks highest in the [cascade sorting order](/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order) gets applied.


		Each property value comes from a single property-value pair; is single value is applied from each property. Even if the value is a comma separated list of values, that list of values came from a single declaration.
		Each property value comes from a single property name-value pair; a single value is applied from each property. Even if the value is a comma separated list of values, that list of values came from a single declaration.

Refine CSS Value Processing document #40546

Are you sure you want to change the base?

Refine CSS Value Processing document #40546

Conversation

sakupi01 commented Jul 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Motivation

Additional details

Related issues and pull requests

Uh oh!

Josh-Cena left a comment

Choose a reason for hiding this comment

Uh oh!

Josh-Cena Jul 27, 2025

Choose a reason for hiding this comment

Uh oh!

Josh-Cena Jul 27, 2025

Choose a reason for hiding this comment

Uh oh!

Josh-Cena Jul 27, 2025

Choose a reason for hiding this comment

Uh oh!

sakupi01 commented Jul 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sakupi01 Jul 27, 2025

Choose a reason for hiding this comment

Uh oh!

sakupi01 Jul 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sakupi01 Jul 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sakupi01 Jul 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sakupi01 Jul 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sakupi01 commented Jul 27, 2025 •

edited

Loading

sakupi01 commented Jul 27, 2025 •

edited

Loading

sakupi01 Jul 27, 2025 •

edited

Loading

sakupi01 Jul 27, 2025 •

edited

Loading

sakupi01 Jul 27, 2025 •

edited

Loading

sakupi01 Jul 27, 2025 •

edited

Loading