Replace CSS links with macros

Author: chrisdavidmills

files/en-us/web/api/popover_api/using_interest_invokers/index.md

@@ -113,8 +113,8 @@ When styling popovers used with interest invokers, you can use the same styling
 
 That said, there are some CSS features specific to interest invokers:
 
-- The [`interest-delay`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay) shorthand property and its related [`interest-delay-start`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay-start) and [`interest-delay-end`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay-end) longhands: These can be used to add a delay between the user gaining or losing interest and the browser acting on that change — for example, showing or hiding a popover.
-- The [`:interest-source`](/en-US/docs/Web/CSS/Reference/Selectors/:interest-source) and [`:interest-target`](/en-US/docs/Web/CSS/Reference/Selectors/:interest-target) pseudo-classes: These can be used to apply styles to the interest invoker and its associated target element, respectively, only when interest is indicated.
+- The {{cssxref("interest-delay")}} shorthand property and its related {{cssxref("interest-delay-start")}} and {{cssxref("interest-delay-end")}} longhands: These can be used to add a delay between the user gaining or losing interest and the browser acting on that change — for example, showing or hiding a popover.
+- The {{cssxref(":interest-source")}} and {{cssxref(":interest-target")}} pseudo-classes: These can be used to apply styles to the interest invoker and its associated target element, respectively, only when interest is indicated.
 
 Let's look at a simple example that demonstrates how these features work.
 
