chore(cssxref): Replace links with `cssxref` macro in `web/api` #42434

dipikabh · 2025-12-16T19:59:28Z

Description

This PR replaces CSS links in files/en-us/web/api with the cssxref macro.

Please check "Additional details" and "Motivation" in #42346 for more context.

Related issues and pull requests

Search: \[`([^`]+?)`\]$/en-US/docs/Web/CSS/Reference/Properties/\1$ Replace: {{cssxref("$1")}}

Search: \[`([^`]+?)`\]$/en-US/docs/Web/CSS/Reference/Selectors/\1$ Replace: {{cssxref("$1")}}

Search: \[`([^`]+?)`\]$/en-US/docs/Web/CSS/Reference/At-rules/\1$ Replace: {{cssxref("$1")}}

Search: \[`([^/]+)`\]$/en-US/docs/Web/CSS/Reference/Values/(filter-function)/\1$ Replace: {{cssxref("$2/$1", "$1()")}}

Search: \[`([^/]+)`\]$/en-US/docs/Web/CSS/Reference/Values/(transform-function)/\1$ Replace: {{cssxref("$2/$1", "$1()")}}

Search: \[`([^/]+)`\]$/en-US/docs/Web/CSS/Reference/Values/\1$ Replace: {{cssxref("$1()")}}

Search: [`<color>`](/en-US/docs/Web/CSS/Reference/Values/color_value) Replace: {{cssxref("<color>")}}

Search: {{CSSXref(":host_function", ":host()")}} Replace: {{cssxref(":host()")}} manual update for `host-context()` macro usage

Search: for pseudo-class: \[`(:[a-z-]+(?:)?)`\]$/en-US/docs/Web/CSS/Reference/Selectors/[^)]+$ for pseudo-element: \[`(::[a-z-]+(?:)?)`\]$/en-US/docs/Web/CSS/Reference/Selectors/[^)]+$ Replace: {{cssxref("$1")}}

Search: \[`([^`]+)`\]$/en-US/docs/Web/CSS/Reference/At-rules/(@media/[^)]+)$ Replace: {{cssxref("$2")}}

