New guide: value processing

files/en-us/glossary/value/index.md

@@ -8,7 +8,7 @@ page-type: glossary-definition
 
 In the context of data or an object **{{Glossary("Wrapper", "wrapper")}}** around that data, the value is the **{{Glossary("Primitive","primitive value")}}** that the object wrapper contains. In the context of a **{{Glossary("Variable","variable")}}** or **{{Glossary("Property","property")}}**, the value can be either a primitive or an **{{Glossary("Object reference","object reference")}}**.
 
-In the context of CSS property values, there are specified, computed, and actual values. The final value for every CSS property applied to every element and pseudo-element is the result of a four-step calculation: the value is determined through specification (the "[specified value](/en-US/docs/Web/CSS/CSS_cascade/specified_value)", then resolved into a value that is used for inheritance (the "[computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value)"), then converted into an absolute value if necessary (the "[used value](/en-US/docs/Web/CSS/CSS_cascade/used_value)"), and finally transformed according to the limitations of the local environment (the "[actual value](/en-US/docs/Web/CSS/CSS_cascade/actual_value)").
+In the context of CSS property values, there are specified, computed, and actual values. The final value for every CSS property applied to every element and pseudo-element is the result of a four-step calculation: the value is determined through specification (the "[specified value](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#specified-value)", then resolved into a value that is used for inheritance (the "[computed value](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#computed-value)"), then converted into an absolute value if necessary (the "[used value](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#used-value)"), and finally transformed according to the limitations of the local environment (the "[actual value](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#actual-value)").
 
 For CSS data types, see [CSS values and units](/en-US/docs/Web/CSS/CSS_Values_and_Units).
 

files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md

@@ -191,7 +191,7 @@ CSS provides five special universal property values for controlling inheritance.
 - {{cssxref("inherit")}}
   - : Sets the property value applied to a selected element to be the same as that of its parent element. Effectively, this "turns on inheritance".
 - {{cssxref("initial")}}
-  - : Sets the property value applied to a selected element to the [initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value) of that property.
+  - : Sets the property value applied to a selected element to the [initial value](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#initial-value) of that property.
 - {{cssxref("revert")}}
   - : Resets the property value applied to a selected element to the browser's default styling rather than the defaults applied to that property. This value acts like {{cssxref("unset")}} in many cases.
 - {{cssxref("revert-layer")}}

files/en-us/web/api/animation/commitstyles/index.md

@@ -8,7 +8,7 @@ browser-compat: api.Animation.commitStyles
 
 {{APIRef("Web Animations")}}
 
-The `commitStyles()` method of the [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)'s {{domxref("Animation")}} interface writes the [computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value) of the animation's current styles into its target element's [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute. `commitStyles()` works even if the animation has been [automatically removed](/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API#automatically_removing_filling_animations).
+The `commitStyles()` method of the [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)'s {{domxref("Animation")}} interface writes the [computed values](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#computed-value) of the animation's current styles into its target element's [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute. `commitStyles()` works even if the animation has been [automatically removed](/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API#automatically_removing_filling_animations).
 
 `commitStyles()` can be used in combination with `fill` to cause the final state of an animation to persist after the animation ends. The same effect could be achieved with `fill` alone, but [using indefinitely filling animations is discouraged](https://drafts.csswg.org/web-animations-1/#fill-behavior). Animations [take precedence over all static styles](/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order), so an indefinite filling animation can prevent the target element from ever being styled normally.
 

files/en-us/web/api/window/getcomputedstyle/index.md

@@ -152,9 +152,9 @@ Java.
   using array or [dot notation](/en-US/docs/Learn_web_development/Core/Scripting/Object_basics#dot_notation) such as `obj['z-index']` or `obj.zIndex`.
 - The values returned by `getComputedStyle` are [resolved values](/en-US/docs/Web/CSS/resolved_value).
   These are usually the same as CSS 2.1's
-  [computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value), but for some older properties
+  [computed values](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#computed-value), but for some older properties
   like `width`, `height`, or `padding`, they are
-  instead the same as [used values](/en-US/docs/Web/CSS/CSS_cascade/used_value). Originally, CSS
+  instead the same as [used values](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#used-value). Originally, CSS
   2.0 defined the _computed values_ as the "ready to be used" final values of
   properties after cascading and inheritance, but CSS 2.1 redefined them as pre-layout,
   and _used values_ as post-layout. For CSS 2.0 properties,

files/en-us/web/api/window/getdefaultcomputedstyle/index.md

@@ -10,7 +10,7 @@ browser-compat: api.Window.getDefaultComputedStyle
 
 {{APIRef("CSSOM")}}{{Non-standard_Header}}
 
-The **`getDefaultComputedStyle()`** method gives the default [computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value) of all the CSS
+The **`getDefaultComputedStyle()`** method gives the default [computed values](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#computed-value) of all the CSS
 properties of an element, ignoring author styling. That is, only user-agent and user
 styles are taken into account.
 

files/en-us/web/css/-webkit-mask-box-image/index.md

@@ -78,10 +78,10 @@ Border repeat styles, when included, are interpreted in the order of `<repeat-x>
 
 ## Formal definition
 
-- [Initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value): `none`
+- [Initial value](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#initial-value): `none`
 - Applies to: all elements
 - [Inherited](/en-US/docs/Web/CSS/CSS_cascade/Inheritance): no
-- [Computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value): as specified
+- [Computed value](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#computed-value): as specified
 
 ## Formal syntax
 

files/en-us/web/css/@container/index.md

@@ -437,7 +437,7 @@ A style feature without a value evaluates to true if the computed value is diffe
 
 If the `<style-feature>` passed as the `style()` function's argument is a declaration, the style query evaluates to true if the declaration's value is the same as the computed value of that property for the container being queried. Otherwise, it resolves to false.
 
-The following container query checks if the {{cssxref("computed_value")}} of the container element's `--accent-color` is `blue`:
+The following container query checks if the [computed value](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#computed-value) of the container element's `--accent-color` is `blue`:
 
 ```css
 @container style(--accent-color: blue) {

files/en-us/web/css/@property/syntax/index.md

@@ -8,7 +8,7 @@ browser-compat: css.at-rules.property.syntax
 {{CSSRef}}
 
 The **`syntax`** descriptor of the {{cssxref("@property")}} [at-rule](/en-US/docs/Web/CSS/CSS_syntax/At-rule) defines the allowed value types for the registered [CSS custom property](/en-US/docs/Web/CSS/--*).
-It controls how the property's specified value is processed to derive the [computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value).
+It controls how the property's specified value is processed to derive the [computed value](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#computed-value).
 It is a required descriptor; if missing or invalid, the entire `@property` rule is invalid and ignored.
 
 ## Syntax

files/en-us/web/css/all/index.md

@@ -84,15 +84,15 @@ The `all` property is specified as one of the CSS global keyword values. Note th
 ### Values
 
 - {{cssxref("initial")}}
-  - : Specifies that all the element's properties should be changed to their [initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value).
+  - : Specifies that all the element's properties should be changed to their [initial values](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#initial-value).
 - {{cssxref("inherit")}}
   - : Specifies that all the element's properties should be changed to their [inherited values](/en-US/docs/Web/CSS/CSS_cascade/Inheritance).
 - {{cssxref("unset")}}
   - : Specifies that all the element's properties should be changed to their inherited values if they inherit by default, or to their initial values if not.
 - {{cssxref("revert")}}
   - : Specifies behavior that depends on the stylesheet origin to which the declaration belongs:
-    - If the rule belongs to the [author origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#author_stylesheets), the `revert` value rolls back the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) to the user level, so that the [specified values](/en-US/docs/Web/CSS/CSS_cascade/specified_value) are calculated as if no author-level rules were specified for the element. For purposes of `revert`, the author origin includes the Override and Animation origins.
-    - If the rule belongs to the [user origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user_stylesheets), the `revert` value rolls back the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) to the user-agent level, so that the [specified values](/en-US/docs/Web/CSS/CSS_cascade/specified_value) are calculated as if no author-level or user-level rules were specified for the element.
+    - If the rule belongs to the [author origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#author_stylesheets), the `revert` value rolls back the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) to the user level, so that the [specified values](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#specified-value) are calculated as if no author-level rules were specified for the element. For purposes of `revert`, the author origin includes the Override and Animation origins.
+    - If the rule belongs to the [user origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user_stylesheets), the `revert` value rolls back the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) to the user-agent level, so that the [specified values](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#specified-value) are calculated as if no author-level or user-level rules were specified for the element.
     - If the rule belongs to the [user-agent origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user-agent_stylesheets), the `revert` value acts like `unset`.
 - {{cssxref("revert-layer")}}
   - : Specifies that all the element's properties should roll back the cascade to a previous [cascade layer](/en-US/docs/Web/CSS/@layer), if one exists. If no other cascade layer exists, the element's properties will roll back to the matching rule, if one exists, in the current layer or to a previous [style origin](/en-US/docs/Glossary/Style_origin).

files/en-us/web/css/border-image/index.md

@@ -96,7 +96,7 @@ border-image: unset;
 The `border-image` property may be specified with anywhere from one to five of the values listed below.
 
 > [!NOTE]
-> If the [computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value) of {{cssxref("border-image-source")}} is `none`, or if the image cannot be displayed, the {{cssxref("border-style")}} will be displayed instead.
+> If the [computed value](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#computed-value) of {{cssxref("border-image-source")}} is `none`, or if the image cannot be displayed, the {{cssxref("border-style")}} will be displayed instead.
 
 ### Values
 

files/en-us/web/css/border/index.md

@@ -96,7 +96,7 @@ The `border` property may be specified using one, two, or three of the values li
 
 ## Description
 
-As with all shorthand properties, any omitted sub-values will be set to their [initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value). Importantly, `border` cannot be used to specify a custom value for {{cssxref("border-image")}}, but instead sets it to its initial value, i.e., `none`.
+As with all shorthand properties, any omitted sub-values will be set to their [initial value](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#initial-value). Importantly, `border` cannot be used to specify a custom value for {{cssxref("border-image")}}, but instead sets it to its initial value, i.e., `none`.
 
 The `border` shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, and {{Cssxref("border-color")}} properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., {{Cssxref("border-top")}} ) and logical (e.g., {{Cssxref("border-block-start")}}) border properties.
 

files/en-us/web/css/color_value/index.md

@@ -114,7 +114,7 @@ background-color: hsl(0deg 100% 50%);
 
 Color interpolation happens with [gradients](/en-US/docs/Web/CSS/gradient), [transitions](/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions), and [animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations).
 
-When interpolating `<color>` values, they are first converted to a given color space, and then each component of the [computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value) are interpolated linearly, with interpolation's speed being determined by the [easing function](/en-US/docs/Web/CSS/easing-function) in transitions and animations. The interpolation color space defaults to Oklab, but can be overridden through {{CSSXref("&lt;color-interpolation-method&gt;")}} in some color-related functional notations.
+When interpolating `<color>` values, they are first converted to a given color space, and then each component of the [computed values](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#computed-value) are interpolated linearly, with interpolation's speed being determined by the [easing function](/en-US/docs/Web/CSS/easing-function) in transitions and animations. The interpolation color space defaults to Oklab, but can be overridden through {{CSSXref("&lt;color-interpolation-method&gt;")}} in some color-related functional notations.
 
 ### Interpolation with missing components
 

files/en-us/web/css/css_box_model/introduction_to_the_css_box_model/index.md

@@ -53,10 +53,10 @@ Finally, note that for non-replaced inline elements, the amount of space taken u
   - [Visual formatting model](/en-US/docs/Web/CSS/CSS_display/Visual_formatting_model)
   - [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
   - Values
-    - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value)
-    - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value)
-    - [Used values](/en-US/docs/Web/CSS/CSS_cascade/used_value)
-    - [Actual values](/en-US/docs/Web/CSS/CSS_cascade/actual_value)
+    - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#initial-value)
+    - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#computed-value)
+    - [Used values](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#used-value)
+    - [Actual values](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#actual-value)
   - [Value definition syntax](/en-US/docs/Web/CSS/CSS_Values_and_Units/Value_definition_syntax)
   - [Shorthand properties](/en-US/docs/Web/CSS/CSS_cascade/Shorthand_properties)
   - {{glossary("Replaced elements")}}

files/en-us/web/css/css_box_model/mastering_margin_collapsing/index.md

@@ -82,10 +82,10 @@ p {
   - [Layout modes](/en-US/docs/Glossary/Layout_mode)
   - [Visual formatting model](/en-US/docs/Web/CSS/CSS_display/Visual_formatting_model)
   - Values
-    - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value)
-    - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value)
-    - [Used values](/en-US/docs/Web/CSS/CSS_cascade/used_value)
-    - [Actual values](/en-US/docs/Web/CSS/CSS_cascade/actual_value)
+    - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#initial-value)
+    - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#computed-value)
+    - [Used values](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#used-value)
+    - [Actual values](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#actual-value)
   - [Value definition syntax](/en-US/docs/Web/CSS/CSS_Values_and_Units/Value_definition_syntax)
   - [Shorthand properties](/en-US/docs/Web/CSS/CSS_cascade/Shorthand_properties)
   - {{glossary("Replaced elements")}}

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

@@ -9,15 +9,15 @@ spec-urls:
 
 {{CSSRef}}
 
-The **actual value** of a [CSS](/en-US/docs/Web/CSS) property is the [used value](/en-US/docs/Web/CSS/CSS_cascade/used_value) of that property after any necessary approximations have been applied. For example, a {{glossary("user agent")}} that can only render borders with a whole-number pixel width may round the thickness of the border to the nearest integer.
+The **actual value** of a [CSS](/en-US/docs/Web/CSS) property is the [used value](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#used_value) of that property after any necessary approximations have been applied. For example, a {{glossary("user agent")}} that can only render borders with a whole-number pixel width may round the thickness of the border to the nearest integer.
 
 ## Calculating a property's actual value
 
 The {{glossary("user agent")}} performs four steps to calculate a property's actual (final) value:
 
-1. First, the [specified value](/en-US/docs/Web/CSS/CSS_cascade/specified_value) is determined based on the result of [cascading](/en-US/docs/Web/CSS/CSS_cascade/Cascade), [inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance), or using the [initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value).
-2. Next, the [computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value) is calculated according to the specification (for example, a `span` with `position: absolute` will have its computed `display` changed to `block`).
-3. Then, layout is calculated, resulting in the [used value](/en-US/docs/Web/CSS/CSS_cascade/used_value).
+1. First, the [specified value](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#specified_value) is determined based on the result of [cascading](/en-US/docs/Web/CSS/CSS_cascade/Cascade), [inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance), or using the [initial value](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#initial_value).
+2. Next, the [computed value](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#computed_value) is calculated according to the specification (for example, a `span` with `position: absolute` will have its computed `display` changed to `block`).
+3. Then, layout is calculated, resulting in the [used value](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#used_value).
 4. Finally, the used value is transformed according to the limitations of the local environment, resulting in the actual value.
 
 ## Specifications
@@ -37,9 +37,9 @@ The {{glossary("user agent")}} performs four steps to calculate a property's act
   - [Visual formatting model](/en-US/docs/Web/CSS/CSS_display/Visual_formatting_model)
   - [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
   - Values
-    - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value)
-    - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value)
-    - [Used values](/en-US/docs/Web/CSS/CSS_cascade/used_value)
+    - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#initial_value)
+    - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#computed_value)
+    - [Used values](/en-US/docs/Web/CSS/CSS_cascade/Value_processing#used_value)
     - [Resolved values](/en-US/docs/Web/CSS/resolved_value)
   - [Value definition syntax](/en-US/docs/Web/CSS/CSS_Values_and_Units/Value_definition_syntax)
   - [Shorthand properties](/en-US/docs/Web/CSS/CSS_cascade/Shorthand_properties)