CSS properties: convert links to macros (part 3)

estelle · estelle · commit f39789dd91cb · 2025-11-17T15:55:47.000+09:00
diff --git a/files/en-us/web/css/reference/properties/grid-area/index.md b/files/en-us/web/css/reference/properties/grid-area/index.md
@@ -73,10 +73,10 @@ The `grid-area` property can also be set to a {{cssxref("&lt;custom-ident&gt;")}
 
 This property is a shorthand for the following CSS properties:
 
-- [`grid-row-start`](/en-US/docs/Web/CSS/Reference/Properties/grid-row-start)
-- [`grid-column-start`](/en-US/docs/Web/CSS/Reference/Properties/grid-column-start)
-- [`grid-row-end`](/en-US/docs/Web/CSS/Reference/Properties/grid-row-end)
-- [`grid-column-end`](/en-US/docs/Web/CSS/Reference/Properties/grid-column-end)
+- {{cssxref("grid-row-start")}}
+- {{cssxref("grid-column-start")}}
+- {{cssxref("grid-row-end")}}
+- {{cssxref("grid-column-end")}}
 
 ## Syntax
 
diff --git a/files/en-us/web/css/reference/properties/grid-column/index.md b/files/en-us/web/css/reference/properties/grid-column/index.md
@@ -61,8 +61,8 @@ grid-column: 1 / span 2;
 
 This property is a shorthand for the following CSS properties:
 
-- [`grid-column-end`](/en-US/docs/Web/CSS/Reference/Properties/grid-column-end)
-- [`grid-column-start`](/en-US/docs/Web/CSS/Reference/Properties/grid-column-start)
+- {{cssxref("grid-column-end")}}
+- {{cssxref("grid-column-start")}}
 
 ## Syntax
 
diff --git a/files/en-us/web/css/reference/properties/grid-row/index.md b/files/en-us/web/css/reference/properties/grid-row/index.md
@@ -61,8 +61,8 @@ grid-row: 1 / span 2;
 
 This property is a shorthand for the following CSS properties:
 
-- [`grid-row-end`](/en-US/docs/Web/CSS/Reference/Properties/grid-row-end)
-- [`grid-row-start`](/en-US/docs/Web/CSS/Reference/Properties/grid-row-start)
+- {{cssxref("grid-row-end")}}
+- {{cssxref("grid-row-start")}}
 
 ## Syntax
 
diff --git a/files/en-us/web/css/reference/properties/grid-template-columns/index.md b/files/en-us/web/css/reference/properties/grid-template-columns/index.md
@@ -97,7 +97,7 @@ grid-template-columns: unset;
 - `none`
   - : Indicates that there is no explicit grid. Any columns will be implicitly generated and their size will be determined by the {{cssxref("grid-auto-columns")}} property.
 - `[line-name]`
-  - : A [`<custom-ident>`](/en-US/docs/Web/CSS/Reference/Values/custom-ident) specifying a name for the line in that location. The ident may be any valid string other than the reserved words `span` and `auto`. Lines may have multiple names separated by a space inside the square brackets, for example `[line-name-a line-name-b]`.
+  - : A {{cssxref("&lt;custom-ident&gt;")}} specifying a name for the line in that location. The ident may be any valid string other than the reserved words `span` and `auto`. Lines may have multiple names separated by a space inside the square brackets, for example `[line-name-a line-name-b]`.
 - {{cssxref("&lt;length&gt;")}}
   - : A non-negative length, giving the width of the column.
 - {{cssxref("&lt;percentage&gt;")}}
diff --git a/files/en-us/web/css/reference/properties/grid-template-rows/index.md b/files/en-us/web/css/reference/properties/grid-template-rows/index.md
@@ -103,7 +103,7 @@ This property may be specified as:
 - `none`
   - : A keyword meaning that there is no explicit grid. Any rows will be implicitly generated and their size will be determined by the {{cssxref("grid-auto-rows")}} property.
 - `[line-name]`
-  - : A [`<custom-ident>`](/en-US/docs/Web/CSS/Reference/Values/custom-ident) specifying a name for the line in that location. The ident may be any valid string other than the reserved words `span` and `auto`. Lines may have multiple names separated by a space inside the square brackets, for example `[line-name-a line-name-b]`.
+  - : A {{cssxref("&lt;custom-ident&gt;")}} specifying a name for the line in that location. The ident may be any valid string other than the reserved words `span` and `auto`. Lines may have multiple names separated by a space inside the square brackets, for example `[line-name-a line-name-b]`.
 - {{cssxref("&lt;length&gt;")}}
   - : A non-negative length.
 - {{cssxref("&lt;percentage&gt;")}}
diff --git a/files/en-us/web/css/reference/properties/grid-template/index.md b/files/en-us/web/css/reference/properties/grid-template/index.md
@@ -74,9 +74,9 @@ grid-template:
 
 This property is a shorthand for the following CSS properties:
 
-- [`grid-template-areas`](/en-US/docs/Web/CSS/Reference/Properties/grid-template-areas)
-- [`grid-template-columns`](/en-US/docs/Web/CSS/Reference/Properties/grid-template-columns)
-- [`grid-template-rows`](/en-US/docs/Web/CSS/Reference/Properties/grid-template-rows)
+- {{cssxref("grid-template-areas")}}
+- {{cssxref("grid-template-columns")}}
+- {{cssxref("grid-template-rows")}}
 
 ## Syntax
 
diff --git a/files/en-us/web/css/reference/properties/grid/index.md b/files/en-us/web/css/reference/properties/grid/index.md
@@ -70,12 +70,12 @@ grid: repeat(3, 80px) / auto-flow;
 
 This property is a shorthand for the following CSS properties:
 
-- [`grid-auto-columns`](/en-US/docs/Web/CSS/Reference/Properties/grid-auto-columns)
-- [`grid-auto-flow`](/en-US/docs/Web/CSS/Reference/Properties/grid-auto-flow)
-- [`grid-auto-rows`](/en-US/docs/Web/CSS/Reference/Properties/grid-auto-rows)
-- [`grid-template-areas`](/en-US/docs/Web/CSS/Reference/Properties/grid-template-areas)
-- [`grid-template-columns`](/en-US/docs/Web/CSS/Reference/Properties/grid-template-columns)
-- [`grid-template-rows`](/en-US/docs/Web/CSS/Reference/Properties/grid-template-rows)
+- {{cssxref("grid-auto-columns")}}
+- {{cssxref("grid-auto-flow")}}
+- {{cssxref("grid-auto-rows")}}
+- {{cssxref("grid-template-areas")}}
+- {{cssxref("grid-template-columns")}}
+- {{cssxref("grid-template-rows")}}
 
 ## Syntax
 
diff --git a/files/en-us/web/css/reference/properties/interpolate-size/index.md b/files/en-us/web/css/reference/properties/interpolate-size/index.md
@@ -10,7 +10,7 @@ sidebar: cssref
 
 {{seecompattable}}
 
-The **`interpolate-size`** [CSS](/en-US/docs/Web/CSS) property allows you to enable [animations](/en-US/docs/Web/CSS/Guides/Animations) and [transitions](/en-US/docs/Web/CSS/Guides/Transitions) between a [`<length-percentage>`](/en-US/docs/Web/CSS/Reference/Values/length-percentage) value and an [intrinsic size](/en-US/docs/Glossary/Intrinsic_Size) value such as `auto`, [`fit-content`](/en-US/docs/Web/CSS/Reference/Values/fit-content), or [`max-content`](/en-US/docs/Web/CSS/Reference/Values/max-content).
+The **`interpolate-size`** [CSS](/en-US/docs/Web/CSS) property allows you to enable [animations](/en-US/docs/Web/CSS/Guides/Animations) and [transitions](/en-US/docs/Web/CSS/Guides/Transitions) between a {{cssxref("&lt;length-percentage&gt;")}} value and an {{glossary("intrinsic size")}} value such as `auto`, {{cssxref("fit-content")}}, or {{cssxref("max-content")}}.
 
 This property is typically used to animate the {{cssxref("width")}} and/or {{cssxref("height")}} of a container between a `<length-percentage>` and the full size of its content (i.e., between "closed" and "open" or "hide" and "reveal" states) when animating a non-box-model CSS property, such as {{cssxref("transform")}}, is not a viable solution.
 
@@ -35,13 +35,13 @@ interpolate-size: unset;
 ### Values
 
 - `allow-keywords`
-  - : Enables [interpolation](/en-US/docs/Glossary/Interpolation) between a [`<length-percentage>`](/en-US/docs/Web/CSS/Reference/Values/length-percentage) value and an intrinsic size value, to allow animation between the two.
+  - : Enables [interpolation](/en-US/docs/Glossary/Interpolation) between a {{cssxref("&lt;length-percentage&gt;")}} value and an intrinsic size value, to allow animation between the two.
 - `numeric-only`
   - : The default behavior — intrinsic size values cannot be interpolated.
 
 ## Description
 
-Setting `interpolate-size: allow-keywords` enables interpolation between a [`<length-percentage>`](/en-US/docs/Web/CSS/Reference/Values/length-percentage) value and an intrinsic size value. Note that it does not enable animating between two intrinsic size values. One end of the animation must be a `<length-percentage>`.
+Setting `interpolate-size: allow-keywords` enables interpolation between a {{cssxref("&lt;length-percentage&gt;")}} value and an intrinsic size value. Note that it does not enable animating between two intrinsic size values. One end of the animation must be a `<length-percentage>`.
 
 The `interpolate-size` value is inherited, so animating to (or from) an intrinsic size value can be enabled for an entire document by setting it on the document root:
 
diff --git a/files/en-us/web/css/reference/properties/justify-content/index.md b/files/en-us/web/css/reference/properties/justify-content/index.md
@@ -119,7 +119,7 @@ justify-content: unset;
   - : The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis (in a grid container) or the main-axis (in a flexbox container), this value behaves like `start`.
 
 - `normal`
-  - : Behaves as `stretch`, except in the case of multi-column containers with a non-`auto` [`column-width`](/en-US/docs/Web/CSS/Reference/Properties/column-width), in which case the columns take their specified `column-width` rather than stretching to fill the container. As `stretch` behaves as `start` in flex containers, `normal` also behaves as `start`.
+  - : Behaves as `stretch`, except in the case of multi-column containers with a non-`auto` {{cssxref("column-width")}}, in which case the columns take their specified `column-width` rather than stretching to fill the container. As `stretch` behaves as `start` in flex containers, `normal` also behaves as `start`.
 
 - `space-between`
   - : The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
diff --git a/files/en-us/web/css/reference/properties/list-style-image/index.md b/files/en-us/web/css/reference/properties/list-style-image/index.md
@@ -138,7 +138,7 @@ ul {
 
 ### Using a gradient
 
-This example has a [CSS gradient](/en-US/docs/Web/CSS/Guides/Images/Using_gradients) as a marker, which we create uses the {{cssxref("gradient/linear-gradient", "linear-gradient()")}} image function.
+This example has a [CSS gradient](/en-US/docs/Web/CSS/Guides/Images/Using_gradients) as a marker, which we create uses the {{cssxref("linear-gradient()")}} image function.
 
 #### HTML
 
diff --git a/files/en-us/web/css/reference/properties/list-style/index.md b/files/en-us/web/css/reference/properties/list-style/index.md
@@ -91,9 +91,9 @@ The values of this property are applied to list items, including {{HTMLElement("
 
 This property is a shorthand for the following CSS properties:
 
-- [`list-style-image`](/en-US/docs/Web/CSS/Reference/Properties/list-style-image)
-- [`list-style-position`](/en-US/docs/Web/CSS/Reference/Properties/list-style-position)
-- [`list-style-type`](/en-US/docs/Web/CSS/Reference/Properties/list-style-type)
+- {{cssxref("list-style-image")}}
+- {{cssxref("list-style-position")}}
+- {{cssxref("list-style-type")}}
 
 ## Syntax
 
diff --git a/files/en-us/web/css/reference/properties/mask-border-outset/index.md b/files/en-us/web/css/reference/properties/mask-border-outset/index.md
@@ -73,7 +73,7 @@ Chromium-based browsers support an outdated version of this property — `mask-b
 ```
 
 > [!NOTE]
-> The [`mask-border`](/en-US/docs/Web/CSS/Reference/Properties/mask-border) page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.
+> The {{cssxref("mask-border")}} page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.
 
 ## Specifications
 
diff --git a/files/en-us/web/css/reference/properties/mask-border-repeat/index.md b/files/en-us/web/css/reference/properties/mask-border-repeat/index.md
@@ -69,7 +69,7 @@ Chromium-based browsers support an outdated version of this property — `mask-b
 ```
 
 > [!NOTE]
-> The [`mask-border`](/en-US/docs/Web/CSS/Reference/Properties/mask-border) page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.
+> The {{cssxref("mask-border")}} page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.
 
 ## Specifications
 
diff --git a/files/en-us/web/css/reference/properties/mask-border-slice/index.md b/files/en-us/web/css/reference/properties/mask-border-slice/index.md
@@ -91,7 +91,7 @@ Chromium-based browsers support an outdated version of this property — `mask-b
 ```
 
 > [!NOTE]
-> The [`mask-border`](/en-US/docs/Web/CSS/Reference/Properties/mask-border) page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.
+> The {{cssxref("mask-border")}} page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.
 
 > [!NOTE]
 > The fill keyword needs to be included if you want the element's content to be visible.
diff --git a/files/en-us/web/css/reference/properties/mask-border-source/index.md b/files/en-us/web/css/reference/properties/mask-border-source/index.md
@@ -60,7 +60,7 @@ Chromium-based browsers support an outdated version of this property — `mask-b
 ```
 
 > [!NOTE]
-> The [`mask-border`](/en-US/docs/Web/CSS/Reference/Properties/mask-border) page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.
+> The {{cssxref("mask-border")}} page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.
 
 ## Specifications
 
diff --git a/files/en-us/web/css/reference/properties/mask-border-width/index.md b/files/en-us/web/css/reference/properties/mask-border-width/index.md
@@ -68,7 +68,7 @@ The `mask-border-width` property may be specified using one, two, three, or four
 
 ### Basic usage
 
-`mask-border-width` defines the width of the border mask — setting this to a different value to [`mask-border-slice`](/en-US/docs/Web/CSS/Reference/Properties/mask-border-slice) will cause the slices to be scaled to fit the border mask.
+`mask-border-width` defines the width of the border mask — setting this to a different value to {{cssxref("mask-border-slice")}} will cause the slices to be scaled to fit the border mask.
 
 ```css
 /* Final mask scaled down to 20px wide */
@@ -83,7 +83,7 @@ Chromium-based browsers support an outdated version of this property — `mask-b
 ```
 
 > [!NOTE]
-> The [`mask-border`](/en-US/docs/Web/CSS/Reference/Properties/mask-border) page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.
+> The {{cssxref("mask-border")}} page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.
 
 ## Specifications
 
diff --git a/files/en-us/web/css/reference/properties/mask-border/index.md b/files/en-us/web/css/reference/properties/mask-border/index.md
@@ -12,12 +12,12 @@ The **`mask-border`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/doc
 
 This property is a shorthand for the following CSS properties:
 
-- [`mask-border-mode`](/en-US/docs/Web/CSS/Reference/Properties/mask-border-mode)
-- [`mask-border-outset`](/en-US/docs/Web/CSS/Reference/Properties/mask-border-outset)
-- [`mask-border-repeat`](/en-US/docs/Web/CSS/Reference/Properties/mask-border-repeat)
-- [`mask-border-slice`](/en-US/docs/Web/CSS/Reference/Properties/mask-border-slice)
-- [`mask-border-source`](/en-US/docs/Web/CSS/Reference/Properties/mask-border-source)
-- [`mask-border-width`](/en-US/docs/Web/CSS/Reference/Properties/mask-border-width)
+- {{cssxref("mask-border-mode")}}
+- {{cssxref("mask-border-outset")}}
+- {{cssxref("mask-border-repeat")}}
+- {{cssxref("mask-border-slice")}}
+- {{cssxref("mask-border-source")}}
+- {{cssxref("mask-border-width")}}
 
 ## Syntax
 
diff --git a/files/en-us/web/css/reference/properties/mask-clip/index.md b/files/en-us/web/css/reference/properties/mask-clip/index.md
@@ -49,7 +49,7 @@ The property accepts a comma-separated list of keyword values. Each value is a `
 - `stroke-box`
   - : The painted content is clipped to the stroke bounding box.
 - `view-box`
-  - : Uses the nearest SVG viewport as reference box. If a [`viewBox`](/en-US/docs/Web/SVG/Reference/Attribute/viewBox) attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the `viewBox` attribute and the dimension of the reference box is set to the width and height values of the `viewBox` attribute.
+  - : Uses the nearest SVG viewport as reference box. If a {{svgattr("viewBox")}} attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the `viewBox` attribute and the dimension of the reference box is set to the width and height values of the `viewBox` attribute.
 - `no-clip`
   - : The painted content is not clipped.
 - `border`
diff --git a/files/en-us/web/css/reference/properties/mask/index.md b/files/en-us/web/css/reference/properties/mask/index.md
@@ -148,7 +148,7 @@ div {
 }
 ```
 
-We then apply a mask to the `<img>`. The `mask-image` is generated using a {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} function. We define it to be a `100px` by `100px` gradient, which repeats starting at the top and left corner of the image's `content-box`. We include two `<geometry-box>` values; the first sets the `mask-origin` and the second defines the `mask-clip` property value. The gradient goes from transparent to solid `lightgreen`. We used `lightgreen` to demonstrate that it isn't the color of the mask that is important, but rather its transparency.
+We then apply a mask to the `<img>`. The `mask-image` is generated using a {{cssxref("repeating-conic-gradient()")}} function. We define it to be a `100px` by `100px` gradient, which repeats starting at the top and left corner of the image's `content-box`. We include two `<geometry-box>` values; the first sets the `mask-origin` and the second defines the `mask-clip` property value. The gradient goes from transparent to solid `lightgreen`. We used `lightgreen` to demonstrate that it isn't the color of the mask that is important, but rather its transparency.
 
 ```css
 img {
diff --git a/files/en-us/web/css/reference/properties/min-width/index.md b/files/en-us/web/css/reference/properties/min-width/index.md
@@ -89,7 +89,7 @@ min-width: unset;
 - {{cssxref("min-content")}}
   - : The intrinsic minimum `min-width`.
 - {{cssxref("fit-content")}}
-  - : Use the available space, but not more than [`max-content`](/en-US/docs/Web/CSS/Reference/Values/max-content), i.e., `min(max-content, max(min-content, stretch))`.
+  - : Use the available space, but not more than {{cssxref("max-content")}}, i.e., `min(max-content, max(min-content, stretch))`.
 - [`fit-content(<length-percentage>)`](/en-US/docs/Web/CSS/Reference/Values/fit-content_function)
   - : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e., `min(max-content, max(min-content, argument))`.
 - `stretch`