Search: \[`([^`]+)`\]$/en-US/docs/Web/CSS/Reference/Values/(color_value/[^)]+)$ Replace: {{cssxref("$2", "$1()")}}

Search: \[`<([^>]+)>`\]$/en-US/docs/Web/CSS/Reference/Values/[^)]+$ Replace: {{cssxref("&1")}}

… (missing code fence in link text) Search: \[([a-z-]+)\]$/en-US/docs/Web/CSS/Reference/Values/(transform-function/[^)]+)$ Replace: {{cssxref("$2", "$1")}}

github-actions · 2025-12-16T20:01:02Z

Preview URLs (63 pages)

Flaws (10)

Note! 57 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/API/CSSFunctionDeclarations
Title: CSSFunctionDeclarations
Flaw count: 1

macros:
- Macro cssxref produces link /en-US/docs/Web/CSS/color which is a redirect

URL: /en-US/docs/Web/API/CSSFunctionDescriptors
Title: CSSFunctionDescriptors
Flaw count: 1

macros:
- Macro cssxref produces link /en-US/docs/Web/CSS/color which is a redirect

URL: /en-US/docs/Web/API/CSSFunctionRule
Title: CSSFunctionRule
Flaw count: 1

macros:
- Macro cssxref produces link /en-US/docs/Web/CSS/color which is a redirect

URL: /en-US/docs/Web/API/CSSMathValue/operator
Title: CSSMathValue: operator property
Flaw count: 1

macros:
- Macro domxref produces link /en-US/docs/Web/API/CSSMathClamp which doesn't resolve

URL: /en-US/docs/Web/API/Web_components/Using_custom_elements
Title: Using custom elements
Flaw count: 3

macros:
- Macro defaultapisidebar produces link /en-US/docs/Web/Web_Components/Using_custom_elements which is a redirect
- Macro defaultapisidebar produces link /en-US/docs/Web/Web_Components/Using_shadow_DOM which is a redirect
- Macro defaultapisidebar produces link /en-US/docs/Web/Web_Components/Using_templates_and_slots which is a redirect

URL: /en-US/docs/Web/API/Web_components/Using_shadow_DOM
Title: Using shadow DOM
Flaw count: 3

macros:
- Macro defaultapisidebar produces link /en-US/docs/Web/Web_Components/Using_custom_elements which is a redirect
- Macro defaultapisidebar produces link /en-US/docs/Web/Web_Components/Using_shadow_DOM which is a redirect
- Macro defaultapisidebar produces link /en-US/docs/Web/Web_Components/Using_templates_and_slots which is a redirect

External URLs (1)

URL: /en-US/docs/Web/API/Element/animate
Title: Element: animate() method

https://scroll-driven-animations.style/tools/view-timeline/ranges/ (1 time) (Note! This may be a new URL 👀)

bsmth · 2025-12-17T14:45:55Z

files/en-us/web/api/canvasrenderingcontext2d/filter/index.md

 of the following filter functions in a string.

- [`url()`](/en-US/docs/Web/CSS/Reference/Values/url_function)
+- {{cssxref("url_function", "url()")}}


Note the next line specifies that it expects a URL, which I guess is <url> not url().

Yes, this had tripped me up as well and I checked Blame which suggested its been url() in both places: 592bea2

bsmth · 2025-12-17T14:49:36Z

files/en-us/web/api/svgtextcontentelement/getsubstringlength/index.md

 The `getSubStringLength()` method of the {{domxref("SVGTextContentElement")}} interface represents the computed length of the formatted text advance distance for a substring of text within the element.

-Note that this method only accounts for the widths of the glyphs in the substring and any extra spacing inserted by the CSS [`letter-spacing`](/en-US/docs/Web/CSS/Reference/Properties/letter-spacing) and [`word-spacing`](/en-US/docs/Web/CSS/Reference/Properties/word-spacing) properties. Visual spacing adjustments made by the [`x`](/en-US/docs/Web/CSS/Reference/Properties/x) attribute are ignored.
+Note that this method only accounts for the widths of the glyphs in the substring and any extra spacing inserted by the CSS {{cssxref("letter-spacing")}} and {{cssxref("word-spacing")}} properties. Visual spacing adjustments made by the {{cssxref("x")}} attribute are ignored.


I think x is referring to Web/SVG/Reference/Attribute/x

The original addition has a link to /en-US/docs/Web/CSS/x. See #37378.

bsmth

Two comments, but otherwise LGTM, thanks 👍🏻

dipikabh · 2025-12-17T16:00:46Z

Thanks a lot for the review!
Both your comments are plausible, and perhaps we can take them up outside this PR.

dipikabh added 18 commits December 16, 2025 13:20

Replace CSS property links with cssxref in /web/api

0d1e095

Search: \[`([^`]+?)`\]$/en-US/docs/Web/CSS/Reference/Properties/\1$ Replace: {{cssxref("$1")}}

Replace CSS selector links with cssxref in /web/api

b2fe784

Search: \[`([^`]+?)`\]$/en-US/docs/Web/CSS/Reference/Selectors/\1$ Replace: {{cssxref("$1")}}

Replace CSS at-rule links with cssxref in /web/api

177e1e0

Search: \[`([^`]+?)`\]$/en-US/docs/Web/CSS/Reference/At-rules/\1$ Replace: {{cssxref("$1")}}

Replace CSS Values/filter-function links with cssxref in /web/api

8e988bc

Search: \[`([^/]+)`\]$/en-US/docs/Web/CSS/Reference/Values/(filter-function)/\1$ Replace: {{cssxref("$2/$1", "$1()")}}

Replace CSS Values/transform-function links with cssxref in /web/api

3102469

Search: \[`([^/]+)`\]$/en-US/docs/Web/CSS/Reference/Values/(transform-function)/\1$ Replace: {{cssxref("$2/$1", "$1()")}}

Replace CSS function links with cssxref in /web/api

83a17e0

Search: \[`([^/]+)`\]$/en-US/docs/Web/CSS/Reference/Values/\1$ Replace: {{cssxref("$1()")}}

Replace CSS color data type links with cssxref in /web/api

0698a77

Search: [`<color>`](/en-US/docs/Web/CSS/Reference/Values/color_value) Replace: {{cssxref("<color>")}}

Replace CSS host function links with cssxref in /web/api

8a994f5

Search: {{CSSXref(":host_function", ":host()")}} Replace: {{cssxref(":host()")}} manual update for `host-context()` macro usage

update url_value macro calls

703a712

Replace CSS selector links with cssxref in /web/api

8f2999b

Search: for pseudo-class: \[`(:[a-z-]+(?:)?)`\]$/en-US/docs/Web/CSS/Reference/Selectors/[^)]+$ for pseudo-element: \[`(::[a-z-]+(?:)?)`\]$/en-US/docs/Web/CSS/Reference/Selectors/[^)]+$ Replace: {{cssxref("$1")}}

