CSS properties: convert links to macros (part 1) (#41969)

Properties part 1: convert links to macros

Author: estelle

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

@@ -19,9 +19,9 @@ The non-standard prefixed **`-webkit-mask-box-image`** [shorthand](/en-US/docs/W
 
 This property is a shorthand for the following CSS properties:
 
-- [`-webkit-mask-box-image-source`](/en-US/docs/Web/CSS/Reference/Properties/mask-border-source)
-- [`-webkit-mask-box-image-outset`](/en-US/docs/Web/CSS/Reference/Properties/mask-border-outset)
-- [`-webkit-mask-box-image-repeat`](/en-US/docs/Web/CSS/Reference/Properties/mask-border-repeat)
+- {{cssxref("-webkit-mask-box-image-source")}}
+- {{cssxref("-webkit-mask-box-image-outset")}}
+- {{cssxref("-webkit-mask-box-image-repeat")}}
 
 The values includes the `<image>` to be used as the mask border, and optionally four border outset values and up to two border repeat styles.
 

files/en-us/web/css/reference/properties/-webkit-text-stroke/index.md

@@ -12,8 +12,8 @@ The **`-webkit-text-stroke`** [CSS](/en-US/docs/Web/CSS) property specifies the
 
 This property is a shorthand for the following CSS properties:
 
-- [`-webkit-text-stroke-color`](/en-US/docs/Web/CSS/Reference/Properties/-webkit-text-stroke-color)
-- [`-webkit-text-stroke-width`](/en-US/docs/Web/CSS/Reference/Properties/-webkit-text-stroke-width)
+- {{cssxref("-webkit-text-stroke-color")}}
+- {{cssxref("-webkit-text-stroke-width")}}
 
 ## Syntax
 

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

@@ -94,7 +94,7 @@ The `all` property is specified as one of the CSS global keyword values. Note th
     - If the rule belongs to the [user origin](/en-US/docs/Web/CSS/Guides/Cascade/Introduction#user_stylesheets), the `revert` value rolls back the [cascade](/en-US/docs/Web/CSS/Guides/Cascade/Introduction) to the user-agent level, so that the [specified values](/en-US/docs/Web/CSS/Guides/Cascade/Property_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/Guides/Cascade/Introduction#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/Reference/At-rules/@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).
+  - : Specifies that all the element's properties should roll back the cascade to a previous {{cssxref("@layer", "cascade 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 {{glossary("style origin")}}.
 
 ## Formal definition
 

files/en-us/web/css/reference/properties/animation-duration/index.md

@@ -113,8 +113,8 @@ animation-duration: unset;
 - {{cssxref("<time>")}}
   - : The time that an animation takes to complete one cycle. This may be specified in either seconds (`s`) or milliseconds (`ms`). The value must be positive or zero and the unit is required.
 
-    If no value is provided, the default value of `0s` is used, in which case the animation still executes (the [`animationStart`](/en-US/docs/Web/API/Element/animationstart_event) and [`animationEnd`](/en-US/docs/Web/API/Element/animationend_event) events are fired). Whether or not the animation will be visible when the duration is `0s` will depend on the value of [`animation-fill-mode`](/en-US/docs/Web/CSS/Reference/Properties/animation-fill-mode), as explained below:
-    - If `animation-fill-mode` is set to `backwards` or `both`, the first frame of the animation as defined by `animation-direction` will be displayed during [`animation-delay`](/en-US/docs/Web/CSS/Reference/Properties/animation-delay) countdown.
+    If no value is provided, the default value of `0s` is used, in which case the animation still executes (the [`animationStart`](/en-US/docs/Web/API/Element/animationstart_event) and [`animationEnd`](/en-US/docs/Web/API/Element/animationend_event) events are fired). Whether or not the animation will be visible when the duration is `0s` will depend on the value of {{cssxref("animation-fill-mode")}}, as explained below:
+    - If `animation-fill-mode` is set to `backwards` or `both`, the first frame of the animation as defined by `animation-direction` will be displayed during {{cssxref("animation-delay")}} countdown.
     - If `animation-fill-mode` is set to `forwards` or `both`, the last frame of the animation will be displayed, as defined by `animation-direction`, after the `animation-delay` expires.
     - If `animation-fill-mode` is set to `none`, the animation will have no visible effect.
 

files/en-us/web/css/reference/properties/animation-fill-mode/index.md

@@ -149,7 +149,7 @@ animation-fill-mode: unset;
     | `alternate-reverse`   | even                        | `100%` or `to`            |
     | `alternate-reverse`   | odd                         | `0%` or `from`            |
 
-    Animated properties behave as if included in a set [`will-change`](/en-US/docs/Web/CSS/Reference/Properties/will-change) property value. If a new stacking context was created during the animation, the target element retains the stacking context after the animation has finished.
+    Animated properties behave as if included in a set {{cssxref("will-change")}} property value. If a new stacking context was created during the animation, the target element retains the stacking context after the animation has finished.
 
 - `backwards`
   - : The animation will apply the values defined in the first relevant [keyframe](/en-US/docs/Web/CSS/Reference/At-rules/@keyframes) as soon as it is applied to the target, and retain this during the {{cssxref("animation-delay")}} period. The first relevant keyframe depends on the value of {{cssxref("animation-direction")}}:

files/en-us/web/css/reference/properties/animation-range-end/index.md

@@ -8,7 +8,7 @@ sidebar: cssref
 
 The **`animation-range-end`** [CSS](/en-US/docs/Web/CSS) property is used to set the end of an animation's attachment range along its timeline, i.e., where along the timeline an animation will end.
 
-The `animation-range-end` and {{cssxref("animation-range-start")}} properties can also be set using the [`animation-range`](/en-US/docs/Web/CSS/Reference/Properties/animation-range) shorthand property.
+The `animation-range-end` and {{cssxref("animation-range-start")}} properties can also be set using the {{cssxref("animation-range")}} shorthand property.
 
 > [!NOTE]
 > `animation-range-end` is included in the {{cssxref("animation")}} shorthand as a reset-only value. This means that including `animation` resets a previously-declared `animation-range-end` value to `normal`, but a specific value cannot be set via `animation`. When creating [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations), you need to declare `animation-range-end` after declaring any `animation` shorthand for it to take effect.
@@ -30,7 +30,7 @@ animation-range-end: contain 700px;
 
 ### Values
 
-Allowed values for `animation-range-end` are `normal`, a {{cssxref("length-percentage")}}, a `<timeline-range-name>`, or a `<timeline-range-name>` with a `<length-percentage>` following it. See [`animation-range`](/en-US/docs/Web/CSS/Reference/Properties/animation-range) for a detailed description of the available values.
+Allowed values for `animation-range-end` are `normal`, a {{cssxref("length-percentage")}}, a `<timeline-range-name>`, or a `<timeline-range-name>` with a `<length-percentage>` following it. See {{cssxref("animation-range")}} for a detailed description of the available values.
 
 Also check out the [View Timeline Ranges Visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/), which shows exactly what the different values mean in an easy visual format.
 
@@ -167,10 +167,10 @@ Scroll to see the subject element being animated.
 
 ## See also
 
-- [`animation-timeline`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline)
-- [`animation-range`](/en-US/docs/Web/CSS/Reference/Properties/animation-range), [`animation-range-start`](/en-US/docs/Web/CSS/Reference/Properties/animation-range-start)
-- [`scroll-timeline`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline), [`scroll-timeline-axis`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline-axis), [`scroll-timeline-name`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline-name)
+- {{cssxref("animation-timeline")}}
+- {{cssxref("animation-range")}}, {{cssxref("animation-range-start")}}
+- {{cssxref("scroll-timeline")}}, {{cssxref("scroll-timeline-axis")}}, {{cssxref("scroll-timeline-name")}}
 - {{cssxref("timeline-scope")}}
-- [`view-timeline-inset`](/en-US/docs/Web/CSS/Reference/Properties/view-timeline-inset)
+- {{cssxref("view-timeline-inset")}}
 - The JavaScript equivalent: The `rangeEnd` property available in {{domxref("Element.animate()")}} calls
 - [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations)

files/en-us/web/css/reference/properties/animation-range-start/index.md

@@ -8,7 +8,7 @@ sidebar: cssref
 
 The **`animation-range-start`** [CSS](/en-US/docs/Web/CSS) property is used to set the start of an animation's attachment range along its timeline, i.e., where along the timeline an animation will start.
 
-The `animation-range-start` and {{cssxref("animation-range-end")}} properties can also be set using the [`animation-range`](/en-US/docs/Web/CSS/Reference/Properties/animation-range) shorthand property.
+The `animation-range-start` and {{cssxref("animation-range-end")}} properties can also be set using the {{cssxref("animation-range")}} shorthand property.
 
 > [!NOTE]
 > `animation-range-start` is included in the {{cssxref("animation")}} shorthand as a reset-only value. This means that including `animation` resets a previously-declared `animation-range-start` value to `normal`, but a specific value cannot be set via `animation`. When creating [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations), you need to declare `animation-range-start` after declaring any `animation` shorthand for it to take effect.
@@ -30,7 +30,7 @@ animation-range-start: contain 100px;
 
 ### Values
 
-Allowed values for `animation-range-start` are `normal`, a {{cssxref("length-percentage")}}, a `<timeline-range-name>`, or a `<timeline-range-name>` with a `<length-percentage>` following it. See [`animation-range`](/en-US/docs/Web/CSS/Reference/Properties/animation-range) for a detailed description of the available values.
+Allowed values for `animation-range-start` are `normal`, a {{cssxref("length-percentage")}}, a `<timeline-range-name>`, or a `<timeline-range-name>` with a `<length-percentage>` following it. See {{cssxref("animation-range")}} for a detailed description of the available values.
 
 Also check out the [View Timeline Ranges Visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/), which shows exactly what the different values mean in an easy visual format.
 
@@ -167,10 +167,10 @@ Scroll to see the subject element being animated.
 
 ## See also
 
-- [`animation-timeline`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline)
-- [`animation-range`](/en-US/docs/Web/CSS/Reference/Properties/animation-range), [`animation-range-end`](/en-US/docs/Web/CSS/Reference/Properties/animation-range-end)
-- [`scroll-timeline`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline), [`scroll-timeline-axis`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline-axis), [`scroll-timeline-name`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline-name)
+- {{cssxref("animation-timeline")}}
+- {{cssxref("animation-range")}}, {{cssxref("animation-range-end")}}
+- {{cssxref("scroll-timeline")}}, {{cssxref("scroll-timeline-axis")}}, {{cssxref("scroll-timeline-name")}}
 - {{cssxref("timeline-scope")}}
-- [`view-timeline-inset`](/en-US/docs/Web/CSS/Reference/Properties/view-timeline-inset)
+- {{cssxref("view-timeline-inset")}}
 - The JavaScript equivalent: The `rangeStart` property available in {{domxref("Element.animate()")}} calls
 - [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations)

files/en-us/web/css/reference/properties/animation-range/index.md

@@ -12,8 +12,8 @@ The **`animation-range`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US
 
 This property is a shorthand for the following CSS properties:
 
-- [`animation-range-start`](/en-US/docs/Web/CSS/Reference/Properties/animation-range-start)
-- [`animation-range-end`](/en-US/docs/Web/CSS/Reference/Properties/animation-range-end)
+- {{cssxref("animation-range-start")}}
+- {{cssxref("animation-range-end")}}
 
 ## Syntax
 
@@ -50,7 +50,7 @@ As shown by the comments in the syntax block above, if only a single value is pr
 
 ### Values
 
-One or two values representing the [`animation-range-start`](/en-US/docs/Web/CSS/Reference/Properties/animation-range-start) and/or [`animation-range-end`](/en-US/docs/Web/CSS/Reference/Properties/animation-range-end). These values can be one of the following:
+One or two values representing the {{cssxref("animation-range-start")}} and/or {{cssxref("animation-range-end")}}. These values can be one of the following:
 
 - `normal`
   - : Represents the start of the timeline in the case of `animation-range-start` and the end of the timeline in the case of `animation-range-end`. This is the default value.
@@ -221,9 +221,9 @@ Scroll to see the subject element being animated.
 
 ## See also
 
-- [`animation-timeline`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline)
-- [`animation-range-end`](/en-US/docs/Web/CSS/Reference/Properties/animation-range-end), [`animation-range-start`](/en-US/docs/Web/CSS/Reference/Properties/animation-range-start)
-- [`scroll-timeline`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline), [`scroll-timeline-axis`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline-axis), [`scroll-timeline-name`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline-name)
+- {{cssxref("animation-timeline")}}
+- {{cssxref("animation-range-end")}}, {{cssxref("animation-range-start")}}
+- {{cssxref("scroll-timeline")}}, {{cssxref("scroll-timeline-axis")}}, {{cssxref("scroll-timeline-name")}}
 - {{cssxref("timeline-scope")}}
-- [`view-timeline-inset`](/en-US/docs/Web/CSS/Reference/Properties/view-timeline-inset)
+- {{cssxref("view-timeline-inset")}}
 - [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations)

files/en-us/web/css/reference/properties/animation-timeline/index.md

@@ -77,7 +77,7 @@ animation-timeline: unset;
     > If two or more timelines share the same name, the last declared within the cascade will be used. Also, if no timeline is found that matches the given name, the animation is not associated with a timeline.
 
     > [!NOTE]
-    > The [`<dashed-ident>`](/en-US/docs/Web/CSS/Reference/Values/dashed-ident) values must start with `--`. This helps avoid name clashes with standard CSS keywords.
+    > The {{cssxref("&lt;dashed-ident&gt;")}} values must start with `--`. This helps avoid name clashes with standard CSS keywords.
 
 ## Formal definition
 

files/en-us/web/css/reference/properties/animation-timeline/scroll/index.md

@@ -151,4 +151,4 @@ Scroll to see the square element being animated.
 
 - [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations)
 - [Using CSS animations](/en-US/docs/Web/CSS/Guides/Animations/Using)
-- [`animation-timeline`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline)
+- {{cssxref("animation-timeline")}}