From 04d96bb64b681b7c959241643dcec744dd51339b Mon Sep 17 00:00:00 2001 From: estelle Date: Mon, 17 Nov 2025 04:06:57 +0900 Subject: [PATCH 1/2] At-rule pages: change css links to macros --- files/en-us/web/css/reference/at-rules/@container/index.md | 2 +- .../css/reference/at-rules/@font-face/font-display/index.md | 2 +- .../css/reference/at-rules/@font-face/font-family/index.md | 2 +- files/en-us/web/css/reference/at-rules/@function/index.md | 4 ++-- files/en-us/web/css/reference/at-rules/@import/index.md | 2 +- .../css/reference/at-rules/@import/layer_function/index.md | 2 +- files/en-us/web/css/reference/at-rules/@layer/index.md | 4 ++-- .../reference/at-rules/@media/-webkit-transform-2d/index.md | 2 +- .../web/css/reference/at-rules/@media/color-gamut/index.md | 2 +- .../reference/at-rules/@media/prefers-color-scheme/index.md | 2 +- files/en-us/web/css/reference/at-rules/@namespace/index.md | 2 +- files/en-us/web/css/reference/at-rules/@page/index.md | 4 ++-- files/en-us/web/css/reference/at-rules/@property/index.md | 6 +++--- 13 files changed, 18 insertions(+), 18 deletions(-) diff --git a/files/en-us/web/css/reference/at-rules/@container/index.md b/files/en-us/web/css/reference/at-rules/@container/index.md index 457e63aeb3a9c00..15a18b6a170343c 100644 --- a/files/en-us/web/css/reference/at-rules/@container/index.md +++ b/files/en-us/web/css/reference/at-rules/@container/index.md @@ -127,7 +127,7 @@ The `` queries include [size](#size_container_descriptors) #### Size container descriptors -The `` 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 `` 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) { diff --git a/files/en-us/web/css/reference/at-rules/@font-face/font-display/index.md b/files/en-us/web/css/reference/at-rules/@font-face/font-display/index.md index 4e25804752d0c63..b6d4001f91cdcef 100644 --- a/files/en-us/web/css/reference/at-rules/@font-face/font-display/index.md +++ b/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 diff --git a/files/en-us/web/css/reference/at-rules/@font-face/font-family/index.md b/files/en-us/web/css/reference/at-rules/@font-face/font-family/index.md index 6523cfcd9f58d0b..f464dec27660b30 100644 --- a/files/en-us/web/css/reference/at-rules/@font-face/font-family/index.md +++ b/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 diff --git a/files/en-us/web/css/reference/at-rules/@function/index.md b/files/en-us/web/css/reference/at-rules/@function/index.md index fb6666f850a0c48..a6cea9c2bca875f 100644 --- a/files/en-us/web/css/reference/at-rules/@function/index.md +++ b/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 [``](/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("<dashed-ident>")}} that starts with `--` and is followed by a valid, user-defined identifier. It is case-sensitive. - `#?` {{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 [``](/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("<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. - `` {{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(*)`). - `` {{optional_inline}} diff --git a/files/en-us/web/css/reference/at-rules/@import/index.md b/files/en-us/web/css/reference/at-rules/@import/index.md index dcb43338786afcd..61a782431d8f2f0 100644 --- a/files/en-us/web/css/reference/at-rules/@import/index.md +++ b/files/en-us/web/css/reference/at-rules/@import/index.md @@ -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 * { diff --git a/files/en-us/web/css/reference/at-rules/@import/layer_function/index.md b/files/en-us/web/css/reference/at-rules/@import/layer_function/index.md index d381083eda121c6..a219ba3cb0ca3da 100644 --- a/files/en-us/web/css/reference/at-rules/@import/layer_function/index.md +++ b/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 [cascade layer](/en-US/docs/Web/CSS/Reference/At-rules/@layer). ## Syntax diff --git a/files/en-us/web/css/reference/at-rules/@layer/index.md b/files/en-us/web/css/reference/at-rules/@layer/index.md index 229913039b7776b..4b0a6649f1442d4 100644 --- a/files/en-us/web/css/reference/at-rules/@layer/index.md +++ b/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) diff --git a/files/en-us/web/css/reference/at-rules/@media/-webkit-transform-2d/index.md b/files/en-us/web/css/reference/at-rules/@media/-webkit-transform-2d/index.md index 125e88682ac6eae..5beb7337540fc2e 100644 --- a/files/en-us/web/css/reference/at-rules/@media/-webkit-transform-2d/index.md +++ b/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)) { diff --git a/files/en-us/web/css/reference/at-rules/@media/color-gamut/index.md b/files/en-us/web/css/reference/at-rules/@media/color-gamut/index.md index 8c91466126bb16c..81df0f563a5897f 100644 --- a/files/en-us/web/css/reference/at-rules/@media/color-gamut/index.md +++ b/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 diff --git a/files/en-us/web/css/reference/at-rules/@media/prefers-color-scheme/index.md b/files/en-us/web/css/reference/at-rules/@media/prefers-color-scheme/index.md index 165c8e228b46ba4..8f6c2858a343db8 100644 --- a/files/en-us/web/css/reference/at-rules/@media/prefers-color-scheme/index.md +++ b/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., `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. diff --git a/files/en-us/web/css/reference/at-rules/@namespace/index.md b/files/en-us/web/css/reference/at-rules/@namespace/index.md index c07e6f78d7c56fc..e61dff2e91d7a35 100644 --- a/files/en-us/web/css/reference/at-rules/@namespace/index.md +++ b/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 [``](/en-US/docs/Web/SVG/Reference/Element/svg) and [``](/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 [``](/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. diff --git a/files/en-us/web/css/reference/at-rules/@page/index.md b/files/en-us/web/css/reference/at-rules/@page/index.md index 10468ac1d0e102e..e725bc21d1b963b 100644 --- a/files/en-us/web/css/reference/at-rules/@page/index.md +++ b/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) diff --git a/files/en-us/web/css/reference/at-rules/@property/index.md b/files/en-us/web/css/reference/at-rules/@property/index.md index 6ca12b438c5ac30..254343f79bb5a21 100644 --- a/files/en-us/web/css/reference/at-rules/@property/index.md +++ b/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 [``](/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("<dashed-ident>")}} 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 [``](/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("<color>")}} 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 [``](/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("<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. ```html
From 65c6e2768bef3998e4704a8f0aa7b88443367619 Mon Sep 17 00:00:00 2001 From: estelle Date: Mon, 17 Nov 2025 04:12:04 +0900 Subject: [PATCH 2/2] At-rule pages: change css links to macros --- files/en-us/web/css/reference/at-rules/@import/index.md | 4 ++-- .../css/reference/at-rules/@import/layer_function/index.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/css/reference/at-rules/@import/index.md b/files/en-us/web/css/reference/at-rules/@import/index.md index 61a782431d8f2f0..0502a547c2794ab 100644 --- a/files/en-us/web/css/reference/at-rules/@import/index.md +++ b/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. @@ -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 diff --git a/files/en-us/web/css/reference/at-rules/@import/layer_function/index.md b/files/en-us/web/css/reference/at-rules/@import/layer_function/index.md index a219ba3cb0ca3da..8ccde1d8bb30d1d 100644 --- a/files/en-us/web/css/reference/at-rules/@import/layer_function/index.md +++ b/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 {{cssxref("@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