At-rule pages: change css links to macros

files/en-us/web/css/reference/at-rules/@container/index.md

@@ -127,7 +127,7 @@ The `<container-condition>` queries include [size](#size_container_descriptors)
 
 #### Size container descriptors
 
-The `<container-condition>` can include one or more boolean size queries, each within a set of parentheses. A size query includes a size descriptor, a value, and — depending on the descriptor — a comparison operator. The queries always measures the [content box](/en-US/docs/Web/CSS/Reference/Values/box-edge#content-box) as the comparison. The syntax for including multiple conditions is the same as for [`@media`](/en-US/docs/Web/CSS/Reference/At-rules/@media) size feature queries.
+The `<container-condition>` can include one or more boolean size queries, each within a set of parentheses. A size query includes a size descriptor, a value, and — depending on the descriptor — a comparison operator. The queries always measures the [content box](/en-US/docs/Web/CSS/Reference/Values/box-edge#content-box) as the comparison. The syntax for including multiple conditions is the same as for {{cssxref("@media")}} size feature queries.
 
 ```css
 @container (min-width: 400px) {

files/en-us/web/css/reference/at-rules/@font-face/font-display/index.md

@@ -6,7 +6,7 @@ browser-compat: css.at-rules.font-face.font-display
 sidebar: cssref
 ---
 
-The **`font-display`** descriptor for the [`@font-face`](/en-US/docs/Web/CSS/Reference/At-rules/@font-face) at-rule determines how a font face is displayed based on whether and when it is downloaded and ready to use.
+The **`font-display`** descriptor for the {{cssxref("@font-face")}} at-rule determines how a font face is displayed based on whether and when it is downloaded and ready to use.
 
 ## Syntax
 

files/en-us/web/css/reference/at-rules/@font-face/font-family/index.md

@@ -8,7 +8,7 @@ sidebar: cssref
 
 The **`font-family`** [CSS](/en-US/docs/Web/CSS) descriptor sets the font family for a font specified in an {{cssxref("@font-face")}} at-rule.
 
-The value is used for name matching against a particular `@font-face` when styling elements using the [`font-family`](/en-US/docs/Web/CSS/Reference/Properties/font-family) property.
+The value is used for name matching against a particular `@font-face` when styling elements using the {{cssxref("font-family")}} property.
 Any name may be used, and this overrides any name specified in the underlying font data.
 
 ## Syntax

files/en-us/web/css/reference/at-rules/@function/index.md

@@ -25,11 +25,11 @@ The **`@function`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/Gui
 The different parts of the `@function` syntax are as follows:
 
 - `--function-name`
-  - : The identifying name of the function, a [`<dashed-ident>`](/en-US/docs/Web/CSS/Reference/Values/dashed-ident) that starts with `--` and is followed by a valid, user-defined identifier. It is case-sensitive.
+  - : The identifying name of the function, a {{cssxref("&lt;dashed-ident&gt;")}} that starts with `--` and is followed by a valid, user-defined identifier. It is case-sensitive.
 - `<function-parameter>#?` {{optional_inline}}
   - : Zero or more function parameter definitions. Multiple parameter definitions are separated by commas. Each parameter consists of:
     - `--param-name`
-      - : A [CSS custom property](/en-US/docs/Web/CSS/Reference/Properties/--*) name to identify the parameter, a [`<dashed-ident>`](/en-US/docs/Web/CSS/Reference/Values/dashed-ident) that starts with `--` and is followed by a valid, user-defined identifier. It is case-sensitive. Function parameters can be considered custom properties that are locally scoped to the function body.
+      - : A [CSS custom property](/en-US/docs/Web/CSS/Reference/Properties/--*) name to identify the parameter, a {{cssxref("&lt;dashed-ident&gt;")}} that starts with `--` and is followed by a valid, user-defined identifier. It is case-sensitive. Function parameters can be considered custom properties that are locally scoped to the function body.
     - `<css-type>` {{optional_inline}}
       - : A CSS data type or a {{cssxref("type()")}} function that defines the accepted data type(s) for the parameter. If this is not specified, any data type will be valid for the parameter (the same as specifying `type(*)`).
     - `<default-value>` {{optional_inline}}

files/en-us/web/css/reference/at-rules/@import/index.md

@@ -30,7 +30,7 @@ where:
 - _list-of-media-queries_
   - : Is a comma-separated list of [media queries](/en-US/docs/Web/CSS/Guides/Media_queries/Using), which specify the media-dependent conditions for applying the CSS rules defined in the linked URL. If the browser does not support any of these queries, it does not load the linked resource.
 - _layer-name_
-  - : Is the name of a [cascade layer](/en-US/docs/Web/CSS/Reference/At-rules/@layer) into which the contents of the linked resource are imported. See [`layer()`](/en-US/docs/Web/CSS/Reference/At-rules/@import/layer_function) for more information.
+  - : Is the name of a {{cssxref("@layer", "cascade layer")}} into which the contents of the linked resource are imported. See [`layer()`](/en-US/docs/Web/CSS/Reference/At-rules/@import/layer_function) for more information.
 - _supports-condition_
   - : Indicates the feature(s) that the browser must support in order for the stylesheet to be imported.
     If the browser does not conform to the conditions specified in the _supports-condition_, it may not fetch the linked stylesheet, and even if downloaded through some other path, will not load it.
@@ -40,7 +40,7 @@ Use `@import` together with the `layer` keyword or `layer()` function to import
 
 ## Description
 
-Imported rules must come before all other types of rules, except {{CSSxRef("@charset")}} rules and layer creating [`@layer`](/en-US/docs/Web/CSS/Reference/At-rules/@layer) statements.
+Imported rules must come before all other types of rules, except {{CSSxRef("@charset")}} rules and layer creating {{cssxref("@layer")}} statements.
 
 ```css example-bad
 * {
@@ -70,7 +70,7 @@ Similarly, user agents can use the `supports()` function in an `@import` at-rule
 This allows authors to take advantage of recently introduced CSS features, while providing graceful fallbacks for older browser versions.
 Note that the conditions in the `supports()` function of an `@import` at-rule can be obtained in JavaScript using {{domxref("CSSImportRule.supportsText")}}.
 
-The `@import` rule can also be used to create a [cascade layer](/en-US/docs/Web/CSS/Reference/At-rules/@layer) by importing rules from a linked resource. Rules can also be imported into an existing cascade layer. The `layer` keyword or the `layer()` function is used with `@import` for this purpose. Declarations in style rules from imported stylesheets interact with the cascade as if they were written literally into the stylesheet at the point of the import.
+The `@import` rule can also be used to create a {{cssxref("@layer", "cascade layer")}} by importing rules from a linked resource. Rules can also be imported into an existing cascade layer. The `layer` keyword or the `layer()` function is used with `@import` for this purpose. Declarations in style rules from imported stylesheets interact with the cascade as if they were written literally into the stylesheet at the point of the import.
 
 ## Formal syntax
 

files/en-us/web/css/reference/at-rules/@import/layer_function/index.md

@@ -6,7 +6,7 @@ browser-compat: css.at-rules.import.layer
 sidebar: cssref
 ---
 
-The **`layer()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) is used along with the [`@import`](/en-US/docs/Web/CSS/Reference/At-rules/@import) [at-rule](/en-US/docs/Web/CSS/Guides/Syntax/At-rules) to put the imported resource in a separate named [cascade layer](/en-US/docs/Web/CSS/Reference/At-rules/@layer).
+The **`layer()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Reference/Values/Functions) is used along with the {{cssxref("@import")}} [at-rule](/en-US/docs/Web/CSS/Guides/Syntax/At-rules) to put the imported resource in a separate named {{cssxref("@layer", "cascade layer")}}.
 
 ## Syntax
 

files/en-us/web/css/reference/at-rules/@layer/index.md

@@ -232,11 +232,11 @@ In the following example, two layers are created with no rules applied, then CSS
 
 ## See also
 
-- [`@import`](/en-US/docs/Web/CSS/Reference/At-rules/@import)
+- {{cssxref("@import")}}
 - {{domxref("CSSLayerBlockRule")}}
 - {{domxref("CSSLayerStatementRule")}}
 - [`!important`](/en-US/docs/Web/CSS/Reference/Values/important)
-- [`revert-layer`](/en-US/docs/Web/CSS/Reference/Values/revert-layer)
+- {{cssxref("revert-layer")}}
 - [Introducing the CSS cascade](/en-US/docs/Web/CSS/Guides/Cascade/Introduction)
 - [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts)
 - [Learn: Cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers)

files/en-us/web/css/reference/at-rules/@media/-webkit-transform-2d/index.md

@@ -40,7 +40,7 @@ Apple has [a description in Safari CSS Reference](https://developer.apple.com/li
 }
 ```
 
-This media feature is only supported by WebKit. The unprefixed [`transform`](/en-US/docs/Web/CSS/Reference/Properties/transform) property is supported in all modern browsers. If possible, use an {{cssxref("@supports")}} feature query instead:
+This media feature is only supported by WebKit. The unprefixed {{cssxref("transform")}} property is supported in all modern browsers. If possible, use an {{cssxref("@supports")}} feature query instead:
 
 ```css
 @supports (-webkit-transform: translate(100px, 100px)) {

files/en-us/web/css/reference/at-rules/@media/color-gamut/index.md

@@ -58,7 +58,7 @@ p {
 
 - [`color()`](/en-US/docs/Web/CSS/Reference/Values/color_value/color) function to specify colors in a defined colorspace.
 - [CSS colors](/en-US/docs/Web/CSS/Guides/Colors) module
-- [`@media`](/en-US/docs/Web/CSS/Reference/At-rules/@media) at-rule that is used to specify the color-gamut expression.
+- {{cssxref("@media")}} at-rule that is used to specify the color-gamut expression.
 - [Using media queries](/en-US/docs/Web/CSS/Guides/Media_queries/Using) to understand when and how to use a media query.
 - [CSS media queries](/en-US/docs/Web/CSS/Guides/Media_queries) module
 - [sRGB](https://en.wikipedia.org/wiki/SRGB) on Wikipedia

files/en-us/web/css/reference/at-rules/@media/prefers-color-scheme/index.md

@@ -11,7 +11,7 @@ A user indicates their preference through an operating system setting (e.g., lig
 
 ## Embedded elements
 
-For SVG and iframes, `prefers-color-scheme` lets you set a CSS style for the SVG or iframe based on the [`color-scheme`](/en-US/docs/Web/CSS/Reference/Properties/color-scheme) of the parent element in the web page.
+For SVG and iframes, `prefers-color-scheme` lets you set a CSS style for the SVG or iframe based on the {{cssxref("color-scheme")}} of the parent element in the web page.
 SVGs must be used embedded (i.e., `<img src="circle.svg" alt="circle" />`) as opposed to [inlined in HTML](/en-US/docs/Web/SVG/Guides/SVG_in_HTML#basic_example).
 An example of using `prefers-color-scheme` in SVGs can be found in the ["Inherited color scheme in embedded elements"](#inherited_color_scheme_in_embedded_elements) section.
 

files/en-us/web/css/reference/at-rules/@namespace/index.md

@@ -60,7 +60,7 @@ Any `@namespace` rules must follow all {{cssxref("@charset")}} and {{cssxref("@i
 
 The `@namespace` rule can also be used to define a **namespace prefix**. When a universal, type, or attribute selector is prefixed with a namespace prefix, then that selector only matches if the namespace _and_ name of the element or attribute matches.
 
-In HTML, known [foreign elements](https://html.spec.whatwg.org/multipage/syntax.html#foreign-elements) will automatically be assigned namespaces. This means that HTML elements will act as though they are in the XHTML namespace (`http://www.w3.org/1999/xhtml`), even if there is no `xmlns` attribute anywhere in the document, and the [`<svg>`](/en-US/docs/Web/SVG/Reference/Element/svg) and [`<math>`](/en-US/docs/Web/MathML/Reference/Element/math) elements will be assigned their proper namespaces (`http://www.w3.org/2000/svg` and `http://www.w3.org/1998/Math/MathML`, respectively).
+In HTML, known [foreign elements](https://html.spec.whatwg.org/multipage/syntax.html#foreign-elements) will automatically be assigned namespaces. This means that HTML elements will act as though they are in the XHTML namespace (`http://www.w3.org/1999/xhtml`), even if there is no `xmlns` attribute anywhere in the document, and the {{svgelement("svg")}} and [`<math>`](/en-US/docs/Web/MathML/Reference/Element/math) elements will be assigned their proper namespaces (`http://www.w3.org/2000/svg` and `http://www.w3.org/1998/Math/MathML`, respectively).
 
 > [!NOTE]
 > In XML, unless a prefix is defined directly on an attribute (_e.g._, `xlink:href`), that attribute has no namespace. In other words, attributes do not inherit the namespace of the element they're on. To match this behavior, the default namespace in CSS does not apply to attribute selectors.

files/en-us/web/css/reference/at-rules/@page/index.md

@@ -45,8 +45,8 @@ The **`@page`** at-rule is a CSS at-rule used to modify different aspects of pri
 
 The `@page` at-rule can contain only page descriptors and [margin at-rules](#margin_at-rules). The following descriptors have been implemented by at least one browser:
 
-- [`margin`](/en-US/docs/Web/CSS/Reference/Properties/margin)
-  - : Specifies the page margins. Individual margin properties [`margin-top`](/en-US/docs/Web/CSS/Reference/Properties/margin-top), [`margin-right`](/en-US/docs/Web/CSS/Reference/Properties/margin-right), [`margin-bottom`](/en-US/docs/Web/CSS/Reference/Properties/margin-bottom), and [`margin-left`](/en-US/docs/Web/CSS/Reference/Properties/margin-left) can also be used.
+- {{cssxref("margin")}}
+  - : Specifies the page margins. Individual margin properties {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, and {{cssxref("margin-left")}} can also be used.
 - [`page-orientation`](/en-US/docs/Web/CSS/Reference/At-rules/@page/page-orientation)
   - : Specifies the orientation of the page. This does not affect the layout of the page; the rotation is applied after the layout in the output medium.
 - [`size`](/en-US/docs/Web/CSS/Reference/At-rules/@page/size)

files/en-us/web/css/reference/at-rules/@property/index.md

@@ -20,7 +20,7 @@ The `@property` rule represents a custom property registration directly in a sty
 }
 ```
 
-The custom property name is a [`<dashed-ident>`](/en-US/docs/Web/CSS/Reference/Values/dashed-ident) that starts with `--` and is followed by a valid, user-defined identifier. It is case-sensitive.
+The custom property name is a {{cssxref("&lt;dashed-ident&gt;")}} that starts with `--` and is followed by a valid, user-defined identifier. It is case-sensitive.
 
 ### Descriptors
 
@@ -74,7 +74,7 @@ The following code uses the CSS `@property` at-rule to define a custom property
 }
 ```
 
-We define a second custom property, `--item-color`, using [JavaScript](/en-US/docs/Web/JavaScript) instead of CSS. The JavaScript {{domxref('CSS.registerProperty_static', 'registerProperty()')}} method is equivalent to `@property` at-rule. The property is defined to have an initial value of `aqua`, to accept only [`<color>`](/en-US/docs/Web/CSS/Reference/Values/color_value) values, and is not inherited.
+We define a second custom property, `--item-color`, using [JavaScript](/en-US/docs/Web/JavaScript) instead of CSS. The JavaScript {{domxref('CSS.registerProperty_static', 'registerProperty()')}} method is equivalent to `@property` at-rule. The property is defined to have an initial value of `aqua`, to accept only {{cssxref("&lt;color&gt;")}} values, and is not inherited.
 
 ```js
 window.CSS.registerProperty({
@@ -130,7 +130,7 @@ For item three, the `--item-size` value gets set to `1000px`. While `1000px` is
 
 ### Animating a custom property value
 
-In this example, we define a custom property called `--progress` using `@property`: this accepts [`<percentage>`](/en-US/docs/Web/CSS/Reference/Values/percentage) values and has an initial value of `25%`. We use `--progress` to define the position value of the color stops in a {{cssxref("linear-gradient()")}}, specifying where a green color stops, and black starts. We then animate the value of `--progress` to `100%` over 2.5 seconds, giving the effect of animating a progress bar.
+In this example, we define a custom property called `--progress` using `@property`: this accepts {{cssxref("&lt;percentage&gt;")}} values and has an initial value of `25%`. We use `--progress` to define the position value of the color stops in a {{cssxref("linear-gradient()")}}, specifying where a green color stops, and black starts. We then animate the value of `--progress` to `100%` over 2.5 seconds, giving the effect of animating a progress bar.
 
 ```html
 <div class="bar"></div>