Revert "CSS properties: convert links to macros (part 2)" (#41993)

chrisdavidmills · estelle · commit af1402bcf00a · 2025-11-18T11:57:50.000+01:00
Revert "CSS properties: convert links to macros (part 2) (#41970)" This reverts commit 63f170e.
diff --git a/files/en-us/web/css/reference/properties/caret/index.md b/files/en-us/web/css/reference/properties/caret/index.md
@@ -55,9 +55,9 @@ div {
 
 This property is a shorthand for the following CSS properties:
 
-- {{cssxref("caret-color")}}
-- {{cssxref("caret-animation")}}
-- {{cssxref("caret-shape")}}
+- [`caret-color`](/en-US/docs/Web/CSS/Reference/Properties/caret-color)
+- [`caret-animation`](/en-US/docs/Web/CSS/Reference/Properties/caret-animation)
+- [`caret-shape`](/en-US/docs/Web/CSS/Reference/Properties/caret-shape)
 
 ## Syntax
 
diff --git a/files/en-us/web/css/reference/properties/clip-path/index.md b/files/en-us/web/css/reference/properties/clip-path/index.md
@@ -278,7 +278,7 @@ We include two {{htmlElement("div")}} elements and an `<svg>` element containing
 
 #### CSS
 
-We use [flexbox](/en-US/docs/Web/CSS/Guides/Flexible_box_layout) to allow our elements to sit side-by-side with a gap between them, if there is space available. We define a {{cssxref("conic-gradient()")}} background image on both `<div>` elements, providing an interesting visual to clip, along with a {{cssxref("border")}}.
+We use [flexbox](/en-US/docs/Web/CSS/Guides/Flexible_box_layout) to allow our elements to sit side-by-side with a gap between them, if there is space available. We define a {{cssxref("gradient/conic-gradient", "conic-gradient()")}} background image on both `<div>` elements, providing an interesting visual to clip, along with a {{cssxref("border")}}.
 
 ```css
 body {
diff --git a/files/en-us/web/css/reference/properties/clip-rule/index.md b/files/en-us/web/css/reference/properties/clip-rule/index.md
@@ -128,7 +128,7 @@ We include an SVG with two `<clipPath>` elements that define star shapes, which
 
 #### CSS
 
-We provide the `<div>` elements with a set {{cssxref("width")}} and {{cssxref("height")}}, adding a {{cssxref("conic-gradient()")}} for their {{cssxref("background-image")}} value:
+We provide the `<div>` elements with a set {{cssxref("width")}} and {{cssxref("height")}}, adding a [`conic-gradient()`](/en-US/docs/Web/CSS/Reference/Values/gradient/conic-gradient) for their {{cssxref("background-image")}} value:
 
 ```css hidden
 body {
diff --git a/files/en-us/web/css/reference/properties/columns/index.md b/files/en-us/web/css/reference/properties/columns/index.md
@@ -49,8 +49,8 @@ columns: 3;
 
 This property is a shorthand for the following CSS properties:
 
-- {{cssxref("column-count")}}
-- {{cssxref("column-width")}}
+- [`column-count`](/en-US/docs/Web/CSS/Reference/Properties/column-count)
+- [`column-width`](/en-US/docs/Web/CSS/Reference/Properties/column-width)
 
 ## Syntax
 
diff --git a/files/en-us/web/css/reference/properties/contain-intrinsic-block-size/index.md b/files/en-us/web/css/reference/properties/contain-intrinsic-block-size/index.md
@@ -45,7 +45,7 @@ The following values can be specified for the intrinsic block size of an element
 
 ## Description
 
-The property is commonly applied alongside elements that can trigger size containment, such as [`contain: size`](/en-US/docs/Web/CSS/Reference/Properties/contain) and {{cssxref("content-visibility")}}.
+The property is commonly applied alongside elements that can trigger size containment, such as [`contain: size`](/en-US/docs/Web/CSS/Reference/Properties/contain) and [`content-visibility`](/en-US/docs/Web/CSS/Reference/Properties/content-visibility).
 
 Size containment allows a user agent to lay out an element as though it had a fixed size.
 This prevents unnecessary reflows by avoiding the re-rendering of child elements to determine the actual size (thereby improving user experience).
@@ -76,7 +76,7 @@ The HTML below defines an element "contained_element" that will be subject to si
 </div>
 ```
 
-The CSS below sets the {{cssxref("content-visibility")}} of `contained_element` to `auto`, so if the element is hidden it will be size constrained.
+The CSS below sets the [`content-visibility`](/en-US/docs/Web/CSS/Reference/Properties/content-visibility) of `contained_element` to `auto`, so if the element is hidden it will be size constrained.
 The intrinsic block size and inline size that are used when it is size constrained are set at the same time using `contain-intrinsic-block-size` and `contain-intrinsic-inline-size`, respectively.
 
 ```css
diff --git a/files/en-us/web/css/reference/properties/contain-intrinsic-height/index.md b/files/en-us/web/css/reference/properties/contain-intrinsic-height/index.md
@@ -42,7 +42,7 @@ The following values may be specified for an element.
 
 ## Description
 
-The property is commonly applied alongside elements that can trigger size containment, such as [`contain: size`](/en-US/docs/Web/CSS/Reference/Properties/contain) and {{cssxref("content-visibility")}}, and may also be set using the {{cssxref("contain-intrinsic-size")}} [shorthand property](/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties).
+The property is commonly applied alongside elements that can trigger size containment, such as [`contain: size`](/en-US/docs/Web/CSS/Reference/Properties/contain) and [`content-visibility`](/en-US/docs/Web/CSS/Reference/Properties/content-visibility), and may also be set using the [`contain-intrinsic-size`](/en-US/docs/Web/CSS/Reference/Properties/contain-intrinsic-size) [shorthand property](/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties).
 
 Size containment allows a user agent to lay out an element as though it had a fixed size, preventing unnecessary reflows by avoiding the re-rendering of child elements to determine the actual size (thereby improving user experience).
 By default, size containment treats elements as though they had no contents, and may collapse the layout in the same way as if the contents had no height (or width).
@@ -74,7 +74,7 @@ The HTML below defines an element "contained_element" that will be subject to si
 </div>
 ```
 
-The CSS below sets the {{cssxref("content-visibility")}} of `contained_element` to `auto`, so if the element is hidden it will be size constrained.
+The CSS below sets the [`content-visibility`](/en-US/docs/Web/CSS/Reference/Properties/content-visibility) of `contained_element` to `auto`, so if the element is hidden it will be size constrained.
 The width and height that are used when it is size constrained are set at the same time using `contain-intrinsic-width` and `contain-intrinsic-height`, respectively.
 
 ```css
diff --git a/files/en-us/web/css/reference/properties/contain-intrinsic-inline-size/index.md b/files/en-us/web/css/reference/properties/contain-intrinsic-inline-size/index.md
@@ -46,7 +46,7 @@ The following values can be specified for the intrinsic inline size of an elemen
 
 ## Description
 
-The property is commonly applied alongside elements that can trigger size containment, such as [`contain: size`](/en-US/docs/Web/CSS/Reference/Properties/contain) and {{cssxref("content-visibility")}}.
+The property is commonly applied alongside elements that can trigger size containment, such as [`contain: size`](/en-US/docs/Web/CSS/Reference/Properties/contain) and [`content-visibility`](/en-US/docs/Web/CSS/Reference/Properties/content-visibility).
 
 Size containment allows a user agent to lay out an element as though it had a fixed size, preventing unnecessary reflows by avoiding the re-rendering of child elements to determine the actual size (thereby improving user experience).
 By default, size containment treats elements as though they had no contents, and may collapse the layout in the same way as if the contents had no width or height.
@@ -76,7 +76,7 @@ The HTML below defines an element "contained_element" that will be subject to si
 </div>
 ```
 
-The CSS below sets the {{cssxref("content-visibility")}} of `contained_element` to `auto`, so if the element is hidden it will be size constrained.
+The CSS below sets the [`content-visibility`](/en-US/docs/Web/CSS/Reference/Properties/content-visibility) of `contained_element` to `auto`, so if the element is hidden it will be size constrained.
 The intrinsic block size and inline size that are used when it is size constrained are set at the same time using `contain-intrinsic-block-size` and `contain-intrinsic-inline-size`, respectively.
 
 ```css
diff --git a/files/en-us/web/css/reference/properties/contain-intrinsic-size/index.md b/files/en-us/web/css/reference/properties/contain-intrinsic-size/index.md
@@ -12,8 +12,8 @@ The **`contain-intrinsic-size`** [CSS](/en-US/docs/Web/CSS) [shorthand property]
 
 This property is a shorthand for the following CSS properties:
 
-- {{cssxref("contain-intrinsic-width")}}
-- {{cssxref("contain-intrinsic-height")}}
+- [`contain-intrinsic-width`](/en-US/docs/Web/CSS/Reference/Properties/contain-intrinsic-width)
+- [`contain-intrinsic-height`](/en-US/docs/Web/CSS/Reference/Properties/contain-intrinsic-height)
 
 ## Syntax
 
@@ -62,7 +62,7 @@ If two `auto [<length> | none]` pairs are specified, the first pair applies to t
 
 ## Description
 
-The property is commonly applied alongside elements that can trigger size containment, such as [`contain: size`](/en-US/docs/Web/CSS/Reference/Properties/contain) and {{cssxref("content-visibility")}}.
+The property is commonly applied alongside elements that can trigger size containment, such as [`contain: size`](/en-US/docs/Web/CSS/Reference/Properties/contain) and [`content-visibility`](/en-US/docs/Web/CSS/Reference/Properties/content-visibility).
 
 Size containment allows a user agent to lay out an element as though it had a fixed size, preventing unnecessary reflows by avoiding the re-rendering of child elements to determine the actual size (thereby improving user experience).
 By default, size containment treats elements as though they had no contents, and may collapse the layout in the same way as if the contents had no width or height.
diff --git a/files/en-us/web/css/reference/properties/contain-intrinsic-width/index.md b/files/en-us/web/css/reference/properties/contain-intrinsic-width/index.md
@@ -42,7 +42,7 @@ The following values may be specified for an element.
 
 ## Description
 
-The property is commonly applied alongside elements that can trigger size containment, such as [`contain: size`](/en-US/docs/Web/CSS/Reference/Properties/contain) and {{cssxref("content-visibility")}}, and may also be set using the {{cssxref("contain-intrinsic-size")}} [shorthand property](/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties).
+The property is commonly applied alongside elements that can trigger size containment, such as [`contain: size`](/en-US/docs/Web/CSS/Reference/Properties/contain) and [`content-visibility`](/en-US/docs/Web/CSS/Reference/Properties/content-visibility), and may also be set using the [`contain-intrinsic-size`](/en-US/docs/Web/CSS/Reference/Properties/contain-intrinsic-size) [shorthand property](/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties).
 
 Size containment allows a user agent to lay out an element as though it had a fixed size, preventing unnecessary reflows by avoiding the re-rendering of child elements to determine the actual size (thereby improving user experience).
 By default, size containment treats elements as though they had no contents, and may collapse the layout in the same way as if the contents had no width or height.
@@ -74,7 +74,7 @@ The HTML below defines an element "contained_element" that will be subject to si
 </div>
 ```
 
-The CSS below sets the {{cssxref("content-visibility")}} of `contained_element` to `auto`, so if the element is hidden it will be size constrained.
+The CSS below sets the [`content-visibility`](/en-US/docs/Web/CSS/Reference/Properties/content-visibility) of `contained_element` to `auto`, so if the element is hidden it will be size constrained.
 The width and height that are used when it is size constrained are set at the same time using `contain-intrinsic-width` and `contain-intrinsic-height`, respectively.
 
 ```css
diff --git a/files/en-us/web/css/reference/properties/contain/index.md b/files/en-us/web/css/reference/properties/contain/index.md
@@ -300,7 +300,7 @@ Style containment causes the {{cssxref("counter-increment")}} property to be sco
 
 #### Containment and quotes
 
-CSS quotes are similarly affected in that the {{cssxref("content")}} values relating to quotes are scoped to the element:
+CSS quotes are similarly affected in that the [`content`](/en-US/docs/Web/CSS/Reference/Properties/content) values relating to quotes are scoped to the element:
 
 ```html
 <!-- With style containment -->
diff --git a/files/en-us/web/css/reference/properties/content-visibility/index.md b/files/en-us/web/css/reference/properties/content-visibility/index.md
@@ -95,7 +95,7 @@ This behavior is useful for creating entry/exit animations where you want to, fo
 When animating `content-visibility` with [CSS transitions](/en-US/docs/Web/CSS/Guides/Transitions), [`transition-behavior: allow-discrete`](/en-US/docs/Web/CSS/Reference/Properties/transition-behavior) needs to be set on `content-visibility`. This effectively enables `content-visibility` transitions.
 
 > [!NOTE]
-> When transitioning an element's `content-visibility` value, you don't need to provide a set of starting values for transitioned properties using a {{cssxref("@starting-style")}} block, like you do when [transitioning `display`](/en-US/docs/Web/CSS/Reference/Properties/display#animating_display). This is because `content-visibility` doesn't hide an element from the DOM like `display` does: it just skips rendering the element's content.
+> When transitioning an element's `content-visibility` value, you don't need to provide a set of starting values for transitioned properties using a [`@starting-style`](/en-US/docs/Web/CSS/Reference/At-rules/@starting-style) block, like you do when [transitioning `display`](/en-US/docs/Web/CSS/Reference/Properties/display#animating_display). This is because `content-visibility` doesn't hide an element from the DOM like `display` does: it just skips rendering the element's content.
 
 ## Formal definition
 
@@ -230,7 +230,7 @@ In this example, we have a {{htmlelement("div")}} element, the content of which
 
 #### CSS
 
-In the CSS we initially set `content-visibility: hidden;` on the `<div>` to hide its content. We then set up `@keyframes` animations and attach them to classes to show and hide the `<div>`, animating `content-visibility` and {{cssxref("color")}} so that you get a smooth animation effect as the content is shown/hidden.
+In the CSS we initially set `content-visibility: hidden;` on the `<div>` to hide its content. We then set up `@keyframes` animations and attach them to classes to show and hide the `<div>`, animating `content-visibility` and [`color`](/en-US/docs/Web/CSS/Reference/Properties/color) so that you get a smooth animation effect as the content is shown/hidden.
 
 ```css
 div {
@@ -319,6 +319,6 @@ The rendered result looks like this:
 ## See also
 
 - [CSS Containment](/en-US/docs/Web/CSS/Guides/Containment)
-- {{cssxref("contain-intrinsic-size")}}
+- [`contain-intrinsic-size`](/en-US/docs/Web/CSS/Reference/Properties/contain-intrinsic-size)
 - {{domxref("element/contentvisibilityautostatechange_event", "contentvisibilityautostatechange")}}
 - [content-visibility: the new CSS property that boosts your rendering performance](https://web.dev/articles/content-visibility) (web.dev)
diff --git a/files/en-us/web/css/reference/properties/content/index.md b/files/en-us/web/css/reference/properties/content/index.md
@@ -376,7 +376,7 @@ When generating content on regular elements (rather than just on pseudo-elements
 
 ### Element replacement with `<gradient>`
 
-This example demonstrates how an element's contents can be replaced by any type of `<image>`, in this case, a CSS gradient. The element's contents are replaced with a {{cssxref("linear-gradient()")}}. We provide alt text because all images should be described for accessibility.
+This example demonstrates how an element's contents can be replaced by any type of `<image>`, in this case, a CSS gradient. The element's contents are replaced with a {{cssxref("gradient/linear-gradient", "linear-gradient()")}}. We provide alt text because all images should be described for accessibility.
 
 #### HTML
 
diff --git a/files/en-us/web/css/reference/properties/display/index.md b/files/en-us/web/css/reference/properties/display/index.md
@@ -318,13 +318,13 @@ There is one exception, which is when animating to or from `display: none`. In t
 - When animating `display` from `none` to `block` (or another visible `display` value), the value will flip to `block` at `0%` of the animation duration so it is visible throughout.
 - When animating `display` from `block` (or another visible `display` value) to `none`, the value will flip to `none` at `100%` of the animation duration so it is visible throughout.
 
-This behavior is useful for creating entry/exit animations where you want to for example remove a container from the DOM with `display: none`, but have it fade out with {{cssxref("opacity")}} rather than disappearing immediately.
+This behavior is useful for creating entry/exit animations where you want to for example remove a container from the DOM with `display: none`, but have it fade out with [`opacity`](/en-US/docs/Web/CSS/Reference/Properties/opacity) rather than disappearing immediately.
 
 When animating `display` with [CSS animations](/en-US/docs/Web/CSS/Guides/Animations), you need to provide the starting `display` value in an explicit keyframe (for example using `0%` or `from`). See [Using CSS animations](/en-US/docs/Web/CSS/Guides/Animations/Using) for an example.
 
 When animating `display` with [CSS transitions](/en-US/docs/Web/CSS/Guides/Transitions), two additional features are needed:
 
-- {{cssxref("@starting-style")}} provides starting values for properties you want to transition from when the animated element is first shown. This is needed to avoid unexpected behavior. By default, CSS transitions are not triggered on an element's first style update or when the `display` type changes from `none` to another type.
+- [`@starting-style`](/en-US/docs/Web/CSS/Reference/At-rules/@starting-style) provides starting values for properties you want to transition from when the animated element is first shown. This is needed to avoid unexpected behavior. By default, CSS transitions are not triggered on an element's first style update or when the `display` type changes from `none` to another type.
 - [`transition-behavior: allow-discrete`](/en-US/docs/Web/CSS/Reference/Properties/transition-behavior) needs to be set on the {{cssxref("transition-property")}} declaration (or the {{cssxref("transition")}} shorthand) to enable `display` transitions.
 
 For examples of transitioning the `display` property, see the [`@starting-style`](/en-US/docs/Web/CSS/Reference/At-rules/@starting-style#examples) and [`transition-behavior`](/en-US/docs/Web/CSS/Reference/Properties/transition-behavior#examples) pages.
diff --git a/files/en-us/web/css/reference/properties/flex-flow/index.md b/files/en-us/web/css/reference/properties/flex-flow/index.md
@@ -59,8 +59,8 @@ flex-flow: column wrap;
 
 This property is a shorthand for the following CSS properties:
 
-- {{cssxref("flex-direction")}}
-- {{cssxref("flex-wrap")}}
+- [`flex-direction`](/en-US/docs/Web/CSS/Reference/Properties/flex-direction)
+- [`flex-wrap`](/en-US/docs/Web/CSS/Reference/Properties/flex-wrap)
 
 ## Syntax
 
diff --git a/files/en-us/web/css/reference/properties/font-palette/index.md b/files/en-us/web/css/reference/properties/font-palette/index.md
@@ -6,7 +6,7 @@ browser-compat: css.properties.font-palette
 sidebar: cssref
 ---
 
-The **`font-palette`** [CSS](/en-US/docs/Web/CSS) property allows specifying one of the many palettes contained in a [color font](https://www.colorfonts.wtf/) that a user agent may use for the font. Users can also override the values in a palette or create a new palette by using the {{cssxref("@font-palette-values")}} at-rule.
+The **`font-palette`** [CSS](/en-US/docs/Web/CSS) property allows specifying one of the many palettes contained in a [color font](https://www.colorfonts.wtf/) that a user agent may use for the font. Users can also override the values in a palette or create a new palette by using the [`@font-palette-values`](/en-US/docs/Web/CSS/Reference/At-rules/@font-palette-values) at-rule.
 
 > [!NOTE]
 > A `font-palette` palette takes precedence when coloring a font. The {{cssxref("color")}} property will not override a font palette, even if specified with {{cssxref("important", "!important")}}.
diff --git a/files/en-us/web/css/reference/properties/font-size-adjust/index.md b/files/en-us/web/css/reference/properties/font-size-adjust/index.md
@@ -66,7 +66,7 @@ The `font-size-adjust` property takes as its value the keyword `none`, one (`<nu
 To ensure compatibility with browsers that don't support `font-size-adjust`, this property is specified as a numeric multiplier of the {{cssxref("font-size")}} property. This number should generally match the aspect value of the first-choice font.
 
 > [!NOTE]
-> If the specified `<font-metric>` has been overridden in {{cssxref("@font-face")}}, e.g., by using the [`size-adjust`](/en-US/docs/Web/CSS/Reference/At-rules/@font-face/size-adjust) descriptor, then the overridden metric will be used in the `font-size-adjust` calculation. This means that when `font-size-adjust` and `size-adjust` are applied together, `size-adjust` does not have any effect.
+> If the specified `<font-metric>` has been overridden in [`@font-face`](/en-US/docs/Web/CSS/Reference/At-rules/@font-face), e.g., by using the [`size-adjust`](/en-US/docs/Web/CSS/Reference/At-rules/@font-face/size-adjust) descriptor, then the overridden metric will be used in the `font-size-adjust` calculation. This means that when `font-size-adjust` and `size-adjust` are applied together, `size-adjust` does not have any effect.
 
 The adjusted font size is calculated using the formula `u  =  ( m / m′ ) s`, where:
 
diff --git a/files/en-us/web/css/reference/properties/font-style/index.md b/files/en-us/web/css/reference/properties/font-style/index.md
diff --git a/files/en-us/web/css/reference/properties/font-variant-alternates/index.md b/files/en-us/web/css/reference/properties/font-variant-alternates/index.md
diff --git a/files/en-us/web/css/reference/properties/font-variant-caps/index.md b/files/en-us/web/css/reference/properties/font-variant-caps/index.md
diff --git a/files/en-us/web/css/reference/properties/font-variant-east-asian/index.md b/files/en-us/web/css/reference/properties/font-variant-east-asian/index.md
diff --git a/files/en-us/web/css/reference/properties/font-variant-ligatures/index.md b/files/en-us/web/css/reference/properties/font-variant-ligatures/index.md
diff --git a/files/en-us/web/css/reference/properties/font-variant-numeric/index.md b/files/en-us/web/css/reference/properties/font-variant-numeric/index.md
diff --git a/files/en-us/web/css/reference/properties/font-variant-position/index.md b/files/en-us/web/css/reference/properties/font-variant-position/index.md
diff --git a/files/en-us/web/css/reference/properties/font-variant/index.md b/files/en-us/web/css/reference/properties/font-variant/index.md
