Revert "CSS properties: convert links to macros (part 5, the end)" (#41990)

Revert "CSS properties: convert links to macros (part 5, the end) (#41973)"

This reverts commit 1ec97f6.

Author: chrisdavidmills

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

@@ -118,7 +118,7 @@ offset-path: unset;
 
 ### Values
 
-The `offset-path` property takes as its value an `<offset-path>` value, a [`<coord-box>`](/en-US/docs/Web/CSS/Reference/Values/box-edge#values) value, or both, or the `none` keyword. The `<offset-path>` value is a {{cssxref("ray","ray()")}} function, a {{cssxref("url_value", "&lt;url&gt;")}} value, or a {{cssxref("&lt;basic-shape&gt;")}} value.
+The `offset-path` property takes as its value an `<offset-path>` value, a [`<coord-box>`](/en-US/docs/Web/CSS/Reference/Values/box-edge#values) value, or both, or the `none` keyword. The `<offset-path>` value is a {{cssxref("ray","ray()")}} function, a {{cssxref("url_value", "&lt;url&gt;")}} value, or a [`<basic-shape>`](/en-US/docs/Web/CSS/Reference/Values/basic-shape) value.
 
 - `none`
   - : Specifies that the element does not follow any offset path. The `none` value is equivalent to the element not having any [offset transform](/en-US/docs/Web/CSS/Reference/Properties/offset). The element's movement in this case is determined by its default position properties, such as {{cssxref("top")}} and {{cssxref("left")}}, instead of an offset path. This is the default value.

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

@@ -77,15 +77,15 @@ To change the opacity of a background only, use the {{cssxref("background")}} pr
 background: rgb(0 0 0 / 40%);
 ```
 
-When `opacity` value is set to `0`, the element and all of its children appear invisible, but they are still part of the DOM. That means they still register [pointer events](/en-US/docs/Web/API/Pointer_events) and, if the elements are in a tabbing order, they do get focus. For good usability, make sure to make such elements visible when they receive user interactions or use the CSS {{cssxref("pointer-events")}} property to disable pointer events and take the element out of the tab order by disabling with the `disabled` attribute or setting [`tab-index="-1"`](/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex) for non-form-related interactive elements.
+When `opacity` value is set to `0`, the element and all of its children appear invisible, but they are still part of the DOM. That means they still register [pointer events](/en-US/docs/Web/API/Pointer_events) and, if the elements are in a tabbing order, they do get focus. For good usability, make sure to make such elements visible when they receive user interactions or use the CSS [`pointer-events`](/en-US/docs/Web/CSS/Reference/Properties/pointer-events) property to disable pointer events and take the element out of the tab order by disabling with the `disabled` attribute or setting [`tab-index="-1"`](/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex) for non-form-related interactive elements.
 
 Using `opacity` with a value other than `1` places the element in a new [stacking context](/en-US/docs/Web/CSS/Guides/Positioned_layout/Stacking_context).
 
-Opacity alone should not be used to provide information to screen readers. Use the HTML [`hidden`](/en-US/docs/Web/HTML/Reference/Global_attributes/hidden) attribute, CSS {{cssxref("visibility")}}, or CSS {{cssxref("display")}} style properties. It's best to avoid using [`aria-hidden`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-hidden) attribute, but if the element is hidden with opacity, then hide it from screen readers as well.
+Opacity alone should not be used to provide information to screen readers. Use the HTML [`hidden`](/en-US/docs/Web/HTML/Reference/Global_attributes/hidden) attribute, CSS [`visibility`](/en-US/docs/Web/CSS/Reference/Properties/visibility), or CSS [`display`](/en-US/docs/Web/CSS/Reference/Properties/display) style properties. It's best to avoid using [`aria-hidden`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-hidden) attribute, but if the element is hidden with opacity, then hide it from screen readers as well.
 
 ### Transitioning opacity
 
-When [transitioning](/en-US/docs/Web/CSS/Guides/Transitions) the opacity of elements as you add them to the page when content was formerly hidden with [`visibility: hidden`](/en-US/docs/Web/CSS/Reference/Properties/visibility#hidden), [`display: none`](/en-US/docs/Web/CSS/Reference/Properties/display#none), or [`content-visibility: hidden`](/en-US/docs/Web/CSS/Reference/Properties/content-visibility#hidden), you need to include both a {{cssxref("@starting-style")}} and [`transition-behavior: allow-discrete`](/en-US/docs/Web/CSS/Reference/Properties/transition-behavior#allow-discrete):
+When [transitioning](/en-US/docs/Web/CSS/Guides/Transitions) the opacity of elements as you add them to the page when content was formerly hidden with [`visibility: hidden`](/en-US/docs/Web/CSS/Reference/Properties/visibility#hidden), [`display: none`](/en-US/docs/Web/CSS/Reference/Properties/display#none), or [`content-visibility: hidden`](/en-US/docs/Web/CSS/Reference/Properties/content-visibility#hidden), you need to include both a [`@starting-style`](/en-US/docs/Web/CSS/Reference/At-rules/@starting-style) and [`transition-behavior: allow-discrete`](/en-US/docs/Web/CSS/Reference/Properties/transition-behavior#allow-discrete):
 
 ```css
 .card {
@@ -106,9 +106,9 @@ When [transitioning](/en-US/docs/Web/CSS/Guides/Transitions) the opacity of elem
 }
 ```
 
-To enable first-style transitions, `@starting-style` rules are needed. In the above code, setting `opacity: 0` in `@starting-style` provides a starting point for the transition when the element receives its initial style update. For more details, see {{cssxref("@starting-style")}}.
+To enable first-style transitions, `@starting-style` rules are needed. In the above code, setting `opacity: 0` in `@starting-style` provides a starting point for the transition when the element receives its initial style update. For more details, see [`@starting-style`](/en-US/docs/Web/CSS/Reference/At-rules/@starting-style).
 
-Setting `transition-behavior: allow-discrete` is required to transition to `display: none`. See the {{cssxref("transition-behavior")}} property for more details.
+Setting `transition-behavior: allow-discrete` is required to transition to `display: none`. See the [`transition-behavior`](/en-US/docs/Web/CSS/Reference/Properties/transition-behavior) property for more details.
 
 ## Accessibility
 

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

@@ -70,7 +70,7 @@ The `outline-color` property is specified as any one of the values listed below.
 - {{cssxref("<color>")}}
   - : The color of the outline, specified as a `<color>`.
 
-The specification also lists an additional value, `auto`, which is not currently supported in any browsers. When implemented, `auto` will compute to [`currentColor`](/en-US/docs/Web/CSS/Reference/Values/color_value#currentcolor_keyword) unless {{cssxref("outline-style")}} is set to `auto` then it will compute to the [accent color](/en-US/docs/Web/CSS/Reference/Properties/accent-color).
+The specification also lists an additional value, `auto`, which is not currently supported in any browsers. When implemented, `auto` will compute to [`currentColor`](/en-US/docs/Web/CSS/Reference/Values/color_value#currentcolor_keyword) unless [`outline-style`](/en-US/docs/Web/CSS/Reference/Properties/outline-style) is set to `auto` then it will compute to the [accent color](/en-US/docs/Web/CSS/Reference/Properties/accent-color).
 
 ## Description
 

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

@@ -6,7 +6,7 @@ browser-compat: css.properties.overflow-x
 sidebar: cssref
 ---
 
-The **`overflow-x`** [CSS](/en-US/docs/Web/CSS) property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the {{cssxref("overflow")}} shorthand property.
+The **`overflow-x`** [CSS](/en-US/docs/Web/CSS) property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the [`overflow`](/en-US/docs/Web/CSS/Reference/Properties/overflow) shorthand property.
 
 {{InteractiveExample("CSS Demo: overflow-x")}}
 
@@ -78,7 +78,7 @@ If {{cssxref("overflow-y")}} is `hidden`, `scroll`, or `auto`, and the `overflow
 - `hidden`
   - : Overflow content is clipped if necessary to fit horizontally in the elements' padding box. No scroll bars are provided.
 - `clip`
-  - : Overflow content is clipped at the element's _overflow clip edge_ that is defined using the {{cssxref("overflow-clip-margin")}} property. As a result, content overflows the element's padding box by the {{cssxref("<length>")}} value of `overflow-clip-margin` or by `0px` if not set. The difference between `clip` and `hidden` is that the `clip` keyword also forbids all scrolling, including programmatic scrolling. No new formatting context is created. To establish a formatting context, use `overflow: clip` along with {{cssxref("display", "display: flow-root", "#flow-root")}}. The element box is not a scroll container.
+  - : Overflow content is clipped at the element's _overflow clip edge_ that is defined using the [`overflow-clip-margin`](/en-US/docs/Web/CSS/Reference/Properties/overflow-clip-margin) property. As a result, content overflows the element's padding box by the {{cssxref("<length>")}} value of `overflow-clip-margin` or by `0px` if not set. The difference between `clip` and `hidden` is that the `clip` keyword also forbids all scrolling, including programmatic scrolling. No new formatting context is created. To establish a formatting context, use `overflow: clip` along with {{cssxref("display", "display: flow-root", "#flow-root")}}. The element box is not a scroll container.
 - `scroll`
   - : Overflow content is clipped if necessary to fit horizontally inside the element's padding box. Browsers display scroll bars in the horizontal direction whether or not any content is actually clipped. (This prevents scroll bars from appearing or disappearing when the content changes.) Printers may still print overflowing content.
 - `auto`

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

@@ -6,7 +6,7 @@ browser-compat: css.properties.overflow-y
 sidebar: cssref
 ---
 
-The **`overflow-y`** [CSS](/en-US/docs/Web/CSS) property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the {{cssxref("overflow")}} shorthand property.
+The **`overflow-y`** [CSS](/en-US/docs/Web/CSS) property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the [`overflow`](/en-US/docs/Web/CSS/Reference/Properties/overflow) shorthand property.
 
 {{InteractiveExample("CSS Demo: overflow-y")}}
 
@@ -79,7 +79,7 @@ If {{cssxref("overflow-x")}} is `hidden`, `scroll`, or `auto` and the `overflow-
 - `hidden`
   - : Overflow content is clipped if necessary to fit vertically in the elements' padding box. No scroll bars are provided.
 - `clip`
-  - : Overflow content is clipped at the element's _overflow clip edge_ that is defined using the {{cssxref("overflow-clip-margin")}} property. As a result, content overflows the element's padding box by the {{cssxref("<length>")}} value of `overflow-clip-margin` or by `0px` if not set. The difference between `clip` and `hidden` is that the `clip` keyword also forbids all scrolling, including programmatic scrolling. No new formatting context is created. To establish a formatting context, use `overflow: clip` along with {{cssxref("display", "display: flow-root", "#flow-root")}}. The element box is not a scroll container.
+  - : Overflow content is clipped at the element's _overflow clip edge_ that is defined using the [`overflow-clip-margin`](/en-US/docs/Web/CSS/Reference/Properties/overflow-clip-margin) property. As a result, content overflows the element's padding box by the {{cssxref("<length>")}} value of `overflow-clip-margin` or by `0px` if not set. The difference between `clip` and `hidden` is that the `clip` keyword also forbids all scrolling, including programmatic scrolling. No new formatting context is created. To establish a formatting context, use `overflow: clip` along with {{cssxref("display", "display: flow-root", "#flow-root")}}. The element box is not a scroll container.
 - `scroll`
   - : Overflow content is clipped if necessary to fit vertically inside the element's padding box. Browsers display scroll bars in the vertical direction whether or not any content is actually clipped. (This prevents scroll bars from appearing or disappearing when the content changes.) Printers may still print overflowing content.
 - `auto`

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

@@ -54,8 +54,8 @@ overflow: auto;
 
 This property is a shorthand for the following CSS properties:
 
-- {{cssxref("overflow-x")}}
-- {{cssxref("overflow-y")}}
+- [`overflow-x`](/en-US/docs/Web/CSS/Reference/Properties/overflow-x)
+- [`overflow-y`](/en-US/docs/Web/CSS/Reference/Properties/overflow-y)
 
 ## Syntax
 
@@ -85,7 +85,7 @@ The `overflow` property is specified as one or two {{CSSXref("overflow_value", "
 - `hidden`
   - : Overflow content is clipped at the element's padding box. There are no scroll bars, and the clipped content is not visible (i.e., clipped content is hidden), but the content still exists. User agents do not add scroll bars and also do not allow users to view the content outside the clipped region by actions such as dragging on a touch screen or using the scroll wheel on a mouse. The content _can_ be scrolled programmatically (for example, by linking to anchor text, by tabbing to a hidden yet focusable element, or by setting the value of the {{domxref("Element.scrollLeft", "scrollLeft")}} property or the {{domxref("Element.scrollTo", "scrollTo()")}} method), in which case the element box is a scroll container.
 - `clip`
-  - : Overflow content is clipped at the element's _overflow clip edge_ that is defined using the {{cssxref("overflow-clip-margin")}} property. As a result, content overflows the element's padding box by the {{cssxref("<length>")}} value of `overflow-clip-margin` or by `0px` if not set. Overflow content outside the clipped region is not visible, user agents do not add a scroll bar, and programmatic scrolling is also not supported. No new [formatting context](/en-US/docs/Web/CSS/Guides/Display/Block_formatting_context) is created. To establish a formatting context, use `overflow: clip` along with {{cssxref("display", "display: flow-root", "#flow-root")}}. The element box is not a scroll container.
+  - : Overflow content is clipped at the element's _overflow clip edge_ that is defined using the [`overflow-clip-margin`](/en-US/docs/Web/CSS/Reference/Properties/overflow-clip-margin) property. As a result, content overflows the element's padding box by the {{cssxref("<length>")}} value of `overflow-clip-margin` or by `0px` if not set. Overflow content outside the clipped region is not visible, user agents do not add a scroll bar, and programmatic scrolling is also not supported. No new [formatting context](/en-US/docs/Web/CSS/Guides/Display/Block_formatting_context) is created. To establish a formatting context, use `overflow: clip` along with {{cssxref("display", "display: flow-root", "#flow-root")}}. The element box is not a scroll container.
 - `scroll`
   - : Overflow content is clipped at the element's padding box, and overflow content can be scrolled into view using scroll bars. User agents display scroll bars whether or not any content is overflowing, so in the horizontal and vertical directions if the value applies to both directions. The use of this keyword, therefore, can prevent scroll bars from appearing and disappearing as content changes. Printers may still print overflow content. The element box is a scroll container.
 - `auto`

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

@@ -128,13 +128,13 @@ html {
 }
 ```
 
-The two properties we want to animate are {{cssxref("opacity")}} and {{cssxref("transform")}}): we want the popover to fade in and out while growing and shrinking in the horizontal direction. We set a starting state for these properties on the default hidden state of the popover element (selected via `[popover]`), and an end state on the open state of the popover (selected via the [`:popover-open`](/en-US/docs/Web/CSS/Reference/Selectors/:popover-open) pseudo-class). We then set a {{cssxref("transition")}} property to animate between the two.
+The two properties we want to animate are [`opacity`](/en-US/docs/Web/CSS/Reference/Properties/opacity) and [`transform`](/en-US/docs/Web/CSS/Reference/Properties/transform)): we want the popover to fade in and out while growing and shrinking in the horizontal direction. We set a starting state for these properties on the default hidden state of the popover element (selected via `[popover]`), and an end state on the open state of the popover (selected via the [`:popover-open`](/en-US/docs/Web/CSS/Reference/Selectors/:popover-open) pseudo-class). We then set a [`transition`](/en-US/docs/Web/CSS/Reference/Properties/transition) property to animate between the two.
 
 Because the animated element is being promoted to the [top layer](/en-US/docs/Glossary/Top_layer) when shown and removed from the top layer when hidden, `overlay` is added to the list of transitioned elements. This ensures that the removal of the element from the top layer is deferred until the animation has ended. This doesn't make a huge difference for basic animations such as this one, but in more complex cases not doing this can result in the element being removed from the overlay too quickly, meaning the animation is not smooth or effective. Note that the [`transition-behavior: allow-discrete`](/en-US/docs/Web/CSS/Reference/Properties/transition-behavior) value is also set in the shorthand to enable discrete transitions.
 
 The following steps are also required to get the animation working in both directions:
 
-- A starting state for the animation is set inside the {{cssxref("@starting-style")}} at-rule. This is needed to avoid unexpected behavior. By default transitions are not triggered on elements' first style updates, or when the `display` type changes from `none` to another type. `@starting-style` allows you to override that default in a specific controlled fashion. Without this, the entry animation would not occur and the popover would just appear.
+- A starting state for the animation is set inside the [`@starting-style`](/en-US/docs/Web/CSS/Reference/At-rules/@starting-style) at-rule. This is needed to avoid unexpected behavior. By default transitions are not triggered on elements' first style updates, or when the `display` type changes from `none` to another type. `@starting-style` allows you to override that default in a specific controlled fashion. Without this, the entry animation would not occur and the popover would just appear.
 - `display` is also added to the list of transitioned elements so that the animated element is visible (set to `display: block`) throughout both the entry and exit animation. Without this, the exit animation would not be visible; in effect, the popover would just disappear. Again, `transition-behavior: allow-discrete` is required in this case for the animation to occur.
 
 You'll note that we've also included a transition on the [`::backdrop`](/en-US/docs/Web/CSS/Reference/Selectors/::backdrop) that appears behind the popover when it opens, to provide a nice darkening animation. `[popover]:popover-open::backdrop` is needed to select the backdrop when the popover is open.
@@ -161,6 +161,6 @@ The code renders as follows:
 ## See also
 
 - [CSS transitions](/en-US/docs/Web/CSS/Guides/Transitions) module
-- {{cssxref("@starting-style")}}
-- {{cssxref("transition-behavior")}}
+- [`@starting-style`](/en-US/docs/Web/CSS/Reference/At-rules/@starting-style)
+- [`transition-behavior`](/en-US/docs/Web/CSS/Reference/Properties/transition-behavior)
 - [Four new CSS features for smooth entry and exit animations](https://developer.chrome.com/blog/entry-exit-animations/) on developer.chrome.com (2023)