@@ -365,7 +365,7 @@ p {
 }
 ```
 
-Next, we apply some styles to the buttons, only when interest is being shown, using the [`:interest-source`](/en-US/docs/Web/CSS/Reference/Selectors/:interest-source) pseudo-class. This allows users to easily see which button interest is being shown on at any point:
+Next, we apply some styles to the buttons, only when interest is being shown, using the {{cssxref(":interest-source")}} pseudo-class. This allows users to easily see which button interest is being shown on at any point:
 
 ```css live-sample___non-popover
 button:interest-source {
@@ -471,7 +471,7 @@ In the markup, we include a link to my GitHub profile inside a short paragraph,
 
 ### CSS
 
-We begin our styles by setting an [`interest-delay-start`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay-start) value of `1s` on the link (the `a[interestfor]` selector is useful for selecting only links that are interest invokers). We are setting this to increase the delay between a user pausing over a link and the popover appearing. It could be annoying to have popovers appearing too quickly on a dense, link-heavy page.
+We begin our styles by setting an {{cssxref("interest-delay-start")}} value of `1s` on the link (the `a[interestfor]` selector is useful for selecting only links that are interest invokers). We are setting this to increase the delay between a user pausing over a link and the popover appearing. It could be annoying to have popovers appearing too quickly on a dense, link-heavy page.
 
 ```css hidden live-sample___link-preview-popover
 html {
@@ -522,7 +522,7 @@ Our next CSS rule sets a `position-area` value of `bottom right` on our popover
 }
 ```
 
-In our last CSS block, we to animate the popover's {{cssxref("opacity")}} property smoothly as it appears (when interest is shown, as specified by the [`:interest-target`](/en-US/docs/Web/CSS/Reference/Selectors/:interest-target) pseudo-class). Because the popover is animating from being hidden (via `display: none`), there are a few extra features required to achieve this. We need to animate the {{cssxref("overlay")}} and {{cssxref("display")}} properties, setting [`allow-discrete`](/en-US/docs/Web/CSS/Reference/Properties/transition-behavior#allow-discrete) as we do so to allow discrete animations, and we need to use a {{cssxref("@starting-style")}} block to set the starting styles for the popover in the "interest target" state, as it has not previously been rendered visually.
+In our last CSS block, we to animate the popover's {{cssxref("opacity")}} property smoothly as it appears (when interest is shown, as specified by the {{cssxref(":interest-target")}} pseudo-class). Because the popover is animating from being hidden (via `display: none`), there are a few extra features required to achieve this. We need to animate the {{cssxref("overlay")}} and {{cssxref("display")}} properties, setting [`allow-discrete`](/en-US/docs/Web/CSS/Reference/Properties/transition-behavior#allow-discrete) as we do so to allow discrete animations, and we need to use a {{cssxref("@starting-style")}} block to set the starting styles for the popover in the "interest target" state, as it has not previously been rendered visually.
 
 ```css hidden live-sample___link-preview-popover
 [popover]:interest-target {

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

@@ -91,9 +91,9 @@ Click "Play" in the example above to see or edit the code for the animation in t
 - {{CSSxRef("caret-color")}}
 - {{CSSxRef("caret-shape")}}
 - {{CSSxRef("cursor")}}
-- [`interest-delay`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay), shorthand for:
-  - [`interest-delay-start`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay-start)
-  - [`interest-delay-end`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay-end)
+- {{CSSxRef("interest-delay")}}, shorthand for:
+  - {{CSSxRef("interest-delay-start")}}
+  - {{CSSxRef("interest-delay-end")}}
 - {{CSSxRef("outline")}}, shorthand for:
   - {{CSSxRef("outline-color")}}
   - {{CSSxRef("outline-style")}}

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

@@ -53,8 +53,8 @@ The CSS selectors module also introduces the [column combinator](/en-US/docs/Web
 - {{CSSXref(":hover")}}
 - {{CSSXref(":in-range")}}
 - {{CSSXref(":indeterminate")}}
-- [`:interest-source`](/en-US/docs/Web/CSS/Reference/Selectors/:interest-source)
-- [`:interest-target`](/en-US/docs/Web/CSS/Reference/Selectors/:interest-target)
+- {{CSSXref(":interest-source")}}
+- {{CSSXref(":interest-target")}}
 - {{CSSXref(":invalid")}}
 - {{CSSXref(":is", ":is()")}}
 - {{CSSXref(":lang", ":lang()")}}

files/en-us/web/css/reference/properties/interest-delay-end/index.md

@@ -12,7 +12,7 @@ sidebar: cssref
 
 The **`interest-delay-end`** [CSS](/en-US/docs/Web/CSS) property specifies a delay between the user losing interest in an [interest invoker](/en-US/docs/Web/API/Popover_API/Using_interest_invokers) element and the {{domxref("HTMLElement.loseinterest_event", "loseinterest")}} event being fired, which typically ends an effect on the target.
 
-The `interest-delay-end` and [`interest-delay-start`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay-start) properties can both be set using the [`interest-delay`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay) shorthand.
+The `interest-delay-end` and {{cssxref("interest-delay-start")}} properties can both be set using the {{cssxref("interest-delay")}} shorthand.
 
 ## Syntax
 
@@ -108,7 +108,7 @@ Now try checking the checkbox and trying the same actions again. This time, the
 
 ## See also
 
-- [`interest-delay-start`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay-start), [`interest-delay`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay)
+- {{cssxref("interest-delay-start")}}, {{cssxref("interest-delay")}}
 - [Popover API](/en-US/docs/Web/API/Popover_API)
 - [Using interest invokers](/en-US/docs/Web/API/Popover_API/Using_interest_invokers)
 - [CSS basic user interface module](/en-US/docs/Web/CSS/Guides/Basic_user_interface)

files/en-us/web/css/reference/properties/interest-delay-start/index.md

@@ -12,7 +12,7 @@ sidebar: cssref
 
 The **`interest-delay-start`** [CSS](/en-US/docs/Web/CSS) property specifies a delay between the user showing interest in an [interest invoker](/en-US/docs/Web/API/Popover_API/Using_interest_invokers) element and the {{domxref("HTMLElement.interest_event", "interest")}} event being fired, which typically starts an effect on the target.
 
-The `interest-delay-start` and [`interest-delay-end`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay-end) properties can both be set using the [`interest-delay`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay) shorthand.
+The `interest-delay-start` and {{cssxref("interest-delay-end")}} properties can both be set using the {{cssxref("interest-delay")}} shorthand.
 
 ## Syntax
 
@@ -131,7 +131,7 @@ button {
 }
 ```
 
-Finally, we combine the [`:interest-source`](/en-US/docs/Web/CSS/Reference/Selectors/:interest-source) pseudo-class with the {{cssxref(":has()")}} pseudo-class to create a ruleset that applies `interest-delay-start: 0s` to all buttons inside the paragraph, only if the paragraph contains a button that interest has been shown on (that is, has been selected by `button:interest-source`).
+Finally, we combine the {{cssxref(":interest-source")}} pseudo-class with the {{cssxref(":has()")}} pseudo-class to create a ruleset that applies `interest-delay-start: 0s` to all buttons inside the paragraph, only if the paragraph contains a button that interest has been shown on (that is, has been selected by `button:interest-source`).
 
 ```css live-sample___interest-delay-remove-on-interest
 .container:has(button:interest-source) button {
@@ -157,7 +157,7 @@ Try showing interest in any button and notice how, when you then immediately sho
 
 ## See also
 
-- [`interest-delay-end`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay-end), [`interest-delay`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay)
+- {{cssxref("interest-delay-end")}}, {{cssxref("interest-delay")}}
 - [Popover API](/en-US/docs/Web/API/Popover_API)
 - [Using interest invokers](/en-US/docs/Web/API/Popover_API/Using_interest_invokers)
 - [CSS basic user interface module](/en-US/docs/Web/CSS/Guides/Basic_user_interface)

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

@@ -16,8 +16,8 @@ The **`interest-delay`** [CSS](/en-US/docs/Web/CSS) property specifies a delay,
 
 The `interest-delay` property is a shorthand for the following properties:
 
-- [`interest-delay-start`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay-start)
-- [`interest-delay-end`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay-end)
+- {{cssxref("interest-delay-start")}}
+- {{cssxref("interest-delay-end")}}
 
 ## Syntax
 
@@ -54,11 +54,11 @@ A control element such as an {{htmlelement("a")}} or {{htmlelement("button")}} c
 
 When the user shows/loses interest, the associated effect doesn't start/stop immediately — the browser introduces a short delay, which may vary by vendor. This makes sense — it would be annoying, for example, for preview popovers to appear immediately every time a link is hovered.
 
-The `interest-delay` property allows developers to customize the delay before the interest effect starts (specified individually by the [`interest-delay-start`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay-start) property) and the delay before the interest effect ends (specified individually by the [`interest-delay-end`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay-end) property).
+The `interest-delay` property allows developers to customize the delay before the interest effect starts (specified individually by the {{cssxref("interest-delay-start")}} property) and the delay before the interest effect ends (specified individually by the {{cssxref("interest-delay-end")}} property).
 
 The `interest-delay` property can take one or two values. These values can be the keyword `normal`, which sets the default browser delay, or a {{cssxref("<time>")}} value, which sets a custom delay. Custom delays must be positive values, otherwise the property is invalid.
 
-If a single value is specified, that value is set for the [`interest-delay-start`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay-start) and [`interest-delay-end`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay-end). If two values are specified, the first value is set for the [`interest-delay-start`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay-start) and the second value is set for the [`interest-delay-end`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay-end).
+If a single value is specified, that value is set for the {{cssxref("interest-delay-start")}} and {{cssxref("interest-delay-end")}}. If two values are specified, the first value is set for the {{cssxref("interest-delay-start")}} and the second value is set for the {{cssxref("interest-delay-end")}}.
 
 ## Formal definition
 
@@ -129,7 +129,7 @@ Now try checking the checkbox and trying the same actions again. This time, the
 
 ## See also
 
-- [`interest-delay-start`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay-start), [`interest-delay-end`](/en-US/docs/Web/CSS/Reference/Properties/interest-delay-end)
+- {{cssxref("interest-delay-start")}}, {{cssxref("interest-delay-end")}}
 - [Popover API](/en-US/docs/Web/API/Popover_API)
 - [Using interest invokers](/en-US/docs/Web/API/Popover_API/Using_interest_invokers)
 - [CSS basic user interface module](/en-US/docs/Web/CSS/Guides/Basic_user_interface)

files/en-us/web/css/reference/selectors/_colon_interest-source/index.md

@@ -73,7 +73,7 @@ Try showing interest in the button (for example by hovering or focusing it), and
 
 ## See also
 
-- [`:interest-target`](/en-US/docs/Web/CSS/Reference/Selectors/:interest-target)
+- {{cssxref(":interest-target")}}
 - [Popover API](/en-US/docs/Web/API/Popover_API)
 - [Using interest invokers](/en-US/docs/Web/API/Popover_API/Using_interest_invokers)
 - [CSS selectors module](/en-US/docs/Web/CSS/Guides/Selectors)

files/en-us/web/css/reference/selectors/_colon_interest-target/index.md

@@ -78,7 +78,7 @@ Try showing interest in the button (for example by hovering or focusing it), and
 
 ## See also
 
-- [`:interest-source`](/en-US/docs/Web/CSS/Reference/Selectors/:interest-source)
+- {{cssxref(":interest-source")}}
 - [Popover API](/en-US/docs/Web/API/Popover_API)
 - [Using interest invokers](/en-US/docs/Web/API/Popover_API/Using_interest_invokers)
 - [CSS selectors module](/en-US/docs/Web/CSS/Guides/Selectors)