Replace CSS media at-rule features with cssxref macro in /web/api

bf98157

Search: \[`([^`]+)`\]$/en-US/docs/Web/CSS/Reference/At-rules/(@media/[^)]+)$ Replace: {{cssxref("$2")}}

manual CSS media at-rule link replacements

feba016

manual replacement of an at-rule link with cssxref

c6b3e7a

Replace CSS color_value functions with cssxref in web/api

8c81b9e

Search: \[`([^`]+)`\]$/en-US/docs/Web/CSS/Reference/Values/(color_value/[^)]+)$ Replace: {{cssxref("$2", "$1()")}}

replace url_function links with macro)

00354c7

replace gradient function link with macro

65049c9

Replace CSS values with cssxref in web/api

e25f365

Search: \[`<([^>]+)>`\]$/en-US/docs/Web/CSS/Reference/Values/[^)]+$ Replace: {{cssxref("&1")}}

Replace CSS Values/transform-function/ links with cssxref in /web/api…

2e6a4c4

… (missing code fence in link text) Search: \[([a-z-]+)\]$/en-US/docs/Web/CSS/Reference/Values/(transform-function/[^)]+)$ Replace: {{cssxref("$2", "$1")}}

dipikabh requested a review from a team as a code owner December 16, 2025 19:59

dipikabh requested review from hamishwillee and removed request for a team December 16, 2025 19:59

github-actions bot added Content:WebAPI Web API docs size/m [PR only] 51-500 LoC changed labels Dec 16, 2025

bsmth reviewed Dec 17, 2025

View reviewed changes

bsmth approved these changes Dec 17, 2025

View reviewed changes

dipikabh merged commit 0c13af5 into mdn:main Dec 17, 2025
7 checks passed

dipikabh deleted the cssxref-api branch December 17, 2025 16:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore(cssxref): Replace links with `cssxref` macro in `web/api` #42434

chore(cssxref): Replace links with `cssxref` macro in `web/api` #42434

Uh oh!

dipikabh commented Dec 16, 2025

Uh oh!

github-actions bot commented Dec 16, 2025

Uh oh!

bsmth Dec 17, 2025

Uh oh!

dipikabh Dec 17, 2025

Uh oh!

bsmth Dec 17, 2025

Uh oh!

dipikabh Dec 17, 2025

Uh oh!

bsmth left a comment

Uh oh!

dipikabh commented Dec 17, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

chore(cssxref): Replace links with cssxref macro in web/api #42434

chore(cssxref): Replace links with cssxref macro in web/api #42434

Uh oh!

Conversation

dipikabh commented Dec 16, 2025

Description

Related issues and pull requests

Uh oh!

github-actions bot commented Dec 16, 2025

Uh oh!

bsmth Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

dipikabh Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

bsmth Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

dipikabh Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

bsmth left a comment

Choose a reason for hiding this comment

Uh oh!

dipikabh commented Dec 17, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

chore(cssxref): Replace links with `cssxref` macro in `web/api` #42434

chore(cssxref): Replace links with `cssxref` macro in `web/api` #42434