CSS properties only: Links to macros (#42131)

* merge conflict

* revert local issue

* CSS properties only: Links to macros

* Update references for -webkit-mask-box-image properties

Author: estelle

files/en-us/web/css/guides/anchor_positioning/using/index.md

@@ -142,7 +142,7 @@ anchor(<anchor-name> <anchor-side>, <fallback>)
 ```
 
 - `<anchor-name>`
-  - : The [`anchor-name`](/en-US/docs/Web/CSS/Reference/Properties/anchor-name) property value of the anchor element you want to position the element's side relative to. This is a `<dashed-ident>` value. If omitted, the element's **default anchor** is used. This is the anchor referenced in its [`position-anchor`](/en-US/docs/Web/CSS/Reference/Properties/position-anchor) property, or associated with the element via the non-standard [`anchor`](/en-US/docs/Web/HTML/Reference/Global_attributes/anchor) HTML attribute.
+  - : The {{cssxref("anchor-name")}} property value of the anchor element you want to position the element's side relative to. This is a `<dashed-ident>` value. If omitted, the element's **default anchor** is used. This is the anchor referenced in its {{cssxref("position-anchor")}} property, or associated with the element via the non-standard [`anchor`](/en-US/docs/Web/HTML/Reference/Global_attributes/anchor) HTML attribute.
     > [!NOTE]
     > Specifying an `<anchor-name>` positions the element relative to that anchor, but does not provide element association. While you can position an element's sides relative to multiple anchors by specifying [different `<anchor-name>` values](/en-US/docs/Web/CSS/Reference/Values/anchor#positioning_an_element_relative_to_multiple_anchors) inside different `anchor()` functions on the same element, the positioned element is only associated with a single anchor.
 
@@ -553,7 +553,7 @@ anchor-size(<anchor-name> <anchor-size>, <length-percentage>)
 ```
 
 - `<anchor-name>`
-  - : The `<dashed-ident>` name set as the value of the [`anchor-name`](/en-US/docs/Web/CSS/Reference/Properties/anchor-name) property of the anchor element you want to size the element relative to. If omitted, the element's **default anchor**, which is the anchor referenced in the [`position-anchor`](/en-US/docs/Web/CSS/Reference/Properties/position-anchor) property, is used.
+  - : The `<dashed-ident>` name set as the value of the {{cssxref("anchor-name")}} property of the anchor element you want to size the element relative to. If omitted, the element's **default anchor**, which is the anchor referenced in the {{cssxref("position-anchor")}} property, is used.
 - [`<anchor-size>`](/en-US/docs/Web/CSS/Reference/Values/anchor-size#anchor-size)
   - : Specifies the dimension of the anchor element that the positioned element will be sized relative to. This can be expressed using physical (`width` or `height`) or logical (`inline`, `block`, `self-inline`, or `self-block`) values.
 - {{cssxref("length-percentage")}}

files/en-us/web/css/guides/animations/using/index.md

@@ -31,7 +31,7 @@ The sub-properties of the {{cssxref("animation")}} property are:
 - {{cssxref("animation-fill-mode")}}
   - : Specifies how an animation applies styles to its target before and after it runs.
     > [!NOTE]
-    > In the case of animation [forwards](/en-US/docs/Web/CSS/Reference/Properties/animation-fill-mode#forwards) fill mode, 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.
+    > In the case of animation [forwards](/en-US/docs/Web/CSS/Reference/Properties/animation-fill-mode#forwards) fill mode, 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.
 - {{cssxref("animation-iteration-count")}}
   - : Specifies the number of times an animation should repeat.
 - {{cssxref("animation-name")}}
@@ -399,7 +399,7 @@ And here's the live output.
 
 ### Animating display and content-visibility
 
-This example demonstrates how [`display`](/en-US/docs/Web/CSS/Reference/Properties/display) and [`content-visibility`](/en-US/docs/Web/CSS/Reference/Properties/content-visibility) can be animated. 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 smoothly with [`opacity`](/en-US/docs/Web/CSS/Reference/Properties/opacity) rather than disappearing immediately.
+This example demonstrates how {{cssxref("display")}} and {{cssxref("content-visibility")}} can be animated. 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 smoothly with {{cssxref("opacity")}} rather than disappearing immediately.
 
 Supporting browsers animate `display` and `content-visibility` with a variation on the [discrete animation type](/en-US/docs/Web/CSS/Guides/Animations/Animatable_properties#discrete). This generally means that properties will flip between two values 50% of the way through animating between the two.
 

files/en-us/web/css/guides/basic_user_interface/index.md

@@ -112,7 +112,7 @@ The CSS basic user interface module also defines the {{CSSxRef("caret")}}, `nav-
 
 ## Related concepts
 
-- CSS [`cursor`](/en-US/docs/Web/CSS/Reference/Properties/cursor) property
+- CSS {{cssxref("cursor")}} property
 - SVG [`cursor`](/en-US/docs/Web/SVG/Reference/Attribute/cursor) attribute
 - CSS {{CSSxRef(":focus")}}, {{CSSxRef(":focus-within")}}, and {{CSSxRef(":focus-visible")}} pseudoclasses
 - {{DOMXref("CaretPosition")}} Interface

files/en-us/web/css/guides/cascade/inheritance/index.md

@@ -19,7 +19,7 @@ Refer to [any CSS property](/en-US/docs/Web/CSS/Reference#index) definition to s
 
 When no value for an **inherited property** has been specified on an element, the element gets the [computed value](/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing#computed_value) of that property on its parent element. Only the root element of the document gets the [initial value](/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing#initial_value) given in the property's summary.
 
-A typical example of an inherited property is the [`color`](/en-US/docs/Web/CSS/Reference/Properties/color) property. Consider the following style rules and the markup:
+A typical example of an inherited property is the {{cssxref("color")}} property. Consider the following style rules and the markup:
 
 ```css
 p {
@@ -33,7 +33,7 @@ p {
 
 {{EmbedLiveSample("Inherited properties","",40)}}
 
-The words "emphasized text" will appear green, since the `em` element has inherited the value of the [`color`](/en-US/docs/Web/CSS/Reference/Properties/color) property from the `p` element. It does _not_ get the initial value of the property (which is the color that is used for the root element when the page specifies no color).
+The words "emphasized text" will appear green, since the `em` element has inherited the value of the {{cssxref("color")}} property from the `p` element. It does _not_ get the initial value of the property (which is the color that is used for the root element when the page specifies no color).
 
 ## Non-inherited properties
 
@@ -53,13 +53,13 @@ p {
 
 {{EmbedLiveSample("Non-inherited properties","",40)}}
 
-The words "emphasized text" will not have another border (since the initial value of [`border-style`](/en-US/docs/Web/CSS/Reference/Properties/border-style) is `none`).
+The words "emphasized text" will not have another border (since the initial value of {{cssxref("border-style")}} is `none`).
 
 ## Notes
 
 The [`inherit`](/en-US/docs/Web/CSS/Reference/Values/inherit) keyword allows authors to explicitly specify inheritance. It works on both inherited and non-inherited properties.
 
-You can control inheritance for all properties at once using the [`all`](/en-US/docs/Web/CSS/Reference/Properties/all) shorthand property, which applies its value to all properties. For example:
+You can control inheritance for all properties at once using the {{cssxref("all")}} shorthand property, which applies its value to all properties. For example:
 
 ```css
 p {
@@ -69,11 +69,11 @@ p {
 }
 ```
 
-This reverts the style of the paragraphs' [`font`](/en-US/docs/Web/CSS/Reference/Properties/font) property to the user agent's default unless a user stylesheet exists, in which case that is used instead. Then it doubles the font size and applies a [`font-weight`](/en-US/docs/Web/CSS/Reference/Properties/font-weight) of `"bold"`.
+This reverts the style of the paragraphs' {{cssxref("font")}} property to the user agent's default unless a user stylesheet exists, in which case that is used instead. Then it doubles the font size and applies a {{cssxref("font-weight")}} of `"bold"`.
 
 ### Overriding inheritance, an example
 
-Using our previous example with [`border`](/en-US/docs/Web/CSS/Reference/Properties/border), if we explicitly set the inheritance with `inherit`, we get the following:
+Using our previous example with {{cssxref("border")}}, if we explicitly set the inheritance with `inherit`, we get the following:
 
 ```css
 p {

files/en-us/web/css/guides/colors/using_relative_colors/index.md

@@ -714,7 +714,7 @@ The relative colors are as follows:
 - `--bg-color`: A much lighter variant of `--base-color`, intended to be used as a background. This is created by taking an origin color of `--base-color` and adding 40 to its lightness value.
 - `--complementary-color`: A complementary color 180 degrees around the color wheel from `--base-color`. This is created by taking an origin color of `--base-color` and adding 180 to its hue value.
 
-Now have a look at the rest of the CSS and take note of all the places where these colors are used. This includes [backgrounds](/en-US/docs/Web/CSS/Reference/Properties/background), [borders](/en-US/docs/Web/CSS/Reference/Properties/border), [`text-shadow`](/en-US/docs/Web/CSS/Reference/Properties/text-shadow), and even the [`accent-color`](/en-US/docs/Web/CSS/Reference/Properties/accent-color) of the slider.
+Now have a look at the rest of the CSS and take note of all the places where these colors are used. This includes [backgrounds](/en-US/docs/Web/CSS/Reference/Properties/background), [borders](/en-US/docs/Web/CSS/Reference/Properties/border), {{cssxref("text-shadow")}}, and even the {{cssxref("accent-color")}} of the slider.
 
 > [!NOTE]
 > For brevity, only the parts of the CSS relevant to relative color usage are shown.

files/en-us/web/css/guides/display/flow_layout_and_overflow/index.md

@@ -47,7 +47,7 @@ body {
 
 {{EmbedLiveSample("overflow", "", "370px")}}
 
-The content goes into the box. Once it fills the box, it continues to overflow in a visible way, displaying content outside the box, potentially displaying under subsequent content. The property that controls how overflow behaves is the [`overflow`](/en-US/docs/Web/CSS/Reference/Properties/overflow) property which has an initial value of `visible`. This is why we can see the overflow content.
+The content goes into the box. Once it fills the box, it continues to overflow in a visible way, displaying content outside the box, potentially displaying under subsequent content. The property that controls how overflow behaves is the {{cssxref("overflow")}} property which has an initial value of `visible`. This is why we can see the overflow content.
 
 ## Controlling overflow
 
@@ -166,7 +166,7 @@ As we have already learned, using any of these values, other than the default of
 
 `overflow: clip` acts like `overflow: hidden`, but it does not allow programmatic scrolling; the box becomes non-scrollable. It also does not create a block formatting context.
 
-The overflow property is in reality a shorthand for the [`overflow-x`](/en-US/docs/Web/CSS/Reference/Properties/overflow-x) and [`overflow-y`](/en-US/docs/Web/CSS/Reference/Properties/overflow-y) properties. If you specify only one value for overflow, this value is used for both axes. However, you can specify both values in which case the first is used for `overflow-x` and therefore the horizontal direction, and the second for `overflow-y` and the vertical direction. In the below example, I have only specified `overflow-y: scroll` so we do not get the unwanted horizontal scrollbar.
+The overflow property is in reality a shorthand for the {{cssxref("overflow-x")}} and {{cssxref("overflow-y")}} properties. If you specify only one value for overflow, this value is used for both axes. However, you can specify both values in which case the first is used for `overflow-x` and therefore the horizontal direction, and the second for `overflow-y` and the vertical direction. In the below example, I have only specified `overflow-y: scroll` so we do not get the unwanted horizontal scrollbar.
 
 ```html hidden live-sample___overflow-y
 <div class="box">
@@ -213,7 +213,7 @@ In the CSS overflow module, there are some properties that can help improve the
 
 ### Inline-Axis Overflow
 
-The [`text-overflow`](/en-US/docs/Web/CSS/Reference/Properties/text-overflow) property deals with text overflowing in the inline direction. It takes one of two values `clip`, in which case content is clipped when it overflows, this is the initial value and therefore the default behavior. We also have `ellipsis` which renders an ellipsis, which may be replaced with a better character for the language or writing mode in use.
+The {{cssxref("text-overflow")}} property deals with text overflowing in the inline direction. It takes one of two values `clip`, in which case content is clipped when it overflows, this is the initial value and therefore the default behavior. We also have `ellipsis` which renders an ellipsis, which may be replaced with a better character for the language or writing mode in use.
 
 ```html hidden live-sample___text-overflow
 <div class="box">

files/en-us/web/css/guides/display/multi-keyword_syntax/index.md

@@ -6,7 +6,7 @@ page-type: guide
 sidebar: cssref
 ---
 
-The [CSS display module](/en-US/docs/Web/CSS/Guides/Display) defines a multi-keyword syntax for the CSS [`display`](/en-US/docs/Web/CSS/Reference/Properties/display) property. This guide explains the multi-keyword syntax.
+The [CSS display module](/en-US/docs/Web/CSS/Guides/Display) defines a multi-keyword syntax for the CSS {{cssxref("display")}} property. This guide explains the multi-keyword syntax.
 
 > [!NOTE]
 > Multi-keyword syntax is also referred to as "two-value syntax" or "multi-value syntax."

files/en-us/web/css/guides/flexible_box_layout/basic_concepts/index.md

@@ -429,13 +429,13 @@ The article [Aligning items in a flex container](/en-US/docs/Web/CSS/Guides/Flex
 
 ### justify-items
 
-The [`justify-items`](/en-US/docs/Web/CSS/Reference/Properties/justify-items) property is ignored in flexbox layouts.
+The {{cssxref("justify-items")}} property is ignored in flexbox layouts.
 
 ### place-items and place-content
 
-The [`place-items`](/en-US/docs/Web/CSS/Reference/Properties/place-items) property is a shorthand property for `align-items` and `justify-items`. If set on a flex container, it will set the alignment but not the justification, as `justify-items` is ignored in flexbox.
+The {{cssxref("place-items")}} property is a shorthand property for `align-items` and `justify-items`. If set on a flex container, it will set the alignment but not the justification, as `justify-items` is ignored in flexbox.
 
-There is another shorthand property, [`place-content`](/en-US/docs/Web/CSS/Reference/Properties/place-content), that defines the {{cssxref("align-content")}} and `justify-content` properties. The `align-content` property only affects flex containers that wrap, and is discussed in [Aligning items in a flex container](/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Aligning_items).
+There is another shorthand property, {{cssxref("place-content")}}, that defines the {{cssxref("align-content")}} and `justify-content` properties. The `align-content` property only affects flex containers that wrap, and is discussed in [Aligning items in a flex container](/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Aligning_items).
 
 ## Next steps
 

files/en-us/web/css/guides/flexible_box_layout/use_cases/index.md

@@ -112,7 +112,7 @@ nav li {
 
 Another way to align items on the main axis is to use auto margins. This enables the design pattern of a navigation bar where one group of items are aligned left and another group aligned right. Here we are using the auto margins technique described in [Using auto margins for main axis alignment](/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Aligning_items#using_auto_margins_for_main_axis_alignment).
 
-The items are aligned on the main axis with `normal`, which behaves as `start`, as this is the initial behavior of flexbox. The [`gap`](/en-US/docs/Web/CSS/Reference/Properties/gap) property creates gaps between items. And we are aligning the last item to the right by giving it a `margin-left` value of `auto`. You can move the class from one item to another to change where the split happens.
+The items are aligned on the main axis with `normal`, which behaves as `start`, as this is the initial behavior of flexbox. The {{cssxref("gap")}} property creates gaps between items. And we are aligning the last item to the right by giving it a `margin-left` value of `auto`. You can move the class from one item to another to change where the split happens.
 
 ```html live-sample___split-navigation
 <nav>

files/en-us/web/css/guides/fonts/variable_fonts/index.md

@@ -362,7 +362,7 @@ angle.addEventListener("input", (e) => {
 
 Slant (represented by the `slnt` tag), or as it's often referred to, 'oblique' — is different from true italics in that it changes the angle of the letterforms but doesn't perform any kind of character substitution. It is also variable, in that it is expressed as a numeric range. This allows the font to be varied anywhere along the slant axis. The allowed range is from -90 to 90 degrees.
 
-The two properties that can control the slant are [`font-style`](/en-US/docs/Web/CSS/Reference/Properties/font-style) and [`font-variation-settings`](/en-US/docs/Web/CSS/Reference/Properties/font-variation-settings). The following two property declarations are the same:
+The two properties that can control the slant are {{cssxref("font-style")}} and {{cssxref("font-variation-settings")}}. The following two property declarations are the same:
 
 ```plain
 font-style: oblique 14deg;
@@ -665,7 +665,7 @@ The basic syntax is the same, but the font technology can be specified, and allo
 }
 ```
 
-In this case, the `font-style: normal` declaration indicates that this font file should be used when `font-family` is set to `MyVariableFontName` and [`font-style`](/en-US/docs/Web/CSS/Reference/Properties/font-style) is set to `normal`. As an alternative, you could use `font-style: oblique 0deg` or `font-style: oblique 0deg 20deg` to indicate that the font has normal upright glyphs (indicated by `0deg`).
+In this case, the `font-style: normal` declaration indicates that this font file should be used when `font-family` is set to `MyVariableFontName` and {{cssxref("font-style")}} is set to `normal`. As an alternative, you could use `font-style: oblique 0deg` or `font-style: oblique 0deg 20deg` to indicate that the font has normal upright glyphs (indicated by `0deg`).
 
 #### Example for a font that contains only italics and no upright characters
 
@@ -681,7 +681,7 @@ In this case, the `font-style: normal` declaration indicates that this font file
 }
 ```
 
-In this case, the `font-style: italic` declaration indicates that this font file should be used when `font-family` is set to `MyVariableFontName` and [`font-style`](/en-US/docs/Web/CSS/Reference/Properties/font-style) is set to `italic`. As an alternative, you could use `font-style: oblique 14deg` to indicate that the font has italic glyphs.
+In this case, the `font-style: italic` declaration indicates that this font file should be used when `font-family` is set to `MyVariableFontName` and {{cssxref("font-style")}} is set to `italic`. As an alternative, you could use `font-style: oblique 14deg` to indicate that the font has italic glyphs.
 
 #### Example for a font that contains an oblique (slant) axis