From 3f4f184edc1211cb2d3e6b52a7c85fe7a29404d5 Mon Sep 17 00:00:00 2001 From: Trevor McCauley <3536716+senocular@users.noreply.github.com> Date: Sat, 11 Jan 2025 12:19:10 -0500 Subject: [PATCH 001/102] Remove reference to prototype inheritance for public fields. (#37605) * Update index.md Remove reference to prototype inheritance for public fields * Update files/en-us/web/javascript/reference/classes/public_class_fields/index.md Co-authored-by: Joshua Chen --------- Co-authored-by: Joshua Chen --- .../javascript/reference/classes/public_class_fields/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/javascript/reference/classes/public_class_fields/index.md b/files/en-us/web/javascript/reference/classes/public_class_fields/index.md index eabe0329c8e2d70..8eb69d9599f550f 100644 --- a/files/en-us/web/javascript/reference/classes/public_class_fields/index.md +++ b/files/en-us/web/javascript/reference/classes/public_class_fields/index.md @@ -7,7 +7,7 @@ browser-compat: javascript.classes.public_class_fields {{jsSidebar("Classes")}} -**Public fields** are writable, enumerable, and configurable properties. As such, unlike their private counterparts, they participate in prototype inheritance. +**Public fields** are writable, enumerable, and configurable properties defined on each class instance or class constructor. ## Syntax From 99a44005f9d90b831526e9d0ffd7803cdafa4a72 Mon Sep 17 00:00:00 2001 From: Kevin Gibbons Date: Sat, 11 Jan 2025 12:52:14 -0800 Subject: [PATCH 002/102] Remove obsolete guidance for browsers not supporting strict mode (#37608) --- files/en-us/web/javascript/reference/strict_mode/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/javascript/reference/strict_mode/index.md b/files/en-us/web/javascript/reference/strict_mode/index.md index 3e0899e701e14f1..1a6d3470a228761 100644 --- a/files/en-us/web/javascript/reference/strict_mode/index.md +++ b/files/en-us/web/javascript/reference/strict_mode/index.md @@ -10,7 +10,7 @@ spec-urls: https://tc39.es/ecma262/multipage/strict-mode-of-ecmascript.html > [!NOTE] > Sometimes you'll see the default, non-strict mode referred to as _[sloppy mode](/en-US/docs/Glossary/Sloppy_mode)_. This isn't an official term, but be aware of it, just in case. -JavaScript's strict mode is a way to _opt in_ to a restricted variant of JavaScript, thereby implicitly opting-out of "[sloppy mode](/en-US/docs/Glossary/Sloppy_mode)". Strict mode isn't just a subset: it _intentionally_ has different semantics from normal code. Browsers not supporting strict mode will run strict mode code with different behavior from browsers that do, so don't rely on strict mode without feature-testing for support for the relevant aspects of strict mode. Strict mode code and non-strict mode code can coexist, so scripts can opt into strict mode incrementally. +JavaScript's strict mode is a way to _opt in_ to a restricted variant of JavaScript, thereby implicitly opting-out of "[sloppy mode](/en-US/docs/Glossary/Sloppy_mode)". Strict mode isn't just a subset: it _intentionally_ has different semantics from normal code. Strict mode code and non-strict mode code can coexist, so scripts can opt into strict mode incrementally. Strict mode makes several changes to normal JavaScript semantics: From 8f4599ce0c63ac1c260933b1458e4da33ce972d5 Mon Sep 17 00:00:00 2001 From: "j. redhead" Date: Sat, 11 Jan 2025 20:08:54 -0600 Subject: [PATCH 003/102] Correct info about AbortSignal usage in addEventListener (#37607) Correct info about AbortSignals in addEventListener --- files/en-us/web/api/eventtarget/addeventlistener/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/eventtarget/addeventlistener/index.md b/files/en-us/web/api/eventtarget/addeventlistener/index.md index 4191c374ecb1e91..f1342dc124838aa 100644 --- a/files/en-us/web/api/eventtarget/addeventlistener/index.md +++ b/files/en-us/web/api/eventtarget/addeventlistener/index.md @@ -79,7 +79,7 @@ addEventListener(type, listener, useCapture) If this option is not specified it defaults to `false` – except that in browsers other than Safari, it defaults to `true` for {{domxref("Element/wheel_event", "wheel")}}, {{domxref("Element/mousewheel_event", "mousewheel")}}, {{domxref("Element/touchstart_event", "touchstart")}} and {{domxref("Element/touchmove_event", "touchmove")}} events. See [Using passive listeners](#using_passive_listeners) to learn more. - `signal` {{optional_inline}} - - : An {{domxref("AbortSignal")}}. The listener will be removed when the given `AbortSignal` object's {{domxref("AbortController/abort()", "abort()")}} method is called. If not specified, no `AbortSignal` is associated with the listener. + - : An {{domxref("AbortSignal")}}. The listener will be removed when the {{domxref("AbortController/abort()", "abort()")}} method of the {{domxref("AbortController")}} which owns the `AbortSignal` is called. If not specified, no `AbortSignal` is associated with the listener. - `useCapture` {{optional_inline}} From c2f0a9805bc7cdc12b8565a20050db16cad215e2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 12 Jan 2025 15:35:59 +0900 Subject: [PATCH 004/102] fix a typo (#37612) --- files/en-us/web/security/mixed_content/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/security/mixed_content/index.md b/files/en-us/web/security/mixed_content/index.md index 91df10aa7eafac4..cea6781e0666ed5 100644 --- a/files/en-us/web/security/mixed_content/index.md +++ b/files/en-us/web/security/mixed_content/index.md @@ -129,7 +129,7 @@ The screenshot below shows the console warning when an image is upgraded on Fire ![Screen shot of the web console displaying upgrade warning for mixed content image.](mixed_content_console_upgradable.png) On browser versions that still display "optionally blockable" content, an icon is used to indicate that there is mixed content in the displayed content, along with a console warning. -The screenshot below shows the icon and console warning for Firebox starting supporting upgradable mixed-content. +The screenshot below shows the icon and console warning for Firefox starting supporting upgradable mixed-content. ![Screen shot of the web console displaying display warning for mixed content image.](mixed_content_console_displayed.png) From 5737bdacb64e73b4c020387d8dd82f312192c946 Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Sun, 12 Jan 2025 14:37:34 +0800 Subject: [PATCH 005/102] Update syntax list and add inline deprecated status badge for `writing-mode` (#37606) Update synatx list and add inline status badge for `writing-mode` --- files/en-us/web/css/writing-mode/index.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/css/writing-mode/index.md b/files/en-us/web/css/writing-mode/index.md index 163427922e34acd..3be95ef82d0fdca 100644 --- a/files/en-us/web/css/writing-mode/index.md +++ b/files/en-us/web/css/writing-mode/index.md @@ -20,6 +20,8 @@ This property specifies the _block flow direction_, which is the direction in wh writing-mode: horizontal-tb; writing-mode: vertical-rl; writing-mode: vertical-lr; +writing-mode: sideways-rl; +writing-mode: sideways-lr; /* Global values */ writing-mode: inherit; @@ -43,17 +45,17 @@ The `writing-mode` property is specified as one of the values listed below. The - : For `ltr` scripts, content flows vertically from top to bottom. For `rtl` scripts, content flows vertically from bottom to top. All the glyphs, even those in vertical scripts, are set sideways toward the right. - `sideways-lr` - : For `ltr` scripts, content flows vertically from bottom to top. For `rtl` scripts, content flows vertically from top to bottom. All the glyphs, even those in vertical scripts, are set sideways toward the left. -- `lr` +- `lr` {{Deprecated_Inline}} - : Deprecated except for SVG1 documents. For CSS, use `horizontal-tb` instead. -- `lr-tb` +- `lr-tb` {{Deprecated_Inline}} - : Deprecated except for SVG1 documents. For CSS, use `horizontal-tb` instead. -- `rl` +- `rl` {{Deprecated_Inline}} - : Deprecated except for SVG1 documents. For CSS, use `horizontal-tb` instead. -- `tb` +- `tb` {{Deprecated_Inline}} - : Deprecated except for SVG1 documents. For CSS, use `vertical-lr` instead. -- `tb-lr` +- `tb-lr` {{Deprecated_Inline}} - : Deprecated except for SVG1 documents. For CSS, use `vertical-lr` instead. -- `tb-rl` +- `tb-rl` {{Deprecated_Inline}} - : Deprecated except for SVG1 documents. For CSS, use `vertical-rl` instead. ## Formal definition From 0838df3b24b7d81c15c97bdd8d99d7d42c31c518 Mon Sep 17 00:00:00 2001 From: Eiernase <100249661+Eiernase@users.noreply.github.com> Date: Sun, 12 Jan 2025 11:52:10 +0100 Subject: [PATCH 006/102] Update index.md (#37616) --- files/en-us/mozilla/firefox/releases/130/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/mozilla/firefox/releases/130/index.md b/files/en-us/mozilla/firefox/releases/130/index.md index e14e9dedb38a8b5..ea0b860d2be5395 100644 --- a/files/en-us/mozilla/firefox/releases/130/index.md +++ b/files/en-us/mozilla/firefox/releases/130/index.md @@ -13,7 +13,7 @@ This article provides information about the changes in Firefox 130 that affect d ### HTML - The [`name`](/en-US/docs/Web/HTML/Element/details#name) attribute of the `
` element now allows the grouping of `
` elements, where only one element within a group can be open at a time. This allows you to create an exclusive accordion without using JavaScript ([Firefox bug 1856460](https://bugzil.la/1856460) and [Firefox bug 1909613](https://bugzil.la/1909613)). -- The [`dir`](/en-US/docs/Web/HTML/Global_attributes/dir) and [`lang`](/en-US/docs/Web/HTML/Global_attributes/lang) [global attributes](/en-US/docs/Web/HTML/Global_attributes) now have improved inheritance, including how they work with [shadow DOM](/en-US/docs/Web/API/Web_components/Using_shadow_DOM#attribute_inheritance) ([Firefox bug 1876163](https://bugzil.la/1876163). +- The [`dir`](/en-US/docs/Web/HTML/Global_attributes/dir) and [`lang`](/en-US/docs/Web/HTML/Global_attributes/lang) [global attributes](/en-US/docs/Web/HTML/Global_attributes) now have improved inheritance, including how they work with [shadow DOM](/en-US/docs/Web/API/Web_components/Using_shadow_DOM#attribute_inheritance) ([Firefox bug 1876163](https://bugzil.la/1876163)). ### CSS From 9bc368288095cf57e071e4ec64162d4115aa3e1a Mon Sep 17 00:00:00 2001 From: Kingsley uche Date: Sun, 12 Jan 2025 17:56:13 +0100 Subject: [PATCH 007/102] Fix typo (#37620) Update index.md Fix wrong generator function call. calling "g4" instead of "g3" --- .../web/javascript/reference/operators/yield_star_/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/javascript/reference/operators/yield_star_/index.md b/files/en-us/web/javascript/reference/operators/yield_star_/index.md index af632fe1b77846a..7b934f3eb5771b6 100644 --- a/files/en-us/web/javascript/reference/operators/yield_star_/index.md +++ b/files/en-us/web/javascript/reference/operators/yield_star_/index.md @@ -132,7 +132,7 @@ async function* g3() { yield* g2(); } -const gen = g4(); +const gen = g3(); console.log(await gen.next()); // {value: "foo", done: false} console.log(await gen.next()); // {value: "bar", done: false} From 0a5ad3b05dcb0b45b774417c0f86bc8ead26575e Mon Sep 17 00:00:00 2001 From: Aditya Gupta <53346087+xcyberpunkx0@users.noreply.github.com> Date: Sun, 12 Jan 2025 22:40:30 +0530 Subject: [PATCH 008/102] Fix typo (#37621) Fixed this issue. Missing space in log message #37603 https://github.com/mdn/content/issues/37603 --- files/en-us/web/api/console/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/console/index.md b/files/en-us/web/api/console/index.md index e5c309975b96e3f..6b8343068a852eb 100644 --- a/files/en-us/web/api/console/index.md +++ b/files/en-us/web/api/console/index.md @@ -127,7 +127,7 @@ console.info("My first car was a", car, ". The object is:", someObject); The output will look like this: ```plain -My first car was a Dodge Charger. The object is: {str:"Some text", id:5} +My first car was a Dodge Charger . The object is: {str:"Some text", id:5} ``` #### Using string substitutions From 9156c03a71d64ed2fdba4e94d651e4c745660f24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ryan=20O=E2=80=99Hara?= Date: Sun, 12 Jan 2025 14:39:16 -0800 Subject: [PATCH 009/102] Fix spelling (#37600) --- .../add-ons/webextensions/api/declarativenetrequest/index.md | 4 ++-- .../api/declarativenetrequest/modifyheaderinfo/index.md | 2 +- .../webextensions/api/declarativenetrequest/rule/index.md | 2 +- .../api/declarativenetrequest/ruleaction/index.md | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/index.md b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/index.md index 9139b6745bc6055..2531e47ebd64c1e 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/index.md @@ -24,7 +24,7 @@ The `"declarativeNetRequestFeedback"` permission is required to use {{WebExtAPIR The declarative rules are defined by four fields: - `id` – An ID that uniquely identifies a rule within a ruleset. Mandatory and should be >= 1. -- `priority` – The rule priority. When specified, it should be >= 1. Defaults to 1. See [Matching precedents](#matching_precedents) for details on how priority affects which rules are applied. +- `priority` – The rule priority. When specified, it should be >= 1. Defaults to 1. See [Matching precedence](#matching_precedence) for details on how priority affects which rules are applied. - `condition` – The {{WebExtAPIRef("declarativeNetRequest.RuleCondition","condition")}} under which this rule is triggered. - `action` – The {{WebExtAPIRef("declarativeNetRequest.RuleAction","action")}} to take when the rule is matched. Rules can do one of these things: - block a network request. @@ -115,7 +115,7 @@ The number of dynamic and session-scoped rules an extension can add is limited t - In Safari and up to Chrome 119 and Firefox 127, the value of {{WebExtAPIRef("declarativeNetRequest.MAX_NUMBER_OF_DYNAMIC_AND_SESSION_RULES","MAX_NUMBER_OF_DYNAMIC_AND_SESSION_RULES")}}. - From Chrome 120 and Firefox 128, the values of {{WebExtAPIRef("declarativeNetRequest.MAX_NUMBER_OF_DYNAMIC_RULES","MAX_NUMBER_OF_DYNAMIC_RULES")}} and {{WebExtAPIRef("declarativeNetRequest.MAX_NUMBER_OF_SESSION_RULES","MAX_NUMBER_OF_SESSION_RULES")}} -## Matching precedents +## Matching precedence When the browser evaluates how to handle requests, it checks each extension's rules that have a condition that matches the request and chooses the one to consider applying as follows: diff --git a/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/modifyheaderinfo/index.md b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/modifyheaderinfo/index.md index 628a353b9679426..4d3993facdd1fcc 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/modifyheaderinfo/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/modifyheaderinfo/index.md @@ -13,7 +13,7 @@ The request or response header to modify for a request, declared in the `rule.ac Each object describes one header modification. To modify multiple headers, multiple objects can be specified in these arrays, or across multiple rules. -Matching `modifyHeaders` rules are applied in the order described at [Matching precedents](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#matching_precedents). +Matching `modifyHeaders` rules are applied in the order described at [Matching precedence](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#matching_precedence). Within each extension, all `modifyHeaders` rules with a priority lower than or equal to matching `allow` or `allowAllRequests` rules are ignored. If multiple `modifyHeaders` rules specify the same header, the resulting modification for the header is determined based on the priority of each rule and the operations specified: diff --git a/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/rule/index.md b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/rule/index.md index 98e1029faaa30f4..7beec4ee35f2398 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/rule/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/rule/index.md @@ -22,7 +22,7 @@ Values of this type are objects. They contain these properties: - `id` - : `number`. An ID that uniquely identifies a rule within a ruleset. Mandatory and should be >= 1. - `priority` {{optional_inline}} - - : `number`. Rule priority. Defaults to 1. When specified, should be >= 1. See [Matching precedents](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#matching_precedents) for details on how priority affects which rules are applied. + - : `number`. Rule priority. Defaults to 1. When specified, should be >= 1. See [Matching precedence](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#matching_precedence) for details on how priority affects which rules are applied. {{WebExtExamples("h2")}} diff --git a/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/ruleaction/index.md b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/ruleaction/index.md index 97fc5cee5e3f785..2153f0c8b730dfb 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/ruleaction/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/declarativenetrequest/ruleaction/index.md @@ -20,7 +20,7 @@ Values of this type are objects. They contain these properties: - `responseHeaders` {{optional_inline}} - : {{WebExtAPIRef("declarativeNetRequest.ModifyHeaderInfo")}}. The response headers to modify for the request. Only valid if `type` is `"modifyHeaders"`. - `type` - - : A `string`. The type of action to perform. Possible values are `"block"`, `"redirect"`, `"allow"`, `"upgradeScheme"`, `"modifyHeaders"`, and `"allowAllRequests"`. The use of the `"redirect"` and `"modifyHeaders"` actions require [host permissions](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#host_permissions) for the request and request initiator. The "block" and "upgradeScheme" actions also require host permissions unless the "declarativeNetRequest" permission is specified. Without these permissions, matching rules are ignored. See [Permissions at declarativeNetRequest](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#permissions) for more information. More details about the effects of rule actions are provided in [Matching precedents](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#matching_precedents). + - : A `string`. The type of action to perform. Possible values are `"block"`, `"redirect"`, `"allow"`, `"upgradeScheme"`, `"modifyHeaders"`, and `"allowAllRequests"`. The use of the `"redirect"` and `"modifyHeaders"` actions require [host permissions](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#host_permissions) for the request and request initiator. The "block" and "upgradeScheme" actions also require host permissions unless the "declarativeNetRequest" permission is specified. Without these permissions, matching rules are ignored. See [Permissions at declarativeNetRequest](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#permissions) for more information. More details about the effects of rule actions are provided in [Matching precedence](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest#matching_precedence). {{WebExtExamples("h2")}} From a53253307ade5c6e3eec896a5f2d799fdebe9ae8 Mon Sep 17 00:00:00 2001 From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com> Date: Mon, 13 Jan 2025 10:42:16 +0530 Subject: [PATCH 010/102] fix typos (#37627) * fix typos * Fix --------- Co-authored-by: Joshua Chen --- .vscode/dictionaries/ignore-list.txt | 5 +++++ .vscode/dictionaries/proper-names.txt | 2 ++ .vscode/dictionaries/terms-abbreviations.txt | 1 + .../environment_setup/browsing_the_web/index.md | 8 ++++---- .../environment_setup/code_editors/index.md | 6 +++--- .../environment_setup/installing_software/index.md | 4 ++-- files/en-us/web/api/svgangle/unittype/index.md | 2 +- 7 files changed, 18 insertions(+), 10 deletions(-) diff --git a/.vscode/dictionaries/ignore-list.txt b/.vscode/dictionaries/ignore-list.txt index 0e2e7108138242a..47a0e4a9f06959e 100644 --- a/.vscode/dictionaries/ignore-list.txt +++ b/.vscode/dictionaries/ignore-list.txt @@ -112,9 +112,11 @@ dubby Duden dXNlcm5hbWU6cGFzc3dvcmQ EACC +efregre eirmod elitr ERHGDFy +ertgrth esset essum Ethere @@ -173,6 +175,7 @@ isnt isoff javascripts jdoe +Jgfbgfdgt jngl jnglstore js13kgames @@ -253,6 +256,7 @@ rebum regelialia rheeeeet ricebean +rtgtfghhyj s3pPLMBiTxaQ9kYGzzhZRbK sadipscing sagnarelli @@ -306,6 +310,7 @@ webglsamples webvr weta Whereami +Whereshire wisen wisi Wookie diff --git a/.vscode/dictionaries/proper-names.txt b/.vscode/dictionaries/proper-names.txt index 6afc1f106a836b9..d0b3dd14a522ba2 100644 --- a/.vscode/dictionaries/proper-names.txt +++ b/.vscode/dictionaries/proper-names.txt @@ -76,6 +76,7 @@ Béziers caitmuenster Camino Camtasia +Canva Carakan Cardano carinaanand @@ -567,6 +568,7 @@ Theora Thierry Tidwell Tink +tinypng Titilayo Tokopedia Tomayac diff --git a/.vscode/dictionaries/terms-abbreviations.txt b/.vscode/dictionaries/terms-abbreviations.txt index c1677803b15560e..4863414becb572c 100644 --- a/.vscode/dictionaries/terms-abbreviations.txt +++ b/.vscode/dictionaries/terms-abbreviations.txt @@ -714,6 +714,7 @@ sundried sunsetting supercookie superdomain +superpowered superscaling supersets SVCB diff --git a/files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/index.md b/files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/index.md index 87574b2d746f829..b5f77efc4962c13 100644 --- a/files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/index.md +++ b/files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/index.md @@ -89,7 +89,7 @@ All web pages can each be found at a unique location (web address, also called a A _website_ is a collection of linked web pages (plus their associated resources) that share a unique [domain name](/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_domain_name). Each web page of a given website provides explicit links—most of the time in the form of clickable portions of text—that allow the user to move from one page of the website to another. -When you load your favourite website in a browser, it tends to first display the website's main web page, or _homepage_ (casually referred to as "home"): +When you load your favorite website in a browser, it tends to first display the website's main web page, or _homepage_ (casually referred to as "home"): ![Example of a website domain name in the browser address bar](web-site.jpg) @@ -97,7 +97,7 @@ When you load your favourite website in a browser, it tends to first display the > > **Try it out** > -> Try clicking some menu items or links to look at some different pages on your favourite website. +> Try clicking some menu items or links to look at some different pages on your favorite website. > [!NOTE] > It is also possible to have a [_single-page app_](/en-US/docs/Glossary/SPA): a website that consists of a single web page that is dynamically updated with new content when needed. @@ -146,11 +146,11 @@ When you access the web, quite a lot happens between your first interaction (for This description of how the web works is heavily simplified, but it is all you really need to know at this point. You will find a more detailed account of how web pages and requested and rendered by a web browser in our [Web standards](/en-US/docs/Learn_web_development/Getting_started/Web_standards) module, slightly later on. -For now, try opening a web browser and loading up a couple of your favourite sites, thinking about the above steps as you do so. +For now, try opening a web browser and loading up a couple of your favorite sites, thinking about the above steps as you do so. ## Searching for information -As a web developer, you will spend a lot of time searching for information, from syntax you can't remember to solutions to specific problems. It is therefore a good idea to learn how to effecively search the web. +As a web developer, you will spend a lot of time searching for information, from syntax you can't remember to solutions to specific problems. It is therefore a good idea to learn how to effectively search the web. If you are looking for general information about a specific web technology feature, you should type the name of the feature into the MDN search box. For example, try typing `box model`, `fetch()` or `video element` into the the search box and see what comes up. If you don't find the information you need, try expanding your search — try your search term in a search engine. diff --git a/files/en-us/learn_web_development/getting_started/environment_setup/code_editors/index.md b/files/en-us/learn_web_development/getting_started/environment_setup/code_editors/index.md index 800fc639d7a0b48..5996e7a997b65a2 100644 --- a/files/en-us/learn_web_development/getting_started/environment_setup/code_editors/index.md +++ b/files/en-us/learn_web_development/getting_started/environment_setup/code_editors/index.md @@ -35,7 +35,7 @@ Previously, we told you to install a code editor, as you'll need one to work thr Before starting to code, you may have had some experience working on text documents in a program like Microsoft Word. You might also be wondering whether you can work with code in these same programs. Unfortunately, the answer is "not really": -- Programs like Micosoft Word are **Binary file** editors; their files contain a non-text format that can only be understood by those programs. Website source code, on the other hand, is stored as plain text. +- Programs like Microsoft Word are **Binary file** editors; their files contain a non-text format that can only be understood by those programs. Website source code, on the other hand, is stored as plain text. - Word _can_ open and edit plain text files, but it doesn't handle them very well. It doesn't have a featureset designed for working with code — it is for writing documents such as letters and reports. You need a program that is designed to cleanly handle and output plain text, and work with code. You probably already have a plain text editor on your computer. By default, Windows includes [Notepad](https://en.wikipedia.org/wiki/Microsoft_Notepad) and macOS comes with [TextEdit](https://en.wikipedia.org/wiki/TextEdit). Linux distros vary; the Ubuntu 22.04 LTS release comes with [GNOME Text Editor](https://en.wikipedia.org/wiki/GNOME_Text_Editor) by default. Default OS plain text editors can be OK, but they also have a limited feature set. @@ -87,8 +87,8 @@ Let's try an exercise in VS Code: VS Code provides other syntax features too. For example: -- You'll see a thin vertical line travelling down from the `function` keyword to the closing curly brace (`}`) — these lines are used to mark different [indentation](https://en.wikipedia.org/wiki/Indentation_style) levels in code, making it easier to identify where blocks begin and end. -- Also try moving the flashing text cursor over the opening or closing curly brace (`{` or `}`) — you'll see both of them highlighted. This also helps identify the start and end of blocks, and is useful when are trying to find where you are missing a character when you have a more complicated structure with lots of nested blocks. This highlighting also works with other delimeters such as parentheses (`(` and `)`) and square brackets (`[` and `]`). +- You'll see a thin vertical line traveling down from the `function` keyword to the closing curly brace (`}`) — these lines are used to mark different [indentation](https://en.wikipedia.org/wiki/Indentation_style) levels in code, making it easier to identify where blocks begin and end. +- Also try moving the flashing text cursor over the opening or closing curly brace (`{` or `}`) — you'll see both of them highlighted. This also helps identify the start and end of blocks, and is useful when are trying to find where you are missing a character when you have a more complicated structure with lots of nested blocks. This highlighting also works with other delimiters such as parentheses (`(` and `)`) and square brackets (`[` and `]`). ### Code completion/suggestion diff --git a/files/en-us/learn_web_development/getting_started/environment_setup/installing_software/index.md b/files/en-us/learn_web_development/getting_started/environment_setup/installing_software/index.md index b0bd5f27e6779ab..33a4082ad8c4510 100644 --- a/files/en-us/learn_web_development/getting_started/environment_setup/installing_software/index.md +++ b/files/en-us/learn_web_development/getting_started/environment_setup/installing_software/index.md @@ -42,7 +42,7 @@ For now, we would recommend that you install [Visual Studio Code](https://code.v Having modern web browsers available to you is essential for web development so that you can test your websites or apps on the browsers your visitors use to access them. You also need to keep your web browsers up-to-date so that they support the latest web technologies and have the latest security fixes applied. > [!NOTE] -> Most browswers tend to install updates automatically, applying the changes when they are restarted. You can usually check for updates on the browser "About" page, for example available in the menu at _Firefox_ > _About Firefox_ or _Chrome_ > _About Google Chrome_ on Firefox/Chrome for macOS, or the menu icon > _Help_ > _About Firefox_ or menu icon > _Help_ > _About Google Chrome_ on Firefox/Chrome for Windows. +> Most browsers tend to install updates automatically, applying the changes when they are restarted. You can usually check for updates on the browser "About" page, for example available in the menu at _Firefox_ > _About Firefox_ or _Chrome_ > _About Google Chrome_ on Firefox/Chrome for macOS, or the menu icon > _Help_ > _About Firefox_ or menu icon > _Help_ > _About Google Chrome_ on Firefox/Chrome for Windows. For now, you should install a couple of desktop and mobile/alternative device browsers to test your code in. You'll most commonly come across web browsers on desktop, laptop, and mobile devices, but you will also come across web browsers on other devices such as tablets, watches, and TVs. If possible, make sure you have one browser from each line installed and available to test on (so you don't just test in multiple browsers based on the same rendering engine): @@ -71,7 +71,7 @@ One of the easiest options we've found to make a local server available is to us 4. Press the _Install_ button to install the extension. 5. Now, when you are working on an HTML file in the editor, you should be able to click the "Show Preview" button to open the live example up in a separate tab. -The above option is simple, but not that flexible. In future, you may want to made a more flexible local server option available that can be used to load examples in any browser you have available. For other options (and more background information around why local servers are neccessary), see [How do you set up a local testing server?](/en-US/docs/Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server). +The above option is simple, but not that flexible. In future, you may want to made a more flexible local server option available that can be used to load examples in any browser you have available. For other options (and more background information around why local servers are necessary), see [How do you set up a local testing server?](/en-US/docs/Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server). ## Graphics editors diff --git a/files/en-us/web/api/svgangle/unittype/index.md b/files/en-us/web/api/svgangle/unittype/index.md index d14ba2fe4e21600..358056fc4209cbc 100644 --- a/files/en-us/web/api/svgangle/unittype/index.md +++ b/files/en-us/web/api/svgangle/unittype/index.md @@ -8,7 +8,7 @@ browser-compat: api.SVGAngle.unitType {{APIRef("SVG")}} -The **`unitType`** property of the {{domxref("SVGAngle")}} interface is one of the [unit type contants](/en-US/docs/Web/API/SVGAngle#constants) and represents the units in which this angle's value is expressed. +The **`unitType`** property of the {{domxref("SVGAngle")}} interface is one of the [unit type constants](/en-US/docs/Web/API/SVGAngle#constants) and represents the units in which this angle's value is expressed. ## Value From bd74b053c1e3e395db091669476f0c04189a95c6 Mon Sep 17 00:00:00 2001 From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com> Date: Mon, 13 Jan 2025 10:51:39 +0530 Subject: [PATCH 011/102] Synchronize with BCD v5.6.29 (#37599) * Synchronize with BCD v5.6.29 * fix another --------- Co-authored-by: OnkarRuikar Co-authored-by: Joshua Chen --- files/en-us/web/manifest/index.md | 2 +- files/en-us/web/manifest/note_taking/index.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/manifest/index.md b/files/en-us/web/manifest/index.md index 7148fa0bbc2cce5..b70839ecf8d827b 100644 --- a/files/en-us/web/manifest/index.md +++ b/files/en-us/web/manifest/index.md @@ -22,7 +22,7 @@ All members are optional in the specification, but some applications require som {{ListSubpages("/en-US/docs/Web/Manifest")}} > [!NOTE] -> The `dir`, `lang`, `iarc_rating_id`, and `note_taking` members are not implemented. +> The `dir`, `lang`, and `iarc_rating_id` members are not implemented. ## Example manifest diff --git a/files/en-us/web/manifest/note_taking/index.md b/files/en-us/web/manifest/note_taking/index.md index d756bbb6dc0438a..46da812861458f6 100644 --- a/files/en-us/web/manifest/note_taking/index.md +++ b/files/en-us/web/manifest/note_taking/index.md @@ -15,7 +15,7 @@ The `note_taking` member identifies a web app as a note-taking app and defines r An object, which may contain the following values: -- `new_note_url` +- `new_note_url` {{experimental_inline}} - : A string representing the URL the developer would prefer the user agent to load when the user wants to take a new note via the web app. This value is a hint, and different implementations may choose to ignore it or provide it as a choice in appropriate places. The `new_note_url` is parsed with the app's manifest URL as its base URL and is ignored if not within the [scope](/en-US/docs/Web/Manifest/scope) of the manifest. From 59cd8d332f9b3548862495be6069bcca4b0c7016 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Sun, 12 Jan 2025 21:22:18 -0800 Subject: [PATCH 012/102] macro fix (#37562) --- files/en-us/web/svg/attribute/alignment-baseline/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/svg/attribute/alignment-baseline/index.md b/files/en-us/web/svg/attribute/alignment-baseline/index.md index 45528d508f084b1..9a93407803090a1 100644 --- a/files/en-us/web/svg/attribute/alignment-baseline/index.md +++ b/files/en-us/web/svg/attribute/alignment-baseline/index.md @@ -48,7 +48,7 @@ You can use this attribute with the following SVG elements: - `auto` {{deprecated_inline}} - : The value is the dominant-baseline of the script to which the character belongs - i.e., use the dominant-baseline of the parent. - `baseline` - - : Uses the {{Glossary("dominant baseline")}} choice of the parent. Matches the box's corresponding {{Glossary("baseline/typography", "baseline")}} to that of its parent. + - : Uses the {{svgattr("dominant-baseline")}} choice of the parent. Matches the box's corresponding {{Glossary("baseline/typography", "baseline")}} to that of its parent. - `before-edge` {{deprecated_inline}} - : The alignment-point of the object being aligned is aligned with the "before-edge" baseline of the parent text content element. - `text-bottom` From 4c2bb5b17defb84cbeb79afe52e19043c3179fac Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Sun, 12 Jan 2025 21:23:54 -0800 Subject: [PATCH 013/102] add links to glossary (#37561) --- files/en-us/web/css/scroll-snap-align/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/scroll-snap-align/index.md b/files/en-us/web/css/scroll-snap-align/index.md index 1c414d91b4498ab..ef34a380d869635 100644 --- a/files/en-us/web/css/scroll-snap-align/index.md +++ b/files/en-us/web/css/scroll-snap-align/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.scroll-snap-align {{CSSRef}} -The `scroll-snap-align` property specifies the box's snap position as an alignment of its [snap area](/en-US/docs/Glossary/Scroll_snap#snap_area) (as the alignment subject) within its snap container's snap port (as the alignment container). +The `scroll-snap-align` property specifies the box's snap position as an alignment of its [snap area](/en-US/docs/Glossary/Scroll_snap#snap_area) (as the {{glossary("alignment subject")}}) within its snap container's snap port (as the {{glossary("alignment container")}}). {{EmbedInteractiveExample("pages/css/scroll-snap-align.html")}} From 6ca95422a33ab55e746004dd877156d18e42d5b3 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Mon, 13 Jan 2025 18:59:28 +0800 Subject: [PATCH 014/102] HTML: fix pre's incomplete description (#37540) * Update index.md * Update index.md * fix typo --------- Co-authored-by: Chris Mills --- files/en-us/web/html/element/pre/index.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/html/element/pre/index.md b/files/en-us/web/html/element/pre/index.md index b707d9c8c363a65..edf71d114a288cf 100644 --- a/files/en-us/web/html/element/pre/index.md +++ b/files/en-us/web/html/element/pre/index.md @@ -7,7 +7,9 @@ browser-compat: html.elements.pre {{HTMLSidebar}} -The **`
`** [HTML](/en-US/docs/Web/HTML) element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or [monospaced](https://en.wikipedia.org/wiki/Monospaced_font), font. Whitespace inside this element is displayed as written.
+The **`
`** [HTML](/en-US/docs/Web/HTML) element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or [monospaced](https://en.wikipedia.org/wiki/Monospaced_font) font.
+
+Whitespace inside this element is displayed as written, with one exception. If one or more leading newline characters are included immediately following the opening `
` tag, the _first_ newline character is stripped.
 
 By default, `
` is a [block-level](/en-US/docs/Glossary/Block-level_content) element, i.e. its default {{cssxref("display")}} value is `block`.
 

From b2cab243cead88b01cb46c3444b62a45807a0d58 Mon Sep 17 00:00:00 2001
From: Jessy V 
Date: Mon, 13 Jan 2025 14:16:51 +0100
Subject: [PATCH 015/102] Fix wrong shader type in WebGL texture tutorial
 (#37625)

---
 .../web/api/webgl_api/tutorial/using_textures_in_webgl/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md b/files/en-us/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md
index f02b8f03569cac6..914bf866eb2a4ad 100644
--- a/files/en-us/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md
+++ b/files/en-us/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md
@@ -221,7 +221,7 @@ const vsSource = `
   `;
 ```
 
-The key change here is that instead of fetching the vertex color, we're fetching the texture coordinates and passing them to the vertex shader; this will indicate the location within the texture corresponding to the vertex.
+The key change here is that instead of fetching the vertex color, we're fetching the texture coordinates and passing them to the fragment shader; this will indicate the location within the texture corresponding to the vertex.
 
 ### The fragment shader
 

From 5e4aa22f2c162dd05aea0245a9fb97ed6b3a5e77 Mon Sep 17 00:00:00 2001
From: Alex Potsides 
Date: Mon, 13 Jan 2025 14:20:06 +0100
Subject: [PATCH 016/102] docs: update WebTransport unidirectional stream
 examples (#37629)

---
 .../web/api/webtransport/createunidirectionalstream/index.md  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/en-us/web/api/webtransport/createunidirectionalstream/index.md b/files/en-us/web/api/webtransport/createunidirectionalstream/index.md
index df7c280f45ffc64..0d35caf10dab15e 100644
--- a/files/en-us/web/api/webtransport/createunidirectionalstream/index.md
+++ b/files/en-us/web/api/webtransport/createunidirectionalstream/index.md
@@ -59,7 +59,7 @@ async function writeData() {
   const stream = await transport.createUnidirectionalStream({
     sendOrder: "596996858",
   });
-  const writer = stream.writable.getWriter();
+  const writer = stream.getWriter();
   const data1 = new Uint8Array([65, 66, 67]);
   const data2 = new Uint8Array([68, 69, 70]);
   writer.write(data1);
@@ -80,7 +80,7 @@ You can also use {{domxref("WritableStreamDefaultWriter.abort()")}} to abruptly
 // ...
 
 const stream = await transport.createUnidirectionalStream();
-const writer = ws.getWriter();
+const writer = stream.getWriter();
 
 // ...
 

From 8b49d68b62c09cf7227a99e866f45005b1a92d9d Mon Sep 17 00:00:00 2001
From: nodeppo <189591363+nodeppo@users.noreply.github.com>
Date: Mon, 13 Jan 2025 22:46:00 +0100
Subject: [PATCH 017/102] fix(games): move single quote to match list (#37636)

---
 .../tutorials/html5_gamedev_phaser_device_orientation/index.md  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/games/tutorials/html5_gamedev_phaser_device_orientation/index.md b/files/en-us/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
index 050b19aba30ebe6..9c3107f91442f32 100644
--- a/files/en-us/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
+++ b/files/en-us/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
@@ -28,7 +28,7 @@ You can open the index file in your favorite browser to launch the game and try
 
 - `img`: All the images that we will use in the game.
 - `src`: The JavaScript files with all the source code of the game defined inside.
-- `audio:` The sound files used in the game.
+- `audio`: The sound files used in the game.
 
 ## Setting up the Canvas
 

From 2befe9ec5792e13f720396535a4aa20111be96ef Mon Sep 17 00:00:00 2001
From: A1lo 
Date: Tue, 14 Jan 2025 11:04:47 +0800
Subject: [PATCH 018/102] fix: remove the duplicated sidebar macro (#37639)

---
 files/en-us/web/svg/element/index.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/files/en-us/web/svg/element/index.md b/files/en-us/web/svg/element/index.md
index 245c4fc0b56cf57..334e4463c2679d8 100644
--- a/files/en-us/web/svg/element/index.md
+++ b/files/en-us/web/svg/element/index.md
@@ -237,5 +237,3 @@ SVG drawings and images are created using a wide array of elements which are ded
 - [SVG attribute reference](/en-US/docs/Web/SVG/Attribute)
 - [SVG Tutorial](/en-US/docs/Web/SVG/Tutorial)
 - [SVG interface reference](/en-US/docs/Web/API/Document_Object_Model#svg_dom)
-
-{{SVGRef}}

From bdecbffbf6379d6e2399855f59bd34be8c4d5965 Mon Sep 17 00:00:00 2001
From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com>
Date: Tue, 14 Jan 2025 12:33:09 +0530
Subject: [PATCH 019/102] fix(css): Fix `flex: 1` explanation (#37553)

* fix(css): Fix `flex: 1` explanation

* Update files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* remove line break

* Update files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md

Co-authored-by: Chris Mills 

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Chris Mills 
---
 .../css_flexible_box_layout/basic_concepts_of_flexbox/index.md  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md b/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md
index fc85d54f56c87f0..f834f49fe7bbdd4 100644
--- a/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md
+++ b/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md
@@ -292,7 +292,7 @@ Using `flex: auto` is the same as using `flex: 1 1 auto`; this is similar to `fl
 
 Using `flex: none` will create fully inflexible flex items. It is as if you wrote `flex: 0 0 auto`. The items cannot grow or shrink and will be laid out using flexbox with a `flex-basis` of `auto`.
 
-The shorthand you often see in tutorials is `flex: 1` or `flex: 2` and so on. This is the same as writing `flex: 1 1 0` or `flex: 2 1 0` and so on, respectively. The items can grow and shrink from a `flex-basis` of `0`.
+The shorthand you often see in tutorials is `flex: 1` or `flex: 2` and so on. This is the same as writing `flex: 1 1 0` or `flex: 2 1 0` and so on, respectively. The items get minimum size due to `flex-basis: 0` and then proportionally grow to fill the available space. In this case, the `flex-shrink` value of `1` is redundant because the items start with minimum size — they're not given any size that could cause them to overflow the flex container.
 
 Try these shorthand values in the live sample below.
 

From 8a12e24b1e3ef1bd42d0bd9edc6cea9821943f80 Mon Sep 17 00:00:00 2001
From: Jesper Noordsij <45041769+jnoordsij@users.noreply.github.com>
Date: Tue, 14 Jan 2025 08:58:31 +0100
Subject: [PATCH 020/102] Fix PushSubscription code example to actually post
 JSON object (#37632)

---
 files/en-us/web/api/pushsubscription/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/api/pushsubscription/index.md b/files/en-us/web/api/pushsubscription/index.md
index 7c1a2e486b64c94..1ff490cbed41d59 100644
--- a/files/en-us/web/api/pushsubscription/index.md
+++ b/files/en-us/web/api/pushsubscription/index.md
@@ -71,7 +71,7 @@ const subscriptionObject = {
 // Stringify the object an post to the app server
 fetch(`https://example.com/push/`, {
   method: "post",
-  body: JSON.stringify(pushSubscription);
+  body: JSON.stringify(subscriptionObject);
 });
 ```
 

From f28473f4773ab02a1e312e9841773ca96e52aefa Mon Sep 17 00:00:00 2001
From: hmolsen 
Date: Tue, 14 Jan 2025 09:46:03 +0100
Subject: [PATCH 021/102] Fix minor mistake: you send two directives not two
 headers (#37642)

"report-to" and "report-uri" are directives within the CSP Header. Text said: "both headers" which is technically wrong.
---
 .../web/http/headers/content-security-policy/report-to/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/http/headers/content-security-policy/report-to/index.md b/files/en-us/web/http/headers/content-security-policy/report-to/index.md
index d536fabe5cba918..231b7c788974a68 100644
--- a/files/en-us/web/http/headers/content-security-policy/report-to/index.md
+++ b/files/en-us/web/http/headers/content-security-policy/report-to/index.md
@@ -73,7 +73,7 @@ The JSON for a single report might look like this:
 ## Usage notes
 
 The `report-to` directive is intended to replace `report-uri`, and browsers that support `report-to` ignore the `report-uri` directive.
-However, until `report-to` is broadly supported you can specify both headers as shown:
+However, until `report-to` is broadly supported you can specify both directives as shown:
 
 ```http
 Content-Security-Policy: …; report-uri https://endpoint.example.com; report-to endpoint_name

From eea0f3e4950c73b3f648e86a96ab245f4bc958e7 Mon Sep 17 00:00:00 2001
From: Giannis Agogiatis <63949183+Agog-io@users.noreply.github.com>
Date: Tue, 14 Jan 2025 10:13:50 +0100
Subject: [PATCH 022/102] added correct explanations to offsets in selection
 api docs (#37630)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Ioannis Agogiatis 
---
 files/en-us/web/api/selection/anchoroffset/index.md | 4 +++-
 files/en-us/web/api/selection/focusoffset/index.md  | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/files/en-us/web/api/selection/anchoroffset/index.md b/files/en-us/web/api/selection/anchoroffset/index.md
index df6e7e3e58b3fd1..dac320d465c463f 100644
--- a/files/en-us/web/api/selection/anchoroffset/index.md
+++ b/files/en-us/web/api/selection/anchoroffset/index.md
@@ -10,7 +10,9 @@ browser-compat: api.Selection.anchorOffset
 
 The **`Selection.anchorOffset`** read-only property returns the
 number of characters that the selection's anchor is offset within the
-{{domxref("Selection.anchorNode")}}.
+{{domxref("Selection.anchorNode")}} if said node is of type {{domxref("Text")}}, {{domxref("CDATASection")}} or {{domxref("Comment")}}.
+
+In the case of {{domxref("Selection.anchorNode")}} being another type of node, **`Selection.anchorOffset`** returns the number of {{domxref("Node.childNodes")}} the selection's focus is offset within the {{domxref("Selection.anchorNode")}}.
 
 This number is zero-based. If the selection begins with the first character in the
 {{domxref("Selection.anchorNode")}}, `0` is returned.
diff --git a/files/en-us/web/api/selection/focusoffset/index.md b/files/en-us/web/api/selection/focusoffset/index.md
index 77ba9a61d0e3458..e3340f0763f7f75 100644
--- a/files/en-us/web/api/selection/focusoffset/index.md
+++ b/files/en-us/web/api/selection/focusoffset/index.md
@@ -10,7 +10,9 @@ browser-compat: api.Selection.focusOffset
 
 The **`Selection.focusOffset`** read-only property returns the
 number of characters that the selection's focus is offset within the
-{{domxref("Selection.focusNode")}}.
+{{domxref("Selection.focusNode")}} if said node is of type {{domxref("Text")}}, {{domxref("CDATASection")}} or {{domxref("Comment")}}.
+
+In the case of {{domxref("Selection.focusNode")}} being another type of node, **`Selection.focusOffset`** returns the number of {{domxref("Node.childNodes")}} the selection's focus is offset within the {{domxref("Selection.focusNode")}}.
 
 This number is zero-based. If the selection ends with the first character in the
 {{domxref("Selection.focusNode")}}, `0` is returned.

From 8fcc8b5aae5d641223e3c644615b5c01b747cbe2 Mon Sep 17 00:00:00 2001
From: Barry Pollard 
Date: Tue, 14 Jan 2025 11:52:43 +0000
Subject: [PATCH 023/102] Update No Vary Search docs for prerender (#37556)

* Update No Vary Search docs for prerender

* Update spec rules article too

* Finish array warning

* Apply suggestions from code review

Co-authored-by: Chris Mills 

* Review feedback

---------

Co-authored-by: Chris Mills 
---
 .../script/type/speculationrules/index.md     |  3 +++
 .../web/http/headers/no-vary-search/index.md  | 19 +++++++++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/files/en-us/web/html/element/script/type/speculationrules/index.md b/files/en-us/web/html/element/script/type/speculationrules/index.md
index c4d111109b238b0..e25ec3d9b8e31fa 100644
--- a/files/en-us/web/html/element/script/type/speculationrules/index.md
+++ b/files/en-us/web/html/element/script/type/speculationrules/index.md
@@ -463,6 +463,9 @@ If a link is hovered over, the browser will start prefetching that specific link
 
 If the user hovers over another link before the prefetch completes, the `expects_no_vary_search` pattern tells the browser that there is no need to cancel the current prefetch, because all `/users` URLs with `id` URL parameter values effectively point to the same page for this context (and for caching purposes).
 
+> [!WARNING]
+> Additional care must be taken when using prerender with `No-Vary-Search` since the page may initially be prerendered with different URL parameters. `No-Vary-Search` is used for URL parameters that deliver the same resource from the server, but are used by the client for various reasons (client-side rendering, UTM parameters for analytics measurement, etc.). As the initial prerender may be for different URL parameters, any code depending on them should only run after prerender activation.
+
 ### `eagerness` example
 
 The following set of document rules shows how `eagerness` can be used to hint at the eagerness with which the browser should prerender each matching set of links.
diff --git a/files/en-us/web/http/headers/no-vary-search/index.md b/files/en-us/web/http/headers/no-vary-search/index.md
index a2ab1fe58514c7b..44e2e1eccb2c407 100644
--- a/files/en-us/web/http/headers/no-vary-search/index.md
+++ b/files/en-us/web/http/headers/no-vary-search/index.md
@@ -5,7 +5,6 @@ page-type: http-header
 status:
   - experimental
 browser-compat: http.headers.No-Vary-Search
-spec-urls: https://wicg.github.io/nav-speculation/no-vary-search.html
 ---
 
 {{HTTPSidebar}}{{SeeCompatTable}}
@@ -13,9 +12,7 @@ spec-urls: https://wicg.github.io/nav-speculation/no-vary-search.html
 The HTTP **`No-Vary-Search`** {{Glossary("response header")}} specifies a set of rules that define how a URL's query parameters will affect cache matching.
 These rules dictate whether the same URL with different URL parameters should be saved as separate browser cache entries.
 
-> [!NOTE]
-> The [Speculation Rules API](/en-US/docs/Web/API/Speculation_Rules_API) can include an `expects_no_vary_search` field, which indicates to the browser what the expected `No-Vary-Search` value will be (if any) for documents that it is receiving prefetch/prerender requests for via the speculation rules.
-> The browser can use this to determine ahead of time whether it is more useful to wait for an existing prefetch/prerender to finish, or start a new fetch request when the speculation rule is matched.
+This allows the browser to reuse existing resources despite mismatching URL parameters to avoid the expense of fetching the resource again, when the same content will be returned.
 
 
@@ -57,6 +54,17 @@ No-Vary-Search: key-order, params, except=("param1")
     A boolean `params` directive has to be included for it to take effect (`params, except=("param1" "param2")`).
     The presence of other parameters that are not in the `except=` list _won't_ cause URLs to be cached as separate entries.
 
+## Description
+
+### Relationship with the Speculation Rules API
+
+The [Speculation Rules API](/en-US/docs/Web/API/Speculation_Rules_API) supports using the `No-Vary-Search` header to reuse an existing prefetched or prerendered page for different URL parameters — if they are included in the `No-Vary-Search` header.
+
+> [!WARNING]
+> Additional care must be taken when using prerender with `No-Vary-Search` since the page may initially be prerendered with different URL parameters. `No-Vary-Search` is used for URL parameters that deliver the same resource from the server, but are used by the client for various reasons (client-side rendering, UTM parameters for analytics measurement, etc.). As the initial prerender may be for different URL parameters, any code depending on them should only run after prerender activation.
+
+The Speculation Rules API can also include an `expects_no_vary_search` field, which indicates to the browser what the expected `No-Vary-Search` value will be (if any) for documents that it is receiving prefetch/prerender requests for via the speculation rules. The browser can use this to determine ahead of time whether it is more useful to wait for an existing prefetch/prerender to finish, or start a new fetch request when the speculation rule is matched. See the ["expects_no_vary_search" example](/en-US/docs/Web/HTML/Element/script/type/speculationrules#expects_no_vary_search_example) for an explanation of how this can be used.
+
 ## Examples
 
 ### Allowing responses from URLs with differently ordered params to match the same cache entry
@@ -109,6 +117,9 @@ You could get the browser to ignore all of these when considering cache matching
 No-Vary-Search: params=("id" "order" "lang")
 ```
 
+> [!NOTE]
+> As a [structured field](https://www.rfc-editor.org/rfc/rfc8941) the array of parameters should be space-separated quoted strings as shown above, and not comma-separated, which developers may be more used to.
+
 If you wanted the browser to ignore all of them _and_ any others that might be present when cache matching, you could use the boolean form of `params`:
 
 ```http

From 1c93ad11838b16a30bcda1bb927e34085d694927 Mon Sep 17 00:00:00 2001
From: Bramus 
Date: Tue, 14 Jan 2025 14:52:55 +0100
Subject: [PATCH 024/102] Rewrite `attr()` to match the newest version of the
 spec (#37574)

* Rewrite attr() to match the newest version of the spec

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Use attr(href) as an example

* Add an extra unit example

* Rework syntax

* Remove semicolons as per guidelines

* Move description section around

* Clarify the allowed values for ``

* Clarify what happens when a value cannot be parsed into the specified 

* Define the guaranteed-invalid value term

* Rework return value and examples

* Fix attr()-tainted sentence

* Add more  examples

* Update dimension example

* Apply suggestions from code review

Co-authored-by: Chris Mills 

* Remove update notice, the live example updates all by itself

* Embed a LiveSample for the view-transition-name example

* Embed a LiveSample for the rotation example

* Add intro sentence to the return value section

* Clarify how to set multiple types

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/attr/index.md

Co-authored-by: Chris Mills 

* Move fallback example before color example

* Add compat warnings on top of advanced examples

* Rework vt example

* Move dimension example before vt example

* small grammar updates

---------

Co-authored-by: Chris Mills 
---
 .../guaranteed_invalid_value/index.md         |  17 +
 files/en-us/web/css/attr/index.md             | 394 ++++++++++++++----
 2 files changed, 327 insertions(+), 84 deletions(-)
 create mode 100644 files/en-us/glossary/guaranteed_invalid_value/index.md

diff --git a/files/en-us/glossary/guaranteed_invalid_value/index.md b/files/en-us/glossary/guaranteed_invalid_value/index.md
new file mode 100644
index 000000000000000..4dee2664c7cbc73
--- /dev/null
+++ b/files/en-us/glossary/guaranteed_invalid_value/index.md
@@ -0,0 +1,17 @@
+---
+title: Guaranteed-invalid value
+slug: Glossary/guaranteed_invalid_value
+page-type: glossary-definition
+---
+
+{{GlossarySidebar}}
+
+In CSS the guaranteed-invalid value is {{CSSXref("initial")}}.
+
+When a [custom property](/en-US/docs/Web/CSS/--*)'s value is the guaranteed-invalid value, the {{CSSXref("var")}} function cannot use it for substitution. Attempting to do so makes the declaration _invalid at computed-value time_, unless a valid fallback is specified.
+
+## See also
+
+- CSS {{CSSXref("initial")}}
+- CSS {{CSSXref("var")}}
+- [CSS Custom Properties for Cascading Variables Module Level 1 Specification](https://www.w3.org/TR/css-variables-1/#guaranteed-invalid)
diff --git a/files/en-us/web/css/attr/index.md b/files/en-us/web/css/attr/index.md
index 7c1f4dca24fa130..f905b3c24ffb9a5 100644
--- a/files/en-us/web/css/attr/index.md
+++ b/files/en-us/web/css/attr/index.md
@@ -8,9 +8,9 @@ browser-compat: css.types.attr
 {{CSSRef}}
 
 > [!NOTE]
-> The `attr()` function can be used with any CSS property, but support for properties other than {{CSSxRef("content")}} is experimental, and support for the type-or-unit parameter is sparse.
+> The `attr()` function can be used with any CSS property, but support for properties other than {{CSSxRef("content")}} is experimental.
 
-The **`attr()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. It can also be used on [pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements), in which case the value of the attribute on the pseudo-element's originating element is returned.
+The **`attr()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) is used to retrieve the value of an attribute of the selected element and use it in a property value, similar to how the {{cssxref("var", "var()")}} function substitutes a custom property value. It can also be used with [pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements), in which case the attribute's value on the pseudo-element's originating element is returned.
 
 {{EmbedInteractiveExample("pages/tabbed/function-attr.html", "tabbed-shorter")}}
 
@@ -18,130 +18,170 @@ The **`attr()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_F
 
 ```css
 /* Basic usage */
-attr(data-count);
-attr(title);
+attr(data-count)
+attr(href)
 
 /* With type */
-attr(src url);
-attr(data-count number);
-attr(data-width px);
+attr(data-width px)
+attr(data-size rem)
+attr(data-name string)
+attr(id type())
+attr(data-count type())
+attr(data-size type( | ))
 
 /* With fallback */
-attr(data-count number, 0);
-attr(src url, "");
-attr(data-width px, inherit);
-attr(data-something, "default");
+attr(data-count type(), 0)
+attr(data-width px, inherit)
+attr(data-something, "default")
 ```
 
-### Values
+### Parameters
 
-- `attribute-name`
-  - : The name of an attribute on the HTML element referenced in the CSS.
-- ``
+The `attr()` function's syntax is as follows:
 
-  - : A keyword representing either the type of the attribute's value, or its unit, as in HTML some attributes have implicit units. If the use of `` as a value for the given attribute is invalid, the `attr()` expression will be invalid too. If omitted, it defaults to `string`. The list of valid values are:
+```plain
+attr( ? , ?)
+```
 
-    - `string`
+The parameters are:
 
-      - : The attribute value is treated as a CSS {{CSSxRef("<string>")}}. It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters.
+- ``
+  - : The attribute name whose value should be retrieved from the selected HTML element(s).
+- ``
 
-        Default value: an empty string.
+  - : Specifies how the attribute value is parsed into a CSS value. This can be the `string` keyword, a `type()` function, or a CSS dimension unit. When omitted, it defaults to `string`.
 
-    - `color`
+    - The `string` keyword parses the value into a CSS string.
 
-      - : The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS {{CSSxRef("<string>")}} value. Leading and trailing spaces are stripped.
+      ```css
+      attr(data-name string, "stranger")
+      ```
 
-        Default value: `currentcolor`.
+    - The `type()` function takes a `` as its argument that specifies what [data type](/en-US/docs/Web/CSS/CSS_Types) to parse the value into. The `` can be {{CSSxRef("<angle>")}}, {{CSSxRef("<color>")}}, {{CSSxRef("<custom-ident>")}}, {{CSSxRef("<image>")}}, {{CSSxRef("<integer>")}}, {{CSSxRef("<length>")}}, {{CSSxRef("<length-percentage>")}}, {{CSSxRef("<number>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<resolution>")}}, {{CSSxRef("<string>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<transform-function>")}}, or a combination thereof.
 
-    - `url`
+      ```css
+      attr(id type(), none)
+      attr(data-count type(), 0)
+      ```
 
-      - : The attribute value is parsed as a string that is used inside a CSS `url()` function.
-        Relative URL are resolved relatively to the original document, not relatively to the style sheet.
-        Leading and trailing spaces are stripped.
+      To accept multiple types, list all allowed ``es in the `type()` function, separated by a `|`.
 
-        Default value: the URL `about:invalid` that points to a non-existent document with a generic error condition.
+      ```css
+      attr(data-size type( | ), 0px)
+      ```
 
-    - `integer`
+      For [security reasons](#limitations_and_security) {{CSSxRef("<url>")}} is not allowed as a ``.
 
-      - : The attribute value is parsed as a CSS {{CSSxRef("<integer>")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used.
-        Leading and trailing spaces are stripped.
+    - The `` identifier specifies the unit a numeric value should have (if any). It can be the `%` character (percentage) or a [CSS distance unit](/docs/Web/CSS/CSS_Values_and_Units#distance_units) such as `px`, `rem`, `deg`, `s`, etc.
 
-        Default value: `0`, or, if `0` is not a valid value for the property, the property's minimum value.
+      ```css
+      attr(data-size rem)
+      attr(data-width px, inherit)
+      attr(data-rotation deg)
+      ```
 
-    - `number`
+- ``
+  - : The value to be used if the specified attribute is missing or contains an invalid value.
 
-      - : The attribute value is parsed as a CSS {{CSSxRef("<number>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
-        Leading and trailing spaces are stripped.
+### Return value
 
-        Default value: `0`, or, if `0` is not a valid value for the property, the property's minimum value.
+The return value of `attr()` is the value of the HTML attribute whose name is `` parsed as the given `` or parsed as a CSS string.
 
-    - `length`
+When an `` is set, `attr()` will try to parse the attribute into that specified `` and return it. If the attribute cannot be parsed into the given ``, the `` will be returned instead. When no `` is set, the attribute will be parsed into a CSS string.
 
-      - : The attribute value is parsed as a CSS {{CSSxRef("<length>")}} dimension, that is including the unit (e.g. `12.5em`). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.
-        If the given unit is a relative length, `attr()` computes it to an absolute length.
-        Leading and trailing spaces are stripped.
+If no `` is set, the return value will default to an empty string when no `` is set or the [guaranteed-invalid value](/en-US/docs/Glossary/guaranteed_invalid_value) when an `` is set.
 
-        Default value: `0`, or, if `0` is not a valid value for the property, the property's minimum value.
+## Description
 
-    - `em`, `ex`, `px`, `rem`, `vw`, `vh`, `vmin`, `vmax`, `mm`, `cm`, `in`, `pt`, or `pc`
+### Limitations and security
 
-      - : The attribute value is parsed as a CSS {{CSSxRef("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as a {{CSSxRef("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
-        If the given unit is a relative length, `attr()` computes it to an absolute length.
-        Leading and trailing spaces are stripped.
+The `attr()` function can reference attributes that were never intended by the page author to be used for styling, and might contain sensitive information (for example, a security token used by scripts on the page). In general, this is fine, but it can become a security threat when used in URLs. You therefore can't use `attr()` to dynamically construct URLs.
 
-        Default value: `0`, or, if `0` is not a valid value for the property, the property's minimum value.
+```html
+
+help
+
+```
 
-    - `angle`
+Values that use `attr()` get marked as _"`attr()`-tained"_. Using an `attr()`-tainted value as or in a `` makes a declaration become ["invalid at computed value time" or IACVT for short](https://brm.us/iacvt)
 
-      - : The attribute value is parsed as a CSS {{CSSxRef("<angle>")}} dimension, that is including the unit (e.g. `30.5deg`). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.
-        Leading and trailing spaces are stripped.
+### Backwards compatibility
 
-        Default value: `0deg`, or, if `0deg` is not a valid value for the property, the property's minimum value.
+Generally speaking, the modern `attr()` syntax is backwards-compatible because the old way of using it — without specifying an `` — behaves the same as before. Having `attr(data-attr)` in your code is the same as writing `attr(data-attr type())` or the simpler `attr(data-attr string))`.
 
-    - `deg`, `grad`, `rad`
+However, there are two edge cases where the modern `attr()` syntax behaves differently from the old syntax.
 
-      - : The attribute value is parsed as a CSS {{CSSxRef("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as an {{CSSxRef("<angle>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
-        Leading and trailing spaces are stripped.
+In the following snippet, browsers that don't support the modern `attr()` syntax will discard the second declaration because they cannot parse it. The result in those browsers is `"Hello World"`.
 
-        Default value: `0deg`, or, if `0deg` is not a valid value for the property, the property's minimum value.
+```html
+

+```
 
-    - `time`
+```css
+div::before {
+  content: attr(text) " World";
+}
+div::before {
+  content: attr(text) 1px;
+}
+```
+
+In browsers with support for the modern syntax, the output will be … nothing. Those browsers will successfully parse the second declaration but, because it is invalid content for the `content` property, the declaration becomes ["invalid at computed value time" or IACVT for short](https://brm.us/iacvt).
 
-      - : The attribute value is parsed as a CSS {{CSSxRef("<time>")}} dimension, that is including the unit (e.g. `30.5ms`). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.
-        Leading and trailing spaces are stripped.
+To prevent this kind of situation, [feature detection](#feature_detection) is recommended.
 
-        Default value: `0s`, or, if `0s` is not a valid value for the property, the property's minimum value.
+A second edge case is the following:
 
-    - `s`, `ms`
+```html
+

+```
 
-      - : The attribute value is parsed as a CSS {{CSSxRef("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as an {{CSSxRef("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
-        Leading and trailing spaces are stripped.
+```css
+#parent {
+  --x: attr(data-attr);
+}
+#child::before {
+  content: var(--x);
+}
+```
 
-        Default value: `0s`, or, if `0s` is not a valid value for the property, the property's minimum value.
+Browsers without support for modern syntax display the text `"foo"`. In browsers with modern `attr()` support there is no output.
 
-    - `frequency`
+This is because `attr()` — similar to custom properties that use the `var()` function — get substituted at [computed value time](https://brm.us/iacvt/#custom-properties). With the modern behavior, `--x` first tries to read the `data-attr` attribute from the `#parent` element, which results in an empty string because there is no such attribute on `#parent`. That empty string then gets inherited by the `#child` element, resulting in a `content: ;` declaration being set.
 
-      - : The attribute value is parsed as a CSS {{CSSxRef("<frequency>")}} dimension, that is including the unit (e.g. `30.5kHz`). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.
+To prevent this sort of situation, don't pass inherited `attr()` values onto children unless you explicitly want to.
 
-        Default value: `0Hz`, or, if `0Hz` is not a valid value for the property, the property's minimum value.
+### Feature detection
 
-    - `Hz`, `kHz`
+You can feature detect support for modern `attr()` syntax using the {{CSSxRef("@supports")}} at-rule. In the test, try to assign advanced `attr()` to a (non-custom) CSS property.
 
-      - : The attribute value is parsed as a CSS {{CSSxRef("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as a {{CSSxRef("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
-        Leading and trailing spaces are stripped.
+For example:
 
-        Default value: `0Hz`, or, if `0Hz` is not a valid value for the property, the property's minimum value.
+```css
+@supports (x: attr(x type(*))) {
+  /* Browser has modern attr() support */
+}
 
-    - `%`
+@supports not (x: attr(x type(*))) {
+  /* Browser does not have modern attr() support */
+}
+```
 
-      - : The attribute value is parsed as a CSS {{CSSxRef("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as a {{CSSxRef("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
-        If the given value is used as a length, `attr()` computes it to an absolute length.
-        Leading and trailing spaces are stripped.
+We can perform the same check in JavaScript with [`CSS.supports()`](/en-US/docs/Web/API/CSS/supports_static):
 
-        Default value: `0%`, or, if `0%` is not a valid value for the property, the property's minimum value.
+```js
+if (CSS.supports("x: attr(x type(*))")) {
+  /* Browser has modern attr() support */
+}
 
-- ``
-  - : The value to be used if the associated attribute is missing or contains an invalid value. If not set, CSS will use the default value defined for each ``.
+if (!CSS.supports("x: attr(x type(*))")) {
+  /* Browser does not have modern attr() support */
+}
+```
 
 ## Formal syntax
 
@@ -171,6 +211,32 @@ In this example, we prepend the value of the `data-foo` [`data-*`](/en-US/docs/W
 
 {{EmbedLiveSample("content_property", "100%", 50)}}
 
+### Using a fallback value
+
+{{SeeCompatTable}}
+
+In this example, we append the value of `data-browser` [`data-*`](/en-US/docs/Web/HTML/Global_attributes/data-*) [global attribute](/en-US/docs/Web/HTML/Global_attributes) to the {{HTMLElement("p")}} element. If the `data-browser` attribute is missing from the {{HTMLElement("p")}} element, we append the _fallback_ value of "**Unknown**".
+
+#### HTML
+
+```html
+
My favorite browser is:

+
Your favorite browser is:

+```
+
+#### CSS
+
+```css
+p::after {
+  content: " " attr(data-browser, "Unknown");
+  color: tomato;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample("using_fallback", "100%", 90)}}
+
 ### color value
 
 {{SeeCompatTable}}
@@ -200,7 +266,7 @@ In this example, we set the CSS value of {{CSSXRef("background-color")}} to the
 }
 
 .background[data-background] {
-  background-color: attr(data-background color, red);
+  background-color: attr(data-background type(), red);
 }
 ```
 
@@ -208,31 +274,191 @@ In this example, we set the CSS value of {{CSSXRef("background-color")}} to the
 
 {{EmbedLiveSample("color_value", "100%", 50)}}
 
-### using fallback
+### Using dimension units
 
 {{SeeCompatTable}}
 
-In this example, we append the value of `data-browser` [`data-*`](/en-US/docs/Web/HTML/Global_attributes/data-*) [global attribute](/en-US/docs/Web/HTML/Global_attributes) to the {{HTMLElement("p")}} element. If the `data-browser` attribute is missing from the {{HTMLElement("p")}} element, we append the _fallback_ value of "**Unknown**".
+In this example the `data-rotation` attribute is parsed into a `deg` unit, which specifies the element's rotation.
 
 #### HTML
 
 ```html
-
My favorite browser is:

-
Your favorite browser is:

+
I am rotated by -3 degrees

+
And I by 2 degrees

+
And so am I, using the fallback value of 1.5deg

 ```
 
 #### CSS
 
+```css hidden
+body {
+  min-height: 100svh;
+  display: grid;
+  place-content: center;
+  gap: 1em;
+}
+div {
+  margin: 0 auto;
+  border: 1px solid;
+  border-radius: 0.25em;
+  padding: 0.5em;
+}
+```
+
 ```css
-p::after {
-  content: " " attr(data-browser, "Unknown");
-  color: tomato;
+div {
+  width: fit-content;
+  transform-origin: 50% 50%;
+  rotate: attr(data-rotation deg, 1.5deg);
 }
 ```
 
 #### Result
 
-{{EmbedLiveSample("using_fallback", "100%", 90)}}
+{{EmbedLiveSample("using_dimension_units", "100%", 300)}}
+
+### Parsing `attr()` values as ``s
+
+{{SeeCompatTable}}
+
+In this example, the values for the {{cssxref("view-transition-name")}} property are derived from the `id` attribute of the element. The attribute gets parsed into a {{CSSxRef("<custom-ident>")}}, which is what {{cssxref("view-transition-name")}} accepts as a value.
+
+The resulting values for {{cssxref("view-transition-name")}} are `card-1`, `card-2`, `card-3`, etc.
+
+#### HTML
+
+The HTML contains four cards with different `id` attributes and a "Shuffle cards" `
+```
+
+```html hidden
+

+  

+    You browser does not support advanced attr(). As a result, this
+    demo won’t do anything.
+  

+

+```
+
+#### CSS
+
+The cards are laid out in a flex container:
+
+```css
+.cards {
+  display: flex;
+  flex-direction: row;
+  gap: 1em;
+  padding: 1em;
+}
+```
+
+```css hidden
+:root {
+  view-transition-name: none;
+}
+::view-transition {
+  pointer-events: none;
+}
+
+@supports (x: attr(x type(*))) {
+  .warning {
+    display: none;
+  }
+}
+
+@layer layout {
+  .card {
+    border-radius: 0.25em;
+    width: 20vw;
+    max-width: 5em;
+    aspect-ratio: 1 / 1.6;
+    background: lightgrey;
+
+    display: grid;
+    place-content: center;
+    font-size: 2em;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    min-height: 100svh;
+    display: grid;
+    place-content: center;
+  }
+
+  button {
+    justify-self: center;
+  }
+}
+
+@layer warning {
+  .warning {
+    padding: 1em;
+    border: 1px solid #ccc;
+    background: rgba(255 255 205 / 0.8);
+    text-align: center;
+    order: -1;
+    margin: 1em;
+  }
+
+  .warning > :first-child {
+    margin-top: 0;
+  }
+  .warning > :last-child {
+    margin-bottom: 0;
+  }
+}
+```
+
+On each card, the `attr()` function gets the `id` attribute and parses it into a {{CSSxRef("<custom-ident>")}}, which is used as the value for the {{cssxref("view-transition-name")}} property. When there is no `id` set on a card, the fallback value `none` is used instead.
+
+```css
+.card {
+  view-transition-name: attr(id type(), none);
+  view-transition-class: card;
+}
+```
+
+#### JavaScript
+
+When the `

   

-  
-  
-    
-      
-      
-    
-  
-  
-    
-      
-      
-    
-    
-      
-      
-    
-    
-      
-      
-    
-    
-      
-      
-    
-    
-      
-      
-    
-    
-      
-      
-    
-    
-      
-      
-    
-    
-      
-      
-    
-    
-      
-      
-    
-    
-      
-      
-    
-    
-      
-      
-    
-    
-      
-      
-    
-  
-

-    
Methods of String

-  
MethodDescription

-        {{jsxref("String/charAt", "charAt()")}}, {{jsxref("String/charCodeAt", "charCodeAt()")}},
-        {{jsxref("String/codePointAt", "codePointAt()")}}
-      
-        Return the character or character code at the specified position in
-        string.
-      

-        {{jsxref("String/indexOf", "indexOf()")}},
-        {{jsxref("String/lastIndexOf", "lastIndexOf()")}}
-      
-        Return the position of specified substring in the string or last
-        position of specified substring, respectively.
-      

-        {{jsxref("String/startsWith", "startsWith()")}},
-        {{jsxref("String/endsWith", "endsWith()")}},
-        {{jsxref("String/includes", "includes()")}}
-      
-        Returns whether or not the string starts, ends or contains a specified
-        string.
-      
{{jsxref("String/concat", "concat()")}}Combines the text of two strings and returns a new string.
{{jsxref("String/split", "split()")}}
-        Splits a String object into an array of strings by
-        separating the string into substrings.
-      
{{jsxref("String/slice", "slice()")}}Extracts a section of a string and returns a new string.

-        {{jsxref("String/substring", "substring()")}},
-        {{jsxref("String/substr", "substr()")}}
-      
-        Return the specified subset of the string, either by specifying the
-        start and end indexes or the start index and a length.
-      

-        {{jsxref("String/match", "match()")}}, {{jsxref("String/matchAll", "matchAll()")}},
-        {{jsxref("String/replace", "replace()")}}, {{jsxref("String/replaceAll", "replaceAll()")}},
-        {{jsxref("String/search", "search()")}}
-      Work with regular expressions.

-        {{jsxref("String/toLowerCase", "toLowerCase()")}},
-        {{jsxref("String/toUpperCase", "toUpperCase()")}}
-      
-        

-          Return the string in all lowercase or all uppercase, respectively.
-        

-      
{{jsxref("String/normalize", "normalize()")}}
-        Returns the Unicode Normalization Form of the calling string value.
-      
{{jsxref("String/repeat", "repeat()")}}
-        Returns a string consisting of the elements of the object repeated the
-        given times.
-      
{{jsxref("String/trim", "trim()")}}Trims whitespace from the beginning and end of the string.

-
-### Multi-line template literals
-
-[Template literals](/en-US/docs/Web/JavaScript/Reference/Template_literals) are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.
-
-Template literals are enclosed by backtick ([grave accent](https://en.wikipedia.org/wiki/Grave_accent)) characters (`` ` ``) instead of double or single quotes. Template literals can contain placeholders. These are indicated by the dollar sign and curly braces (`${expression}`).
-
-#### Multi-lines
-
-Any new line characters inserted in the source are part of the template literal. Using normal strings, you would have to use the following syntax in order to get multi-line strings:
-
-```js
-console.log(
-  "string text line 1\n\
-string text line 2",
-);
-// "string text line 1
-// string text line 2"
-```
-
-To get the same effect with multi-line strings, you can now write:
-
-```js
-console.log(`string text line 1
-string text line 2`);
-// "string text line 1
-// string text line 2"
-```
-
-#### Embedded expressions
-
-In order to embed expressions within normal strings, you would use the following syntax:
-
-```js
-const five = 5;
-const ten = 10;
-console.log(
-  "Fifteen is " + (five + ten) + " and not " + (2 * five + ten) + ".",
-);
-// "Fifteen is 15 and not 20."
-```
-
-Now, with template literals, you are able to make use of the syntactic sugar making substitutions like this more readable:
-
-```js
-const five = 5;
-const ten = 10;
-console.log(`Fifteen is ${five + ten} and not ${2 * five + ten}.`);
-// "Fifteen is 15 and not 20."
-```
-
-For more information, read about [Template literals](/en-US/docs/Web/JavaScript/Reference/Template_literals) in the [JavaScript reference](/en-US/docs/Web/JavaScript/Reference).
-
-## Internationalization
-
-The {{jsxref("Intl")}} object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting. The constructors for {{jsxref("Intl.Collator")}}, {{jsxref("Intl.NumberFormat")}}, and {{jsxref("Intl.DateTimeFormat")}} objects are properties of the `Intl` object.
-
-### Date and time formatting
-
-The {{jsxref("Intl.DateTimeFormat")}} object is useful for formatting date and time. The following formats a date for English as used in the United States. (The result is different in another time zone.)
-
-```js
-// July 17, 2014 00:00:00 UTC:
-const july172014 = new Date("2014-07-17");
-
-const options = {
-  year: "2-digit",
-  month: "2-digit",
-  day: "2-digit",
-  hour: "2-digit",
-  minute: "2-digit",
-  timeZoneName: "short",
-};
-const americanDateTime = new Intl.DateTimeFormat("en-US", options).format;
-
-// Local timezone vary depending on your settings
-// In CEST, logs: 07/17/14, 02:00 AM GMT+2
-// In PDT, logs: 07/16/14, 05:00 PM GMT-7
-console.log(americanDateTime(july172014));
-```
-
-### Number formatting
-
-The {{jsxref("Intl.NumberFormat")}} object is useful for formatting numbers, for example currencies.
-
-```js
-const gasPrice = new Intl.NumberFormat("en-US", {
-  style: "currency",
-  currency: "USD",
-  minimumFractionDigits: 3,
-});
-
-console.log(gasPrice.format(5.259)); // $5.259
-
-const hanDecimalRMBInChina = new Intl.NumberFormat("zh-CN-u-nu-hanidec", {
-  style: "currency",
-  currency: "CNY",
-});
-
-console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五
-```
-
-### Collation
-
-The {{jsxref("Intl.Collator")}} object is useful for comparing and sorting strings.
-
-For example, there are actually two different sort orders in German, _phonebook_ and _dictionary_. Phonebook sort emphasizes sound, and it's as if "ä", "ö", and so on were expanded to "ae", "oe", and so on prior to sorting.
-
-```js
-const names = ["Hochberg", "Hönigswald", "Holzman"];
-
-const germanPhonebook = new Intl.Collator("de-DE-u-co-phonebk");
-
-// as if sorting ["Hochberg", "Hoenigswald", "Holzman"]:
-console.log(names.sort(germanPhonebook.compare).join(", "));
-// "Hochberg, Hönigswald, Holzman"
-```
-
-Some German words conjugate with extra umlauts, so in dictionaries it's sensible to order ignoring umlauts (except when ordering words differing _only_ by umlauts: _schon_ before _schön_).
-
-```js
-const germanDictionary = new Intl.Collator("de-DE-u-co-dict");
-
-// as if sorting ["Hochberg", "Honigswald", "Holzman"]:
-console.log(names.sort(germanDictionary.compare).join(", "));
-// "Hochberg, Holzman, Hönigswald"
-```
-
-For more information about the {{jsxref("Intl")}} API, see also [Introducing the JavaScript Internationalization API](https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/).
-
-{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_expressions")}}
diff --git a/files/en-us/web/javascript/guide/using_classes/index.md b/files/en-us/web/javascript/guide/using_classes/index.md
index bc279fb3b7ee37f..28f7b6b09c00428 100644
--- a/files/en-us/web/javascript/guide/using_classes/index.md
+++ b/files/en-us/web/javascript/guide/using_classes/index.md
@@ -16,7 +16,7 @@ This chapter assumes that you are already somewhat familiar with JavaScript and
 
 ## Overview of classes
 
-If you have some hands-on experience with JavaScript, or have followed along with the guide, you probably have already used classes, even if you haven't created one. For example, this [may seem familiar to you](/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates):
+If you have some hands-on experience with JavaScript, or have followed along with the guide, you probably have already used classes, even if you haven't created one. For example, this [may seem familiar to you](/en-US/docs/Web/JavaScript/Guide/Representing_dates_times):
 
 ```js
 const bigDay = new Date(2019, 6, 19);
diff --git a/files/en-us/web/javascript/reference/global_objects/string/index.md b/files/en-us/web/javascript/reference/global_objects/string/index.md
index 56d8589d49050d3..2c68d8aac3ab825 100644
--- a/files/en-us/web/javascript/reference/global_objects/string/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/string/index.md
@@ -427,5 +427,5 @@ String(undefinedVar); // "undefined"
 
 ## See also
 
-- [Text formatting](/en-US/docs/Web/JavaScript/Guide/Text_formatting) guide
+- [Numbers and strings](/en-US/docs/Web/JavaScript/Guide/Numbers_and_strings) guide
 - {{jsxref("RegExp")}}
diff --git a/files/en-us/web/javascript/reference/global_objects/string/string/index.md b/files/en-us/web/javascript/reference/global_objects/string/string/index.md
index 0f900eb07657af7..9d1bcce92991f2c 100644
--- a/files/en-us/web/javascript/reference/global_objects/string/string/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/string/string/index.md
@@ -77,4 +77,4 @@ String(sym); // "Symbol(example)"
 
 ## See also
 
-- [Text formatting](/en-US/docs/Web/JavaScript/Guide/Text_formatting) guide
+- [Numbers and strings](/en-US/docs/Web/JavaScript/Guide/Numbers_and_strings) guide
diff --git a/files/en-us/web/javascript/reference/global_objects/string/symbol.iterator/index.md b/files/en-us/web/javascript/reference/global_objects/string/symbol.iterator/index.md
index d2f384b14145ce8..7f655dd6753a099 100644
--- a/files/en-us/web/javascript/reference/global_objects/string/symbol.iterator/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/string/symbol.iterator/index.md
@@ -84,6 +84,6 @@ console.log(strIter.next().value); // "\uD835\uDC68"
 ## See also
 
 - [Polyfill of `String.prototype[Symbol.iterator]` in `core-js`](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
-- [Text formatting](/en-US/docs/Web/JavaScript/Guide/Text_formatting) guide
+- [Numbers and strings](/en-US/docs/Web/JavaScript/Guide/Numbers_and_strings) guide
 - {{jsxref("Symbol.iterator")}}
 - [Iteration protocols](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)
diff --git a/files/en-us/web/javascript/reference/template_literals/index.md b/files/en-us/web/javascript/reference/template_literals/index.md
index 0334aa5ac70ebea..0a7955eb8692cc2 100644
--- a/files/en-us/web/javascript/reference/template_literals/index.md
+++ b/files/en-us/web/javascript/reference/template_literals/index.md
@@ -366,7 +366,7 @@ const bad = `bad escape sequence: \unicode`;
 
 ## See also
 
-- [Text formatting](/en-US/docs/Web/JavaScript/Guide/Text_formatting) guide
+- [Numbers and strings](/en-US/docs/Web/JavaScript/Guide/Numbers_and_strings) guide
 - {{jsxref("String")}}
 - {{jsxref("String.raw()")}}
 - [Lexical grammar](/en-US/docs/Web/JavaScript/Reference/Lexical_grammar)
diff --git a/files/sidebars/jssidebar.yaml b/files/sidebars/jssidebar.yaml
index 50717b68e334031..9a03d52ce6187fb 100644
--- a/files/sidebars/jssidebar.yaml
+++ b/files/sidebars/jssidebar.yaml
@@ -30,10 +30,10 @@ sidebar:
         title: Guide_Functions
       - link: /Web/JavaScript/Guide/Expressions_and_operators
         title: Guide_Expressions
-      - link: /Web/JavaScript/Guide/Numbers_and_dates
+      - link: /Web/JavaScript/Guide/Numbers_and_strings
         title: Guide_Numbers
-      - link: /Web/JavaScript/Guide/Text_formatting
-        title: Guide_Text
+      - link: /Web/JavaScript/Guide/Representing_dates_times
+        title: Guide_Dates
       - link: /Web/JavaScript/Guide/Regular_expressions
         title: Guide_RegExp
       - link: /Web/JavaScript/Guide/Indexed_collections
@@ -50,6 +50,8 @@ sidebar:
         title: Guide_Typed_arrays
       - link: /Web/JavaScript/Guide/Iterators_and_generators
         title: Guide_Iterators_generators
+      - link: /Web/JavaScript/Guide/Internationalization
+        title: Guide_Internationalization
       - link: /Web/JavaScript/Guide/Meta_programming
         title: Guide_Meta
       - link: /Web/JavaScript/Guide/Modules
@@ -148,8 +150,8 @@ l10n:
     Guide_Loops: Schleifen und Iteration
     Guide_Functions: Funktionen
     Guide_Expressions: Ausdrücke und Operatoren
-    Guide_Numbers: Zahlen und Daten
-    Guide_Text: Textformatierung
+    Guide_Numbers: Numbers and strings
+    Guide_Dates: Representing dates & times
     Guide_RegExp: Reguläre Ausdrücke
     Guide_Indexed_collections: Indexierte Sammlungen
     Guide_keyed_collections: Gekennzeichnete Sammlungen
@@ -158,6 +160,7 @@ l10n:
     Guide_Promises: Verwendung von Promises
     Guide_Typed_arrays: Typisierte Arrays in JavaScript
     Guide_Iterators_generators: Iteratoren und Generatoren
+    Guide_Internationalization: Internationalization
     Guide_Meta: Metaprogrammierung
     Guide_Modules: JavaScript-Module
     Intermediate: Mittelstufe
@@ -194,8 +197,8 @@ l10n:
     Guide_Loops: Loops and iteration
     Guide_Functions: Functions
     Guide_Expressions: Expressions and operators
-    Guide_Numbers: Numbers and dates
-    Guide_Text: Text formatting
+    Guide_Numbers: Numbers and strings
+    Guide_Dates: Representing dates & times
     Guide_RegExp: Regular expressions
     Guide_Indexed_collections: Indexed collections
     Guide_keyed_collections: Keyed collections
@@ -204,6 +207,7 @@ l10n:
     Guide_Promises: Using promises
     Guide_Typed_arrays: JavaScript typed arrays
     Guide_Iterators_generators: Iterators and generators
+    Guide_Internationalization: Internationalization
     Guide_Meta: Meta programming
     Guide_Modules: JavaScript modules
     Beginners: Beginner's tutorials
@@ -246,8 +250,8 @@ l10n:
     Guide_Loops: Циклы и итерации
     Guide_Functions: Функции
     Guide_Expressions: Выражения и операторы
-    Guide_Numbers: Числа и даты
-    Guide_Text: Форматирование текста
+    Guide_Numbers: Numbers and strings
+    Guide_Dates: Representing dates & times
     Guide_RegExp: Регулярные выражения
     Guide_Indexed_collections: Упорядоченные наборы данных
     Guide_keyed_collections: Коллекции
@@ -256,6 +260,7 @@ l10n:
     Guide_Promises: Использование промисов
     Guide_Typed_arrays: Типизированные массивы JavaScript
     Guide_Iterators_generators: Итераторы и генераторы
+    Guide_Internationalization: Internationalization
     Guide_Meta: Метапрограммирование
     Guide_Modules: Модули JavaScript
     Intermediate: Средние
@@ -292,8 +297,8 @@ l10n:
     Guide_Loops: Boucles et itération
     Guide_Functions: Fonctions
     Guide_Expressions: Expressions et opérateurs
-    Guide_Numbers: Nombres et dates
-    Guide_Text: Formatage du texte
+    Guide_Numbers: Numbers and strings
+    Guide_Dates: Representing dates & times
     Guide_RegExp: Expressions rationnelles
     Guide_Indexed_collections: Collections indexées
     Guide_keyed_collections: Collections avec clés
@@ -302,6 +307,7 @@ l10n:
     Guide_Promises: Utiliser les promesses
     Guide_Typed_arrays: Tableaux typés en JavaScript
     Guide_Iterators_generators: Itérateurs et générateurs
+    Guide_Internationalization: Internationalization
     Guide_Meta: Métaprogrammation
     Guide_Modules: Modules JavaScript
     Intermediate: Intermédiaire
@@ -338,8 +344,8 @@ l10n:
     Guide_Loops: 循环与迭代
     Guide_Functions: 函数
     Guide_Expressions: 表达式与运算符
-    Guide_Numbers: 数字和日期
-    Guide_Text: 文本格式化
+    Guide_Numbers: 数字与字符串
+    Guide_Dates: 表达日期与时间
     Guide_RegExp: 正则表达式
     Guide_Indexed_collections: 索引集合类
     Guide_keyed_collections: 带键的集合
@@ -348,6 +354,7 @@ l10n:
     Guide_Promises: 使用 Promise
     Guide_Typed_arrays: JavaScript 类型化数组
     Guide_Iterators_generators: 迭代器和生成器
+    Guide_Internationalization: 国际化
     Guide_Meta: 元编程
     Guide_Modules: JavaScript 模块
     Intermediate: 中级
@@ -384,8 +391,8 @@ l10n:
     Guide_Loops: ループとイテレーター
     Guide_Functions: 関数
     Guide_Expressions: 式と演算子
-    Guide_Numbers: 数と日付
-    Guide_Text: テキスト処理
+    Guide_Numbers: Numbers and strings
+    Guide_Dates: Representing dates & times
     Guide_RegExp: 正規表現
     Guide_Indexed_collections: インデックス付きコレクション
     Guide_keyed_collections: キー付きコレクション
@@ -394,6 +401,7 @@ l10n:
     Guide_Promises: プロミスの使用
     Guide_Typed_arrays: JavaScript 型付き配列
     Guide_Iterators_generators: イテレーターとジェネレーター
+    Guide_Internationalization: Internationalization
     Guide_Meta: メタプログラミング
     Guide_Modules: JavaScript モジュール
     Intermediate: 中級編
@@ -430,8 +438,8 @@ l10n:
     Guide_Loops: 루프와 반복
     Guide_Functions: 함수
     Guide_Expressions: 표현식과 연산자
-    Guide_Numbers: 숫자와 날짜
-    Guide_Text: 텍스트 서식
+    Guide_Numbers: Numbers and strings
+    Guide_Dates: Representing dates & times
     Guide_RegExp: 정규 표현식
     Guide_Indexed_collections: index 기반의 컬렉션
     Guide_keyed_collections: key 기반의 컬렉션
@@ -440,6 +448,7 @@ l10n:
     Guide_Promises: promise 사용하기
     Guide_Typed_arrays: JavaScript 형식화 배열
     Guide_Iterators_generators: 반복기와 생성기
+    Guide_Internationalization: Internationalization
     Guide_Meta: 메타 프로그래밍
     Guide_Modules: JavaScript 모듈
     Intermediate: 중급서
@@ -476,8 +485,8 @@ l10n:
     Guide_Loops: Repetição e iteração
     Guide_Functions: Funções
     Guide_Expressions: Expressões e operadores
-    Guide_Numbers: Números e datas
-    Guide_Text: Formatação de texto
+    Guide_Numbers: Numbers and strings
+    Guide_Dates: Representing dates & times
     Guide_RegExp: Expressões Regulares
     Guide_Indexed_collections: Coleções indexadas
     Guide_keyed_collections: Coleções com chave (chave-valor)
@@ -486,6 +495,7 @@ l10n:
     Guide_Promises: Usando "promises"
     Guide_Typed_arrays: Arranjos tipados em JavaScript
     Guide_Iterators_generators: Iteradores e geradores
+    Guide_Internationalization: Internationalization
     Guide_Meta: Metaprogramação
     Guide_Modules: JavaScript modules
     Intermediate: Intermediário

From 0785ed06b89a60d6df673504d84e276852017c92 Mon Sep 17 00:00:00 2001
From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com>
Date: Wed, 15 Jan 2025 01:27:29 +0100
Subject: [PATCH 028/102] fix: auto-cleanup by bot (#37655)

chore: auto-fix Markdownlint, Prettier, and front-matter issues
---
 files/en-us/web/css/attr/index.md                             | 2 +-
 files/en-us/web/javascript/guide/numbers_and_strings/index.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/en-us/web/css/attr/index.md b/files/en-us/web/css/attr/index.md
index f905b3c24ffb9a5..f020515c40cc6d8 100644
--- a/files/en-us/web/css/attr/index.md
+++ b/files/en-us/web/css/attr/index.md
@@ -72,7 +72,7 @@ The parameters are:
 
       For [security reasons](#limitations_and_security) {{CSSxRef("<url>")}} is not allowed as a ``.
 
-    - The `` identifier specifies the unit a numeric value should have (if any). It can be the `%` character (percentage) or a [CSS distance unit](/docs/Web/CSS/CSS_Values_and_Units#distance_units) such as `px`, `rem`, `deg`, `s`, etc.
+    - The `` identifier specifies the unit a numeric value should have (if any). It can be the `%` character (percentage) or a [CSS distance unit](/en-US/docs/Web/CSS/CSS_Values_and_Units#distance_units) such as `px`, `rem`, `deg`, `s`, etc.
 
       ```css
       attr(data-size rem)
diff --git a/files/en-us/web/javascript/guide/numbers_and_strings/index.md b/files/en-us/web/javascript/guide/numbers_and_strings/index.md
index 8e79dcc06dde841..c54bb98603eb34a 100644
--- a/files/en-us/web/javascript/guide/numbers_and_strings/index.md
+++ b/files/en-us/web/javascript/guide/numbers_and_strings/index.md
@@ -372,7 +372,7 @@ The following methods are available on {{jsxref("String")}} values:
 - Decomposition: break a string into smaller strings. Methods include {{jsxref("String/split", "split()")}}, {{jsxref("String/slice", "slice()")}}, {{jsxref("String/substring", "substring()")}}, {{jsxref("String/substr", "substr()")}}, {{jsxref("String/trim", "trim()")}}, {{jsxref("String/trimStart", "trimStart()")}}, and {{jsxref("String/trimEnd", "trimEnd()")}}.
 - Transformation: return a new string based on the current string's content. Methods include {{jsxref("String/toLowerCase", "toLowerCase()")}}, {{jsxref("String/toUpperCase", "toUpperCase()")}}, {{jsxref("String/toLocaleLowerCase", "toLocaleLowerCase()")}}, {{jsxref("String/toLocaleUpperCase", "toLocaleUpperCase()")}}, {{jsxref("String/normalize", "normalize()")}}, and {{jsxref("String/toWellFormed", "toWellFormed()")}}.
 
-When working with strings, there are two other objects that provide important functionality for string manipulation: {{jsxref("RegExp")}} and {{jsxref("Intl")}}. They are introduced in [regular expressions](/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) and [internationalization](/en-US/docs/Web/JavaScript/Guide/Internationalization) respectively.
+When working with strings, there are two other objects that provide important functionality for string manipulation: {{jsxref("RegExp")}} and {{jsxref("Intl")}}. They are introduced in [regular expressions](/en-US/docs/Web/JavaScript/Guide/Regular_expressions) and [internationalization](/en-US/docs/Web/JavaScript/Guide/Internationalization) respectively.
 
 ## Template literals
 

From 3344de5f35ac61024cb699883754090ed29b6f96 Mon Sep 17 00:00:00 2001
From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com>
Date: Wed, 15 Jan 2025 06:48:42 +0530
Subject: [PATCH 029/102] Synchronize with BCD v5.6.30 (#37656)

Co-authored-by: OnkarRuikar 
---
 files/en-us/web/css/writing-mode/index.md      | 10 +++++-----
 files/en-us/web/manifest/share_target/index.md |  3 ++-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/files/en-us/web/css/writing-mode/index.md b/files/en-us/web/css/writing-mode/index.md
index 3be95ef82d0fdca..85de61f2926558f 100644
--- a/files/en-us/web/css/writing-mode/index.md
+++ b/files/en-us/web/css/writing-mode/index.md
@@ -45,17 +45,17 @@ The `writing-mode` property is specified as one of the values listed below. The
   - : For `ltr` scripts, content flows vertically from top to bottom. For `rtl` scripts, content flows vertically from bottom to top. All the glyphs, even those in vertical scripts, are set sideways toward the right.
 - `sideways-lr`
   - : For `ltr` scripts, content flows vertically from bottom to top. For `rtl` scripts, content flows vertically from top to bottom. All the glyphs, even those in vertical scripts, are set sideways toward the left.
-- `lr` {{Deprecated_Inline}}
+- `lr`
   - : Deprecated except for SVG1 documents. For CSS, use `horizontal-tb` instead.
-- `lr-tb` {{Deprecated_Inline}}
+- `lr-tb`
   - : Deprecated except for SVG1 documents. For CSS, use `horizontal-tb` instead.
-- `rl` {{Deprecated_Inline}}
+- `rl`
   - : Deprecated except for SVG1 documents. For CSS, use `horizontal-tb` instead.
-- `tb` {{Deprecated_Inline}}
+- `tb`
   - : Deprecated except for SVG1 documents. For CSS, use `vertical-lr` instead.
 - `tb-lr` {{Deprecated_Inline}}
   - : Deprecated except for SVG1 documents. For CSS, use `vertical-lr` instead.
-- `tb-rl` {{Deprecated_Inline}}
+- `tb-rl`
   - : Deprecated except for SVG1 documents. For CSS, use `vertical-rl` instead.
 
 ## Formal definition
diff --git a/files/en-us/web/manifest/share_target/index.md b/files/en-us/web/manifest/share_target/index.md
index 500e64ab6608250..860d2fcedf50f5e 100644
--- a/files/en-us/web/manifest/share_target/index.md
+++ b/files/en-us/web/manifest/share_target/index.md
@@ -4,10 +4,11 @@ slug: Web/Manifest/share_target
 page-type: web-manifest-member
 status:
   - experimental
+  - non-standard
 browser-compat: html.manifest.share_target
 ---
 
-{{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}}{{SeeCompatTable}}
+{{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}}{{SeeCompatTable}}{{non-standard_header}}
 
 The `share_target` manifest member allows installed {{Glossary("Progressive Web Apps")}} (PWAs) to be registered as a share target in the system's share dialog.
 

From a731cff4afe1132e84c29c3044c9ac4a58888f46 Mon Sep 17 00:00:00 2001
From: younisayoub <143106292+younisdev@users.noreply.github.com>
Date: Wed, 15 Jan 2025 10:32:14 +0200
Subject: [PATCH 030/102] Fix multiple typos in `justify-items`, `align-items`,
 `place-self` documentation: change 'an intrinsic sizes' to 'an intrinsic
 size'. (#37654)

* Fix typo in 'align-items' documentation: change 'an intrinsic sizes' to 'an intrinsic size'

* Fix typo in 'justify-items' documentation: change 'an intrinsic sizes' to 'an intrinsic size'

* Fix typo in 'place-self' documentation: change 'an intrinsic sizes' to 'an intrinsic size'
---
 files/en-us/web/css/align-items/index.md   | 2 +-
 files/en-us/web/css/justify-items/index.md | 2 +-
 files/en-us/web/css/place-self/index.md    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/files/en-us/web/css/align-items/index.md b/files/en-us/web/css/align-items/index.md
index 93d41aa8fc95d42..55753464726b85b 100644
--- a/files/en-us/web/css/align-items/index.md
+++ b/files/en-us/web/css/align-items/index.md
@@ -55,7 +55,7 @@ align-items: unset;
     - In absolutely-positioned layouts, the keyword behaves like `start` on _replaced_ absolutely-positioned boxes, and as `stretch` on _all other_ absolutely-positioned boxes.
     - In static position of absolutely-positioned layouts, the keyword behaves as `stretch`.
     - For flex items, the keyword behaves as `stretch`.
-    - For grid items, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an {{glossary("aspect ratio")}} or an intrinsic sizes where it behaves like `start`.
+    - For grid items, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an {{glossary("aspect ratio")}} or an intrinsic size where it behaves like `start`.
     - The property doesn't apply to block-level boxes, and to table cells.
 
 - `center`
diff --git a/files/en-us/web/css/justify-items/index.md b/files/en-us/web/css/justify-items/index.md
index 2874c0b27f5805d..d7b4619668dc5c4 100644
--- a/files/en-us/web/css/justify-items/index.md
+++ b/files/en-us/web/css/justify-items/index.md
@@ -75,7 +75,7 @@ This property can take one of four different forms:
     - In absolutely-positioned layouts, the keyword behaved like `start` on _replaced_ absolutely-positioned boxes, and as `stretch` on _all other_ absolutely-positioned boxes.
     - In table cell layouts, this keyword has no meaning as this property is _ignored_.
     - In flexbox layouts, this keyword has no meaning as this property is _ignored._
-    - In grid layouts, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like `start`.
+    - In grid layouts, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic size where it behaves like `start`.
 - `start`
   - : The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.
 - `end`
diff --git a/files/en-us/web/css/place-self/index.md b/files/en-us/web/css/place-self/index.md
index 45bb89dccc9d189..5502b2b40f00d2c 100644
--- a/files/en-us/web/css/place-self/index.md
+++ b/files/en-us/web/css/place-self/index.md
@@ -58,7 +58,7 @@ place-self: unset;
     - In absolutely-positioned layouts, the keyword behaves like `start` on _replaced_ absolutely-positioned boxes, and as `stretch` on _all other_ absolutely-positioned boxes.
     - In static position of absolutely-positioned layouts, the keyword behaves as `stretch`.
     - For flex items, the keyword behaves as `stretch`.
-    - For grid items, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an {{glossary("aspect ratio")}} or an intrinsic sizes where it behaves like `start`.
+    - For grid items, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an {{glossary("aspect ratio")}} or an intrinsic size where it behaves like `start`.
     - The property doesn't apply to block-level boxes, and to table cells.
 
 - `self-start`

From cdee0a0dd113ba64e8727dc82b42e0211fd27134 Mon Sep 17 00:00:00 2001
From: James Nurthen 
Date: Wed, 15 Jan 2025 00:33:12 -0800
Subject: [PATCH 031/102] remove must which is not normative (#37653)

Musts in MDN are being misinterpreted as normative requirements. There is no MUST requirement here in the ARIA spec (it is a should) so MDN should not introduce one
---
 .../web/accessibility/aria/roles/alertdialog_role/index.md      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/aria/roles/alertdialog_role/index.md b/files/en-us/web/accessibility/aria/roles/alertdialog_role/index.md
index 2dabe72659a8947..212c3488a535f2e 100644
--- a/files/en-us/web/accessibility/aria/roles/alertdialog_role/index.md
+++ b/files/en-us/web/accessibility/aria/roles/alertdialog_role/index.md
@@ -22,7 +22,7 @@ As the name implies, `alertdialog` is a mashup of the [`dialog`](/en-US/docs/Web
 
 Being a type of dialog, the [`dialog`](/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) role's states, properties, and keyboard focus requirements are applicable to the `alertdialog` role as well.
 
-Because of its urgent nature, interrupting the user's workflow, alert dialogs must always be [modal](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal).
+Because of its urgent nature, interrupting the user's workflow, alert dialogs should be [modal](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal).
 
 The alert dialog must have at least one focusable control — such as Confirm, Close, and Cancel — and focus must be moved to that control when the alert dialog appears. Alert dialogs can have additional interactive controls such as text fields and checkboxes.
 

From 4630ec673ad963bfa36a02a2c5d3f1d21c27a5d0 Mon Sep 17 00:00:00 2001
From: Gleb BUSHUKIN <58744878+NemoZon@users.noreply.github.com>
Date: Wed, 15 Jan 2025 09:36:50 +0100
Subject: [PATCH 032/102] Use "it" in 2 places on order page to avoid
 repetition (#37648)

Update index.md
---
 files/en-us/web/css/order/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/en-us/web/css/order/index.md b/files/en-us/web/css/order/index.md
index 2a86349fb6dd375..33506e12dc81a6b 100644
--- a/files/en-us/web/css/order/index.md
+++ b/files/en-us/web/css/order/index.md
@@ -30,9 +30,9 @@ order: revert-layer;
 order: unset;
 ```
 
-Since `order` is only meant to affect the _visual order_ of elements and not their logical or tab order. `order` must not be used on non-visual media such as [speech](/en-US/docs/Web/CSS/@media#speech).
+Since `order` is only meant to affect the _visual order_ of elements and not their logical or tab order, it must not be used on non-visual media such as [speech](/en-US/docs/Web/CSS/@media#speech).
 
-Defined in the [CSS display](/en-US/docs/Web/CSS/CSS_display) module, this property impacts only grid and flex items. When `order` is set on an element whose parent's {{cssxref("display")}} property is not creating a flex or grid container, the `order` property has no effect.
+Defined in the [CSS display](/en-US/docs/Web/CSS/CSS_display) module, this property impacts only grid and flex items. When `order` is set on an element whose parent's {{cssxref("display")}} property is not creating a flex or grid container, it has no effect.
 
 ### Values
 

From e03cb03f8e0529e5052b953b4e66bad17f9f8320 Mon Sep 17 00:00:00 2001
From: Flying Hawk <140573524+SurajKharkwal@users.noreply.github.com>
Date: Wed, 15 Jan 2025 14:10:19 +0530
Subject: [PATCH 033/102] flex-basis: 0/0%: Fix: Issue #37597 (#37601)

Fix: Issue #37597

Fix: #37597

Fix: Issue #37597

Fix: Issue #37597
---
 files/en-us/web/css/flex-basis/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/en-us/web/css/flex-basis/index.md b/files/en-us/web/css/flex-basis/index.md
index d0a842d09136451..2524fde44c6ef5d 100644
--- a/files/en-us/web/css/flex-basis/index.md
+++ b/files/en-us/web/css/flex-basis/index.md
@@ -176,7 +176,7 @@ This example demonstrates the difference between a `flex-basis` of `0` versus a
 
 #### HTML
 
-We include two same-structure flex containers. These which will be styled similarly, except for their `flex-basis` values. The containers each have two children: a heading `
` and a `
`. The `
` element has a content `
` child, which will not be set as a flex item but will be given a height.
+We include two same-structure flex containers, which will be styled similarly except for their `flex-basis` values. The containers each have two children: a heading `
` and a `
`. The `
` element has a content `
` child, which will not be set as a flex item but will be given a height.
 
 ```html
 

@@ -197,7 +197,7 @@ We include two same-structure flex containers. These which will be styled simila
 
 #### CSS
 
-We style the containers as inline flex containers that will appear side by side to better enable comparing them. We set the `flex-direction` to the column. The first container's flex items have a `flex-basis` value of `0` and the second container's flex item have a `flex-basis` value of `0%`. Neither the flex containers nor their flex items have a height explicitly set, but the heights of `section` elements can not exceed `200px` and their children have height `300px`.
+We style the containers as inline flex containers that will appear side by side to better enable comparing them. We set the `flex-direction` to `column`. The first container's flex items have a `flex-basis` value of `0`, while the second container's flex items have a `flex-basis` value of `0%`. Neither the flex containers nor their flex items have a height explicitly set, but the heights of `section` elements cannot exceed `200px` and their children have a height of `300px`.
 
 ```css
 .container {

From 49106bd93693d889ff792dada676bdf62350d422 Mon Sep 17 00:00:00 2001
From: Estelle Weyl 
Date: Wed, 15 Jan 2025 10:27:02 -0800
Subject: [PATCH 034/102] CSS module: box alignment (#37566)

* CSS module: box alignment

* CSS module: box alignment

* related

* Apply suggestions from code review

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/css_box_alignment/index.md

Co-authored-by: Chris Mills 

* Update files/en-us/web/css/css_box_alignment/index.md

Co-authored-by: Chris Mills 

* edits per review

* edits per review

* link text

* Fix suggestion snafu

---------

Co-authored-by: Chris Mills 
---
 .../glossary/baseline/typography/index.md     |   2 +-
 .../mozilla/firefox/releases/61/index.md      |   2 +-
 .../align-container-subjects.png              | Bin
 .../css_box_alignment/box_alignment/index.md  | 288 +++++++++++++++
 .../justify-content-space-between.png         | Bin
 .../justify-content-start.png                 | Bin
 .../{ => box_alignment}/two-axes.png          | Bin
 .../writing-mode-start.png                    | Bin
 .../index.md                                  |  22 +-
 .../box_alignment_in_flexbox/index.md         |  36 +-
 .../box_alignment_in_grid_layout/index.md     |  53 ++-
 .../index.md                                  |  30 +-
 .../en-us/web/css/css_box_alignment/index.md  | 334 +++---------------
 .../svg/attribute/alignment-baseline/index.md |   2 +-
 14 files changed, 387 insertions(+), 382 deletions(-)
 rename files/en-us/web/css/css_box_alignment/{ => box_alignment}/align-container-subjects.png (100%)
 create mode 100644 files/en-us/web/css/css_box_alignment/box_alignment/index.md
 rename files/en-us/web/css/css_box_alignment/{ => box_alignment}/justify-content-space-between.png (100%)
 rename files/en-us/web/css/css_box_alignment/{ => box_alignment}/justify-content-start.png (100%)
 rename files/en-us/web/css/css_box_alignment/{ => box_alignment}/two-axes.png (100%)
 rename files/en-us/web/css/css_box_alignment/{ => box_alignment}/writing-mode-start.png (100%)

diff --git a/files/en-us/glossary/baseline/typography/index.md b/files/en-us/glossary/baseline/typography/index.md
index f7387b5bae6749b..45199bd983d17a1 100644
--- a/files/en-us/glossary/baseline/typography/index.md
+++ b/files/en-us/glossary/baseline/typography/index.md
@@ -14,6 +14,6 @@ Other writing systems have different baselines. For example, Tibetan and similar
 
 ## See also
 
-- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment#types_of_alignment)
+- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment#types_of_alignment)
 - [CSS inline layout](/en-US/docs/Web/CSS/CSS_inline_layout) module
 - [Baseline (Typography)]() on Wikipedia
diff --git a/files/en-us/mozilla/firefox/releases/61/index.md b/files/en-us/mozilla/firefox/releases/61/index.md
index 70885cc7f3ca58e..7fcddb57567119a 100644
--- a/files/en-us/mozilla/firefox/releases/61/index.md
+++ b/files/en-us/mozilla/firefox/releases/61/index.md
@@ -36,7 +36,7 @@ _No changes._
 
 - CSS parsing has been parallelized ([Firefox bug 1346988](https://bugzil.la/1346988)).
 - Support for {{cssxref("font-variation-settings")}} and {{cssxref("font-optical-sizing")}} has been enabled by default ([Firefox bug 1447163](https://bugzil.la/1447163)).
-- The `grid-gap`, `grid-row-gap`, and `grid-column-gap` properties have been renamed to {{cssxref("gap")}}, {{cssxref("row-gap")}}, and {{cssxref("column-gap")}}, as they are no longer grid-specific ([Firefox bug 1398482](https://bugzil.la/1398482)). See [Box alignment; Gaps between boxes](/en-US/docs/Web/CSS/CSS_box_alignment#gaps_between_boxes) for additional details. The old names have been kept as aliases for web compatibility purposes.
+- The `grid-gap`, `grid-row-gap`, and `grid-column-gap` properties have been renamed to {{cssxref("gap")}}, {{cssxref("row-gap")}}, and {{cssxref("column-gap")}}, as they are no longer grid-specific ([Firefox bug 1398482](https://bugzil.la/1398482)). See [Box alignment; Gaps between boxes](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment#gaps_between_boxes) for additional details. The old names have been kept as aliases for web compatibility purposes.
 - The {{cssxref("flex-basis")}} `content` value is now supported ([Firefox bug 1105111](https://bugzil.la/1105111)).
 - Percentage values of {{cssxref("column-gap")}} are now supported in [CSS multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout) ([Firefox bug 1398537](https://bugzil.la/1398537)).
 - The CSS {{cssxref(":host")}} pseudo-class is now supported; this selects a custom element from inside its shadow DOM ([Firefox bug 992245](https://bugzil.la/992245)).
diff --git a/files/en-us/web/css/css_box_alignment/align-container-subjects.png b/files/en-us/web/css/css_box_alignment/box_alignment/align-container-subjects.png
similarity index 100%
rename from files/en-us/web/css/css_box_alignment/align-container-subjects.png
rename to files/en-us/web/css/css_box_alignment/box_alignment/align-container-subjects.png
diff --git a/files/en-us/web/css/css_box_alignment/box_alignment/index.md b/files/en-us/web/css/css_box_alignment/box_alignment/index.md
new file mode 100644
index 000000000000000..9794afb81ba96de
--- /dev/null
+++ b/files/en-us/web/css/css_box_alignment/box_alignment/index.md
@@ -0,0 +1,288 @@
+---
+title: CSS box alignment overview
+slug: Web/CSS/CSS_box_alignment/box_alignment
+page-type: guide
+---
+
+{{CSSRef}}
+
+The [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module specifies CSS features that relate to the alignment of boxes in the various CSS box layout models. The module aims to create a consistent method of alignment across all of CSS. The CSS box alignment properties provide full horizontal and vertical alignment capabilities.
+
+This guide details the general concepts found in this module. Additional guides provide more information on box alignment in [flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox), [grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout), [multiple-column layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout), and [block, absolutely positioned and table layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables). Alignment of text is covered by the [CSS text](/en-US/docs/Web/CSS/CSS_text) and [CSS inline layout](/en-US/docs/Web/CSS/CSS_inline_layout) modules.
+
+## Key concepts and terminology
+
+The specification details some alignment terminology to make it easier to discuss these alignment properties outside their implementation within a particular layout method. There are also some key concepts which are common to all layout methods.
+
+### Relationship to writing modes
+
+Alignment is linked to writing modes in that when we align an item we do not consider whether we are aligning it to the physical dimensions of top, right, bottom and left. Instead we describe alignment in terms of the start and end of the particular dimension we are working with. This ensures that alignment works in the same way whichever writing mode the document has.
+
+### Two dimensions of alignment
+
+When using the box alignment properties you will align content on one of two axes — the inline (or main) axis, and the block (or cross) axis. The inline axis is the axis along which words in a sentence flow in the writing mode being used. For English, for example, the inline axis is horizontal. The block axis is the axis along which blocks, such as paragraph elements, are laid out; it runs across the Inline axis.
+
+![Inline axis is the left / right, or horizontal, direction. Block axis is vertical, or top / bottom.](two-axes.png)
+
+When aligning items on the inline axis you will use the properties that begin with `justify-`:
+
+- {{cssxref("justify-items")}}
+- {{cssxref("justify-self")}}
+- {{cssxref("justify-content")}}
+
+When aligning items on the block axis you will use the properties that begin with `align-`:
+
+- {{cssxref("align-items")}}
+- {{cssxref("align-self")}}
+- {{cssxref("align-content")}}
+
+Flexbox adds an additional complication in that the above is true when {{cssxref("flex-direction")}} is set to `row`. The properties are swapped when flexbox is set to `column`. Therefore, when working with flexbox it is easier to think about the main and cross axis rather than inline and block. The `justify-` properties are always used to align on the main axis, the `align-` properties on the cross axis.
+
+### The alignment subject
+
+The **{{Glossary("alignment subject")}}** is the thing that is being aligned. For `justify-self` or `align-self`, or when setting these values as a group with `justify-items` or `align-items`, this will be the margin box of the element that this property is being used on. The `justify-content` and `align-content` properties differ per layout method.
+
+### The alignment container
+
+The **{{Glossary("alignment container")}}** is the box the subject is being aligned inside. This will typically be the alignment subject's containing block. An alignment container may contain one or many alignment subjects.
+
+The below image shows an alignment container with two alignment subjects inside.
+
+![A box containing two rectangles of the same width but different heights. The two rectangles are top aligned, meaning they both have their top lines about 10px inside the top of the box in which they are contained.](align-container-subjects.png)
+
+## Types of alignment
+
+There are three different types of alignment that the specification details; these use keyword values.
+
+- [Positional alignment](#positional-alignment)
+- [Baseline alignment](#baseline-alignment)
+- [Distributed alignment](#distributed-alignment)
+
+### Positional alignment
+
+**Positional alignment** is the position of an alignment subject with relation to its alignment container. The positional alignment keyword values are defined for positional alignment, and can be used as values for content alignment with `justify-content` and `align-content` and also for self alignment with `justify-self` and `align-self`.
+
+- `center`
+- `start`
+- `end`
+- `self-start`
+- `self-end`
+- `flex-start` for flexbox only
+- `flex-end` for flexbox only
+- `left`
+- `right`
+
+Other than the physical values of `left` and `right`, which relate to physical attributes of the screen, all of the other values, the {{cssxref("self-position")}} and {{cssxref("content-position")}} values, are logical values and relate to the writing mode of the content.
+
+For example, when working in CSS grid layout, if you are working in English and set `justify-content` to `start` this will move the items in the inline dimension to the start, which will be the left as sentences in English start on the left-hand side of the page. If you were using Arabic, a right-to-left language, then the same value of `start` would result in the items moving to the right, as sentences in Arabic start on the right-hand side of the page.
+
+![There are two boxes, each with 3 children of differing heights but similar widths. The first box has three children with the letters A, B, and C. These three boxes are all aligned to the left. The second box has three children with arabic letters in them. Those three boxes are all aligned to the right.](writing-mode-start.png)
+
+Both have `justify-content: start`, but the location of the two starts is different because of the writing mode.
+
+### Baseline alignment
+
+**Baseline alignment** is the relationship among the baselines of multiple alignment subjects within an alignment context. The Baseline alignment {{cssxref("baseline-position")}} keywords are used to align the baselines of boxes across a group of alignment subjects. They can be used as values for content alignment with `justify-content` and `align-content` and self-alignment with `justify-self` and `align-self`.
+
+- `baseline`
+- `first baseline`
+- `last baseline`
+
+Baseline content alignment — specifying a baseline alignment value for `justify-content` or `align-content` — works in layout methods that lay items out in rows. The alignment subjects are baseline aligned against each other by adding padding inside the boxes.
+
+Baseline self-alignment shifts the boxes to align by baseline by adding a margin outside the boxes. Self-alignment is done for singular boxes using `justify-self` or `align-self`, or for groups of boxes using `justify-items` and `align-items`.
+
+### Distributed alignment
+
+**Distributed alignment** defines alignment as a distribution of space among alignment subjects. The distributed alignment {{cssxref("content-distribution")}} keywords are used with the `align-content` and `justify-content` properties. These keywords define what happens to any additional space after alignment subjects have been displayed. The values are as follows:
+
+- `stretch`
+- `space-between`
+- `space-around`
+- `space-evenly`
+
+For example, in Flex Layout items are aligned with `flex-start` initially. Working in a horizontal top-to-bottom writing mode (with a language such as English), with `flex-direction` set to `row`, the items start on the far left, and any available space after displaying the items is placed after them.
+
+![Three rectangles of different widths are inside a box. They are all aligned to the left side of the containing box, with about 10px between them, and 10px between the left side of the first rectangle and the parent container.](justify-content-start.png)
+
+If you set `justify-content: space-between` on the flex container, the available space is now shared out and placed between the items.
+
+![Three rectangles of different widths are inside a box. The first rectangle is aligned to the left side of the containing box, the third rectangle is aligned right, and the middle rectangle is equally spaced between the first and last.](justify-content-space-between.png)
+
+For these keywords to take effect, space is required along the dimension in which you wish to align the items. With no space, there is nothing to distribute.
+
+### Basic examples
+
+The following examples demonstrate how some of the box alignment properties are applied in [Grid](/en-US/docs/Web/CSS/CSS_grid_layout) and [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout).
+
+#### CSS grid layout alignment example
+
+In this grid layout example, there is extra space in the grid container after laying out the fixed-width tracks on the inline (main) axis. This space is distributed using {{cssxref("justify-content")}}. On the block (cross) axis, the alignment of the items inside their grid areas is controlled with {{cssxref("align-items")}}. The first item overrides the `align-items` value set on the group by setting {{cssxref("align-self")}} to `center`.
+
+```html live-sample___grid-align-items
+

+  
One

+  
Two

+  
Three 
has 
extra 
text

+  
Four

+  
Five

+  
Six

+

+```
+
+```css hidden live-sample___grid-align-items
+body {
+  font: 1.2em sans-serif;
+}
+
+.box {
+  border: 2px dotted rgb(96 139 168);
+}
+
+.box > * {
+  padding: 20px;
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  background-color: rgb(96 139 168 / 0.2);
+}
+```
+
+```css live-sample___grid-align-items
+.box {
+  display: grid;
+  grid-template-columns: 120px 120px 120px;
+  align-items: start;
+  justify-content: space-between;
+}
+
+.box :first-child {
+  align-self: center;
+}
+```
+
+{{EmbedLiveSample("grid-align-items", "", "200px")}}
+
+#### Flexbox Alignment Example
+
+In this example, three flex items are aligned on the main axis using `justify-content` and on the cross axis using `align-items`. The first item overrides the `align-items` set on the group by setting `align-self` to `center`.
+
+```html live-sample___flex-align-items
+

+  
One

+  
Two

+  
Three 
has 
extra 
text

+

+```
+
+```css hidden live-sample___flex-align-items
+body {
+  font: 1.2em sans-serif;
+}
+
+.box {
+  border: 2px dotted rgb(96 139 168);
+}
+
+.box > * {
+  padding: 20px;
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  background-color: rgb(96 139 168 / 0.2);
+}
+```
+
+```css live-sample___flex-align-items
+.box {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.box :first-child {
+  align-self: center;
+}
+```
+
+{{EmbedLiveSample("flex-align-items")}}
+
+## Overflow alignment
+
+The {{cssxref("overflow-position")}} keywords `safe` and `unsafe` help define behavior when an alignment subject is larger than the alignment container. The `safe` keyword will align to `start` in the case of a specified alignment causing an overflow, the aim being to avoid "data loss" where part of the item is outside the boundaries of the alignment container and can't be scrolled to.
+
+If you specify `unsafe` then the alignment will be honoured even if it would cause such data loss.
+
+## Gaps between boxes
+
+The box alignment specification also includes the `gap`, `row-gap`, and `column-gap` properties. These properties enable the setting of a consistent gap between items in a row or column, in any layout method which has items arranged in this way.
+
+The `gap` property is a shorthand for `row-gap` and `column-gap`, which allows us to set these properties at once:
+
+- {{cssxref("row-gap")}}
+- {{cssxref("column-gap")}}
+- {{cssxref("gap")}}
+
+In the below example, a grid layout uses the `gap` shorthand to set a `10px` gap between row tracks, and a `2em` gap between column tracks.
+
+```html live-sample___grid-gap
+

+  
One

+  
Two

+  
Three

+  
Four

+  
Five

+  
Six

+

+```
+
+```css hidden live-sample___grid-gap
+body {
+  font: 1.2em sans-serif;
+}
+
+.box {
+  border: 2px dotted rgb(96 139 168);
+}
+
+.box > * {
+  padding: 20px;
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  background-color: rgb(96 139 168 / 0.2);
+}
+```
+
+```css live-sample___grid-gap
+.box {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 10px 2em;
+}
+
+.box :first-child {
+  align-self: center;
+}
+```
+
+{{EmbedLiveSample("grid-gap")}}
+
+Early grid implementations included `gap` properties prefixed with `grid-`. All browsers support the unprefixed properties, though you may see the following properties in a code-base: {{cssxref("row-gap", "grid-row-gap")}}, {{cssxref("column-gap", "grid-column-gap")}}, and {{cssxref("gap", "grid-gap")}}. The prefixed versions are aliases of the unprefixed ones.
+
+Be aware that other things may increase the visual gap displayed, for example using the space distribution keywords or adding margins to items.
+
+## Box-alignment by layout type
+
+As the CSS box alignment properties are implemented differently depending on the specification they interact with, refer to the following guides for details of how to use the alignment properties with each layout type:
+
+- [Box alignment in flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox)
+- [Box alignment in CSS grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout)
+- [Box alignment in multiple-column layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout)
+- [Box alignment for block, absolutely positioned and table layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables)
+
+## See also
+
+- [CSS display](/en-US/docs/Web/CSS/CSS_display) module
+- [CSS flex layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
+- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
+- [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
+- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module
+- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
diff --git a/files/en-us/web/css/css_box_alignment/justify-content-space-between.png b/files/en-us/web/css/css_box_alignment/box_alignment/justify-content-space-between.png
similarity index 100%
rename from files/en-us/web/css/css_box_alignment/justify-content-space-between.png
rename to files/en-us/web/css/css_box_alignment/box_alignment/justify-content-space-between.png
diff --git a/files/en-us/web/css/css_box_alignment/justify-content-start.png b/files/en-us/web/css/css_box_alignment/box_alignment/justify-content-start.png
similarity index 100%
rename from files/en-us/web/css/css_box_alignment/justify-content-start.png
rename to files/en-us/web/css/css_box_alignment/box_alignment/justify-content-start.png
diff --git a/files/en-us/web/css/css_box_alignment/two-axes.png b/files/en-us/web/css/css_box_alignment/box_alignment/two-axes.png
similarity index 100%
rename from files/en-us/web/css/css_box_alignment/two-axes.png
rename to files/en-us/web/css/css_box_alignment/box_alignment/two-axes.png
diff --git a/files/en-us/web/css/css_box_alignment/writing-mode-start.png b/files/en-us/web/css/css_box_alignment/box_alignment/writing-mode-start.png
similarity index 100%
rename from files/en-us/web/css/css_box_alignment/writing-mode-start.png
rename to files/en-us/web/css/css_box_alignment/box_alignment/writing-mode-start.png
diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
index 750ee20c8c120bc..099b136e46171da 100644
--- a/files/en-us/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
+++ b/files/en-us/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
@@ -4,7 +4,7 @@ slug: Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables
 page-type: guide
 ---
 
-The [box alignment specification](/en-US/docs/Web/CSS/CSS_box_alignment) details how alignment works in various layout methods. In this page we explore how box alignment works in the context of block layout, including floated, positioned, and table elements. As this page aims to detail things which are specific to block layout and box alignment, it should be read in conjunction with the main [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) page, which details the common features of box alignment across layout methods.
+The [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module details how alignment works in various layout methods. In this guide, we explore how box alignment works in the context of block layout, including floated, positioned, and table elements. As this guide aims to detail things which are specific to block layout and box alignment, it should be read in conjunction with the [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide, which details the common features of box alignment across layout methods.
 
 ## align-content and justify-content
 
@@ -75,19 +75,9 @@ For many use cases, turning the block container into a flex item will give you t
 
 {{EmbedLiveSample("intro", "", "320px")}}
 
-## Reference
+## See also
 
-### CSS Properties
-
-- {{cssxref("justify-content")}}
-- {{cssxref("align-content")}}
-- {{cssxref("justify-self")}}
-- {{cssxref("align-self")}}
-
-### Glossary Entries
-
-- [Alignment subject](/en-US/docs/Glossary/Alignment_Subject)
-- [Alignment container](/en-US/docs/Glossary/Alignment_Container)
-- [Fallback alignment](/en-US/docs/Glossary/Fallback_Alignment)
-
-{{CSSRef}}
+- [Box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
+- [Box alignment in flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox)
+- [Box alignment in CSS grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout)
+- [Box alignment in multiple-column layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout)
diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md
index f624a620217c87d..6c535b9e539db94 100644
--- a/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md
+++ b/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md
@@ -6,11 +6,11 @@ page-type: guide
 
 {{CSSRef}}
 
-The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) Specification details how alignment works in various layout methods; on this page, we explore how box alignment works in the context of flexbox. As this page aims to detail things which are specific to flexbox and box alignment, it should be read in conjunction with the main [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) page which details the common features of box alignment across layout methods.
+The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module details how alignment works in various layout methods. In this guide, we explore how box alignment works in the context of [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox). As this guide aims to detail things which are specific to flexbox and box alignment, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide, which details the common features of box alignment across layout methods.
 
 ## Basic example
 
-In this example, three flex items are aligned on the main axis using {{cssxref("justify-content")}} and on the cross axis using {{cssxref("align-items")}}. The first item overrides the `align-items` values set on the group by setting {{cssxref("align-self")}} to `center`.
+In this flexbox example, three flex items are aligned on the main axis using {{cssxref("justify-content")}} and on the cross axis using {{cssxref("align-items")}}. The first item overrides the `align-items` values set on the group by setting {{cssxref("align-self")}} to `center`.
 
 ```html live-sample___flex-align-items
 

@@ -51,7 +51,7 @@ Flexbox respects the writing mode of the document, therefore if you are working
 However, in flexbox you can change the main axis by setting `flex-direction` to `column`. In this case, `justify-content` will align items in the block direction. Therefore it is easiest to think about the main and cross axis when working in flexbox like so:
 
 - The main axis = direction set by `flex-direction` = alignment via `justify-content`
-- The cross axis = runs across the main axis = alignment via `align-content`, `align-self`/`align-items`
+- The cross axis = runs across the main axis = alignment via {{cssxref("align-content")}}, {{cssxref("align-self")}}/{{cssxref("align-items")}}
 
 ### Main Axis Alignment
 
@@ -65,7 +65,7 @@ However, in flexbox you can change the main axis by setting `flex-direction` to
 
 ### There is no justify-self in flexbox
 
-On the main axis, Flexbox deals with our content as a group. The amount of space required to lay out the items is calculated, and the leftover space is then available for distribution. The `justify-content` property controls how that leftover space is used. Set `justify-content: flex-end` and the extra space is placed before the items, `justify-content: space-around` and it is placed either side of the item in that dimension, etc.
+On the main axis, Flexbox deals with the flex items as a group. The amount of space required to lay out the items is calculated, and the leftover space is then available for distribution. The `justify-content` property controls how that leftover space is used. Set `justify-content: flex-end` and the extra space is placed before the items, `justify-content: space-around` and it is placed either side of the item in that dimension, etc.
 
 This means that a `justify-self` property does not make sense in flexbox as we are always dealing with moving the entire group of items around.
 
@@ -118,7 +118,7 @@ By setting a {{cssxref("margin")}} of `auto` on one item in a set of flex items
 
 On the main axis, the `column-gap` property creates fixed size gaps between adjacent items.
 
-On the cross axis the `row-gap` property creates spacing between adjacent flex lines, therefore `flex-wrap` must also be set to `wrap` for this to have any effect.
+On the cross axis the `row-gap` property creates spacing between adjacent flex lines, therefore {{cssxref("flex-wrap")}} must also be set to `wrap` for this to have any effect.
 
 ```html live-sample___gap
 

@@ -157,26 +157,12 @@ On the cross axis the `row-gap` property creates spacing between adjacent flex l
 
 {{EmbedLiveSample("gap")}}
 
-## Reference
-
-### CSS Properties
-
-- {{cssxref("justify-content")}}
-- {{cssxref("align-content")}}
-- {{cssxref("place-content")}}
-- {{cssxref("justify-items")}}
-- {{cssxref("align-items")}}
-- {{cssxref("place-items")}}
-- {{cssxref("align-self")}}
-- {{cssxref("row-gap")}}
-- {{cssxref("column-gap")}}
-- {{cssxref("gap")}}
-
-### Glossary Entries
+## See also
 
+- [Box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
+- [Box alignment in CSS grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout)
+- [Box alignment in multiple-column layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout)
+- [Box alignment for block, absolutely positioned and table layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables)
+- [Alignment in flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
 - {{Glossary("Cross axis")}}
 - {{Glossary("Main axis")}}
-
-## Guides
-
-- [Alignment in flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md
index b18ef81173e3d18..f7dff9a24a30737 100644
--- a/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md
+++ b/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md
@@ -6,13 +6,13 @@ page-type: guide
 
 {{CSSRef}}
 
-The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) specification details how alignment works in various layout methods. On this page we explore how box alignment works in the context of [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout).
+The [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module details how alignment works in various layout methods. On this page, we explore how box alignment works in the context of [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout).
 
-As this page aims to detail things which are specific to CSS grid layout and Box Alignment, it should be read in conjunction with the main [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) page which details the common features of box alignment across layout methods.
+As this guide aims to detail things which are specific to CSS grid layout and Box Alignment, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide, which details the common features of box alignment across layout methods.
 
 ## Basic example
 
-In this example using grid layout, there is extra space in the grid container after laying out the fixed width tracks on the inline (main) axis. This space is distributed using `justify-content`. On the block (cross) axis the alignment of the items inside their grid areas is controlled with `align-items`. The first item overrides the `align-items` value set on the group by setting `align-self` to `center`.
+In this example using [grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout), there is extra space in the {{glossary("grid container")}} after laying out the fixed-width tracks on the inline {{glossary("main axis")}}. This space is distributed using {{cssxref("justify-content")}}. On the block {{glossary("cross axis")}} the alignment of the items inside their grid areas is controlled with {{cssxref("align-items")}}. The first item overrides the `align-items` value set on the group by setting {{cssxref("align-self")}} to `center`.
 
 {{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}
 
@@ -20,13 +20,13 @@ In this example using grid layout, there is extra space in the grid container af
 
 As a two-dimensional layout method, when working with grid layout we always have two axes on which to align our items. We have access to all of the box alignment properties to help us achieve this.
 
-The inline axis is the axis that corresponds to the direction that words in a sentence would run in the writing mode used. Therefore, in a horizontal language such as English or Arabic the inline direction runs horizontally. Should you be in a vertical writing mode the inline axis will run vertically.
+The inline axis is the axis that corresponds to the direction that words in a sentence would run in the writing mode used. Therefore, in a horizontal language such as English or Arabic, the inline direction runs horizontally. Should you be in a vertical writing mode, the inline axis will run vertically.
 
 ![Inline axes are horizontal.](inline_axis.png)
 
-To align things on the inline axis you use the properties that start with `justify-`, {{cssxref("justify-content")}}, {{cssxref("justify-items")}} and {{cssxref("justify-self")}}.
+To align things on the inline axis you use the properties that start with `justify-`: {{cssxref("justify-content")}}, {{cssxref("justify-items")}} and {{cssxref("justify-self")}}.
 
-The block axis crosses the inline axis in the direction that blocks are displayed down the page — for example paragraphs in English are displayed one below the other vertically. This, therefore is the block dimension.
+The block axis crosses the inline axis in the direction that blocks are displayed down the page — for example, paragraphs in English are displayed one below the other vertically. This is the block dimension.
 
 To align things on the block axis you use the properties that start with `align-`, {{cssxref("align-content")}}, {{cssxref("align-items")}} and {{cssxref("align-self")}}.
 
@@ -34,6 +34,8 @@ To align things on the block axis you use the properties that start with `align-
 
 ## Self alignment
 
+These properties deal with aligning the item inside the grid area it is placed into:
+
 - {{cssxref("justify-self")}}
 - {{cssxref("align-self")}}
 - {{cssxref("place-self")}}
@@ -41,50 +43,35 @@ To align things on the block axis you use the properties that start with `align-
 - {{cssxref("align-items")}}
 - {{cssxref("place-items")}}
 
-These properties deal with aligning the item inside the grid area it is placed into. The properties `align-items` and `justify-items` are applied to the grid container and set the `align-self` and `justify-self` properties as a group. This means that you can set alignment for all of your grid items at once, then override any items that need a different alignment by applying the `align-self` or `justify-self` property to the rules for the individual grid items.
+The `*-items` properties, `align-items` and `justify-items`, are applied to the grid container and set alignment for all grid items as a group. The `*-self` properties, `align-self` and `justify-self`, are instead set on grid items. This means that you can set alignment on all grid items, and then override any items that need a different alignment by applying the `align-self` or `justify-self` property to the rules for the individual grid items.
 
-The initial value for `align-self` and `justify-self` is `stretch` so the item will stretch over the entire grid area. The exception to this rule is where the item has an intrinsic {{glossary("aspect ratio")}}, for example an image. In this case the item will be aligned to `start` in both dimensions in order that the image is not distorted.
+The initial value for `align-items` and `justify-items` is `stretch`, and the initial value for `align-self` and `justify-self` is `auto`, so the item will stretch over the entire grid area. The exception to this rule is where the item has an intrinsic {{glossary("aspect ratio")}}, for example an image. In this case the item will be aligned to `start` in both dimensions in order that the image is not distorted.
 
 ## Content alignment
 
+These properties deal with aligning the tracks of the grid when there is extra space to distribute:
+
 - {{cssxref("justify-content")}}
 - {{cssxref("align-content")}}
 - {{cssxref("place-content")}}
 
-These properties deal with aligning the tracks of the grid when there is extra space to distribute. This scenario will occur if the tracks that you have defined total less than the total width of the grid container.
+This scenario will occur if the tracks that you have defined total less than the total width of the grid container.
 
 ## Gap and legacy grid-gap properties
 
-- {{cssxref("row-gap")}}
-- {{cssxref("column-gap")}}
-- {{cssxref("gap")}}
-
-The grid specification originally contained the definition for the properties {{cssxref("row-gap", "grid-row-gap")}}, {{cssxref("column-gap", "grid-column-gap")}} and {{cssxref("gap", "grid-gap")}}. These have since been moved into the Box Alignment specification and renamed to {{cssxref("row-gap")}}, {{cssxref("column-gap")}}, and {{cssxref("gap")}}. This allows them to be used for other layout methods where a gap between items makes sense.
-
-The updated properties have not yet been implemented in all browsers. Therefore, to use the gap properties in grid layout, you should use the `grid-row-gap`, `grid-column-gap` and `grid-gap` versions to ensure full compatibility. You could double up the properties and use both as you would for vendor prefixes.
-
-## Reference
-
-### CSS Properties
+These properties define the spacing between grid items within a grid container:
 
-- {{cssxref("justify-content")}}
-- {{cssxref("align-content")}}
-- {{cssxref("place-content")}}
-- {{cssxref("justify-items")}}
-- {{cssxref("align-items")}}
-- {{cssxref("place-items")}}
-- {{cssxref("justify-self")}}
-- {{cssxref("align-self")}}
-- {{cssxref("place-self")}}
 - {{cssxref("row-gap")}}
 - {{cssxref("column-gap")}}
 - {{cssxref("gap")}}
 
-### Glossary Entries
+The grid specification originally contained the definition for the properties {{cssxref("row-gap", "grid-row-gap")}}, {{cssxref("column-gap", "grid-column-gap")}} and {{cssxref("gap", "grid-gap")}}. These have since been moved into the Box Alignment specification and aliased to {{cssxref("row-gap")}}, {{cssxref("column-gap")}}, and {{cssxref("gap")}}. This allows them to be used for other layout methods where a gap between items makes sense.
 
-- [Cross axis](/en-US/docs/Glossary/Cross_Axis)
-- [Main axis](/en-US/docs/Glossary/Main_Axis)
+## See also
 
-## Guides
+- [Box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
+- [Box alignment in flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox)
+- [Box alignment in multiple-column layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout)
+- [Box alignment for block, absolutely positioned and table layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables)
 
 - [Alignment in grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
index 6cc200127aaad36..aada480e70b098d 100644
--- a/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
+++ b/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
@@ -6,33 +6,23 @@ page-type: guide
 
 {{CSSRef}}
 
-The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) specification details how alignment works in various layout methods; on this page we explore how Box Alignment works in the context of [multi-column Layout](/en-US/docs/Web/CSS/CSS_multicol_layout). As this page aims to detail things which are specific to Multi-column Layout and Box Alignment, it should be read in conjunction with the main [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) page which details the common features of Box Alignment across layout methods.
+The [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module details how alignment works in various layout methods; in this guide, we explore how box alignment works in the context of [multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout). As this guide aims to detail things that are specific to both modules, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide, which details the common features of box alignment across layout methods.
 
-In multi-column layout the alignment container is the content box of the multicol container. The alignment subject is the column box. The properties which apply to multi-column layouts are detailed below.
-
-> [!NOTE]
-> Multi-column layout predates the box alignment specification. And the properties listed here, while specified for Multicol, may not be supported in browsers.
+In [multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout/Basic_concepts), the {{glossary("alignment container")}} is the content box of the multicol container. The {{glossary("alignment subject")}} is the column box. The properties which apply to multi-column layouts are detailed below.
 
 ## align-content and justify-content
 
-The {{cssxref("align-content")}} property applies to the block axis and {{cssxref("justify-content")}} to the inline axis. Any spacing added to the columns due to use of space distribution will be added to the gap between the columns, therefore making the gap larger than might be specified by the {{cssxref("column-gap")}} property.
+The {{cssxref("align-content")}} property applies to the block axis and {{cssxref("justify-content")}} to the inline axis. Any spacing added to the columns due to use of space distribution will be added to the gap between the columns, therefore making the gap larger than might be specified by the {{cssxref("column-gap")}} (or {{cssxref("gap")}} shorthand) property.
 
-Using a value of `justify-content` other than `normal` or `stretch` will cause column boxes to display at the {{cssxref("column-width")}} specified on the multicol container, and the remaining space distributed according to the value of justify-content.
+Using a value of `justify-content` other than `normal` or `stretch` will cause column boxes to display at the {{cssxref("column-width")}} specified on the multicol container, and the remaining space distributed according to the value of `justify-content`.
 
 ## column-gap
 
-The {{cssxref("column-gap")}} property was specified in earlier versions of the multiple-column layout specification, and has now been unified with the gap properties for other layout methods in box alignment. While other layout methods treat the initial value of column-gap as 0 multicol treats it as 1em, as in general you would not want to have no gap between columns.
-
-## Reference
-
-### CSS Properties
-
-- {{cssxref("justify-content")}}
-- {{cssxref("align-content")}}
-- {{cssxref("column-gap")}}
+The {{cssxref("column-gap")}} property was originally specified in the multiple-column layout specification and then later unified with the gap properties for other layout methods in box alignment. While other layout methods treat the initial value of `column-gap` as `0`, multi-column layout treats it as `1em` — you generally want a gap between columns.
 
-### Glossary Entries
+## See also
 
-- [Alignment subject](/en-US/docs/Glossary/Alignment_Subject)
-- [Alignment container](/en-US/docs/Glossary/Alignment_Container)
-- [Fallback alignment](/en-US/docs/Glossary/Fallback_Alignment)
+- [Box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
+- [Box alignment in flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox)
+- [Box alignment in CSS grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout)
+- [Box alignment for block, absolutely positioned and table layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables)
diff --git a/files/en-us/web/css/css_box_alignment/index.md b/files/en-us/web/css/css_box_alignment/index.md
index 136ca1e1e6021c3..867f64dec0517e4 100644
--- a/files/en-us/web/css/css_box_alignment/index.md
+++ b/files/en-us/web/css/css_box_alignment/index.md
@@ -7,320 +7,81 @@ spec-urls: https://drafts.csswg.org/css-align/
 
 {{CSSRef}}
 
-The **CSS box alignment** module specifies CSS features that relate to the alignment of boxes in the various CSS box layout models: block layout, table layout, flex layout, and grid layout. The module aims to create a consistent method of alignment across all of CSS. This document details the general concepts found in the specification.
+The **CSS box alignment** module specifies CSS features relating to the alignment of boxes within their containers. It defines the alignment of the various CSS box layout models including block layout, table layout, flexible box layout (flexbox), and grid layout, creating a consistent alignment method across all of CSS.
 
-> [!NOTE]
-> The documentation for each layout method will detail how Box Alignment is applied there.
+The module details alignment terminology, enabling alignment properties to be used in multiple layout modules, rather than limited to a particular layout method.
 
-## Older alignment methods
+Alignment is linked to writing modes in that when we align an item we do not consider whether we are aligning it to the physical dimensions of top, right, bottom, and left. Instead, we describe alignment in terms of the start and end of the particular dimension we are working with. This ensures that alignment works in the same way whichever writing mode the document has.
 
-CSS traditionally had very limited alignment capabilities. We were able to align text using {{cssxref("text-align")}}, center blocks using auto {{cssxref("margin")}}s, and in table or inline-block layouts using the {{cssxref("vertical-align")}} property. Alignment of text is now covered by the [Inline Layout](https://www.w3.org/TR/css-inline-3/) and [CSS Text](https://www.w3.org/TR/css-text-3/) modules, and for the first time in Box Alignment we have full horizontal and vertical alignment capabilities.
+The alignment of text and inline-level content is defined in [CSS text module](/en-US/docs/Web/CSS/CSS_text) and [CSS inline module](/en-US/docs/Web/CSS/CSS_inline_layout), respectively.
 
-If you initially learned [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) then you may consider these properties to be part of the flexbox specification, and some of the properties are indeed listed in Level 1 of flexbox. However the specification notes that the Box Alignment specification should be referred to as it may add additional capabilities over what is currently in flexbox.
-
-## Basic examples
-
-The following examples demonstrate how some of the Box Alignment Properties are applied in [Grid](/en-US/docs/Web/CSS/CSS_grid_layout) and [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout).
-
-### CSS grid layout alignment example
-
-In this example using grid layout, there is extra space in the grid container after laying out the fixed width tracks on the inline (main) axis. This space is distributed using {{cssxref("justify-content")}}. On the block (cross) axis the alignment of the items inside their grid areas is controlled with {{cssxref("align-items")}}. The first item overrides the `align-items` value set on the group by setting {{cssxref("align-self")}} to `center`.
-
-```html live-sample___grid-align-items
-

-  
One

-  
Two

-  
Three 
has 
extra 
text

-  
Four

-  
Five

-  
Six

-

-```
-
-```css hidden live-sample___grid-align-items
-body {
-  font: 1.2em sans-serif;
-}
-
-.box {
-  border: 2px dotted rgb(96 139 168);
-}
-
-.box > * {
-  padding: 20px;
-  border: 2px solid rgb(96 139 168);
-  border-radius: 5px;
-  background-color: rgb(96 139 168 / 0.2);
-}
-```
-
-```css live-sample___grid-align-items
-.box {
-  display: grid;
-  grid-template-columns: 120px 120px 120px;
-  align-items: start;
-  justify-content: space-between;
-}
-
-.box :first-child {
-  align-self: center;
-}
-```
-
-{{EmbedLiveSample("grid-align-items", "", "200px")}}
-
-### Flexbox Alignment Example
-
-In this example, three flex items are aligned on the main axis using `justify-content` and on the Cross Axis using `align-items`. The first item overrides the `align-items` set on the group by setting `align-self` to `center`.
-
-```html live-sample___flex-align-items
-

-  
One

-  
Two

-  
Three 
has 
extra 
text

-

-```
-
-```css hidden live-sample___flex-align-items
-body {
-  font: 1.2em sans-serif;
-}
-
-.box {
-  border: 2px dotted rgb(96 139 168);
-}
-
-.box > * {
-  padding: 20px;
-  border: 2px solid rgb(96 139 168);
-  border-radius: 5px;
-  background-color: rgb(96 139 168 / 0.2);
-}
-```
-
-```css live-sample___flex-align-items
-.box {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-}
-
-.box :first-child {
-  align-self: center;
-}
-```
-
-{{EmbedLiveSample("flex-align-items")}}
-
-## Key concepts and terminology
-
-The specification details some alignment terminology to make it easier to discuss these alignment properties outside their implementation within a particular layout method. There are also some key concepts which are common to all layout methods.
-
-### Relationship to writing modes
-
-Alignment is linked to writing modes in that when we align an item we do not consider whether we are aligning it to the physical dimensions of top, right, bottom and left. Instead we describe alignment in terms of the start and end of the particular dimension we are working with. This ensures that alignment works in the same way whichever writing mode the document has.
-
-### Two dimensions of alignment
-
-When using the box alignment properties you will align content on one of two axes — the inline (or main) axis, and the block (or cross) axis. The inline axis is the axis along which words in a sentence flow in the writing mode being used — for English, for example, the inline axis is horizontal. The block axis is the axis along which blocks, such as paragraph elements, are laid out and it runs across the Inline axis.
-
-![Inline axis is the left / right, or horizontal, direction. Block axis is vertical, or top / bottom.](two-axes.png)
-
-When aligning items on the inline axis you will use the properties which begin with `justify-`:
-
-- {{cssxref("justify-items")}}
-- {{cssxref("justify-self")}}
-- {{cssxref("justify-content")}}
+## Reference
 
-When aligning items on the block axis you will use the properties that begin `align-`:
+### CSS Properties
 
+- {{cssxref("align-content")}}
 - {{cssxref("align-items")}}
 - {{cssxref("align-self")}}
-- {{cssxref("align-content")}}
-
-Flexbox adds an additional complication in that the above is true when {{cssxref("flex-direction")}} is set to `row`. The properties are swapped when flexbox is set to `column`. Therefore, when working with flexbox it is easier to think about the main and cross axis rather than inline and block. The `justify-` properties are always used to align on the main axis, the `align-` properties on the cross axis.
-
-### The alignment subject
-
-The **alignment subject** is the thing that is being aligned. For `justify-self` or `align-self`, or when setting these values as a group with `justify-items` or `align-items`, this will be the margin box of the element that this property is being used on. The `justify-content` and `align-content` properties differ per layout method.
-
-### The alignment container
-
-The **alignment container** is the box the subject is being aligned inside. This will typically be the alignment subject's containing block. An alignment container may contain one or many alignment subjects.
-
-The below image shows an alignment container with two alignment subjects inside.
-
-![A box containing two rectangles of the same width but different heights. The two rectangles are top aligned, meaning they both have their top lines about 10px inside the top of the box in which they are contained.](align-container-subjects.png)
-
-### Fallback alignment
-
-If you set an alignment that cannot be fulfilled, then the **fallback alignment** will come into play and deal with the available space. This fallback alignment is specified individually for each layout method and detailed on the page for that method.
-
-## Types of alignment
-
-There are three different types of alignment that the specification details; these use keyword values.
-
-- **Positional alignment**: specifying the position of an alignment subject with relation to its alignment container.
-- **Baseline alignment**: These keywords define alignment as a relationship among the baselines of multiple alignment subjects within an alignment context.
-- **Distributed alignment**: These keywords define alignment as a distribution of space among alignment subjects.
-
-### Positional alignment keyword values
-
-The following values are defined for positional alignment, and can be used as values for content alignment with `justify-content` and `align-content` and also for self alignment with `justify-self` and `align-self`.
-
-- `center`
-- `start`
-- `end`
-- `self-start`
-- `self-end`
-- `flex-start` for flexbox only
-- `flex-end` for flexbox only
-- `left`
-- `right`
-
-Other than the physical values of `left` and `right`, which relate to physical attributes of the screen, all of the other values are logical values and relate to the writing mode of the content.
-
-For example, when working in CSS grid layout, if you are working in English and set `justify-content` to `start` this will move the items in the inline dimension to the start, which will be the left as sentences in English start on the left. If you were using Arabic, a right to left language, then the same value of `start` would result in the items moving to the right, as sentences in Arabic start on the right-hand side of the page.
-
-Both of these examples have `justify-content: start`, however the location of start changes according to the writing mode.
-
-![There are two boxes, each with 3 children of differing heights but similar widths. The first box has three children with the letters A, B, and C. These three boxes are all aligned to the left. The second box has three children with arabic letters in them. Those three boxes are all aligned to the right.](writing-mode-start.png)
-
-### Baseline alignment
-
-The Baseline alignment keywords are used to align the baselines of boxes across a group of alignment subjects. They can be used as values for content alignment with `justify-content` and `align-content` and also for self alignment with `justify-self` and `align-self`.
-
-- `baseline`
-- `first baseline`
-- `last baseline`
-
-Baseline content alignment — specifying a baseline alignment value for `justify-content` or `align-content` — works in layout methods that lay items out in rows. The alignment subjects are baseline aligned against each other by adding padding inside the boxes.
-
-Baseline self alignment shifts the boxes to align by baseline by adding a margin outside the boxes. Self alignment is when using `justify-self` or `align-self`, or when setting these values as a group with `justify-items` and `align-items`.
-
-### Distributed alignment
-
-The **distributed alignment keywords** are used with the `align-content` and `justify-content` properties. These keywords define what happens to any additional space after alignment subjects have been displayed. The values are as follows:
-
-- `stretch`
-- `space-between`
-- `space-around`
-- `space-evenly`
-
-For example, in Flex Layout items are aligned with `flex-start` initially. Working in a horizontal top to bottom writing mode such as English, with `flex-direction` as `row` the items start on the far left and any available space after displaying the items is placed after the items.
-
-![Three rectangles of different widths are inside a box. They are all aligned to the left side of the containing box, with about 10px between them, and 10px between the left side of the first rectangle and the parent container.](justify-content-start.png)
-
-If you set `justify-content: space-between` on the flex container, the available space is now shared out and placed between the items.
-
-![Three rectangles of different widths are inside a box. The first rectangle is aligned to the left side of the containing box, the third rectangle is aligned right, and the middle rectangle is equally spaced between the first and last.](justify-content-space-between.png)
-
-There needs to be space available in the dimension you wish to align the items in, in order for these keywords to take effect. With no space, there is nothing to distribute.
-
-## Overflow alignment
-
-The `safe` and `unsafe` keywords help define behavior when an alignment subject is larger than the alignment container. The `safe` keyword will align to `start` in the case of a specified alignment causing an overflow, the aim being to avoid "data loss" where part of the item is outside the boundaries of the alignment container and can't be scrolled to.
-
-If you specify `unsafe` then the alignment will be honoured even if it would cause such data loss.
-
-## Gaps between boxes
-
-The box alignment specification also includes the `gap`, `row-gap`, and `column-gap` properties. These properties enable the setting of a consistent gap between items in a row or column, in any layout method which has items arranged in this way.
-
-The `gap` property is a shorthand for `row-gap` and `column-gap`, which allows us to set these properties at once:
-
-- {{cssxref("row-gap")}}
 - {{cssxref("column-gap")}}
 - {{cssxref("gap")}}
+- {{cssxref("justify-content")}}
+- {{cssxref("justify-items")}}
+- {{cssxref("justify-self")}}
+- {{cssxref("place-content")}}
+- {{cssxref("place-items")}}
+- {{cssxref("place-self")}}
+- {{cssxref("row-gap")}}
 
-In the below example, a grid layout uses the `gap` shorthand to set a `10px` gap between row tracks, and a `2em` gap between column tracks.
-
-```html live-sample___grid-gap
-

-  
One

-  
Two

-  
Three

-  
Four

-  
Five

-  
Six

-

-```
+### Data types
 
-```css hidden live-sample___grid-gap
-body {
-  font: 1.2em sans-serif;
-}
+- {{cssxref("baseline-position")}}
+- {{cssxref("content-distribution")}}
+- {{cssxref("content-position")}}
+- {{cssxref("overflow-position")}}
+- {{cssxref("self-position")}}
 
-.box {
-  border: 2px dotted rgb(96 139 168);
-}
+### Terms and definitions
 
-.box > * {
-  padding: 20px;
-  border: 2px solid rgb(96 139 168);
-  border-radius: 5px;
-  background-color: rgb(96 139 168 / 0.2);
-}
-```
+- {{Glossary("Alignment container")}}
+- {{Glossary("Alignment subject")}}
+- [Baseline alignment](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment#baseline_alignment)
+- [Distributed alignment](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment#distributed_alignment)
+- {{Glossary("Fallback alignment")}}
+- [Positional alignment](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment#positional_alignment)
 
-```css live-sample___grid-gap
-.box {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 10px 2em;
-}
+## Guides
 
-.box :first-child {
-  align-self: center;
-}
-```
+- [Box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment)
 
-{{EmbedLiveSample("grid-gap")}}
+  - : Overview of the general concepts found in the CSS box alignment module.
 
-> [!NOTE]
-> The early grid implementation included `-gap` properties prefixed with `grid-`. All browsers now support the unprefixed properties, though you may see the following legacy properties in examples and tutorials: {{cssxref("row-gap", "grid-row-gap")}}, {{cssxref("column-gap", "grid-column-gap")}}, and {{cssxref("gap", "grid-gap")}}. The prefixed versions will be maintained as an alias of the unprefixed ones.
+- [Box alignment in flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox)
 
-Be aware that other things may increase the visual gap displayed, for example using the space distribution keywords or adding margins to items.
+  - : How box alignment works in the context of flexbox.
 
-## Pages detailing individual alignment properties
+- [Box alignment in CSS grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout)
 
-As the CSS box alignment properties are implemented differently depending on the specification they interact with, refer to the following pages for each layout type for details of how to use the alignment properties with it:
+  - : How box alignment works in the context of grid layout.
 
-- [Box alignment in flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox)
-- [Box alignment in CSS grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout)
 - [Box alignment in multiple-column layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout)
-- [Box alignment for block, absolutely positioned and table layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables)
 
-## Reference
+  - : How box alignment works in the context of multi-column layout.
 
-### CSS Properties
+- [Box alignment for block, absolutely positioned and table layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables)
 
-- {{cssxref("justify-content")}}
-- {{cssxref("align-content")}}
-- {{cssxref("place-content")}}
-- {{cssxref("justify-items")}}
-- {{cssxref("align-items")}}
-- {{cssxref("place-items")}}
-- {{cssxref("justify-self")}}
-- {{cssxref("align-self")}}
-- {{cssxref("place-self")}}
-- {{cssxref("row-gap")}}
-- {{cssxref("column-gap")}}
-- {{cssxref("gap")}}
+  - : How box alignment works in the context of block layout, including floated, positioned, and table elements.
 
-### Glossary Entries
+## Related concepts
 
+- {{cssxref("alignment-baseline")}}
+- {{cssxref("dominant-baseline")}}
+- {{cssxref("grid-column-gap")}}
+- {{cssxref("grid-gap")}}
+- {{cssxref("grid-row-gap")}}
+- {{cssxref("scroll-snap-align")}}
+- SVG {{SVGAttr("dominant-baseline")}} attribute
 - {{Glossary("Cross axis")}}
 - {{Glossary("Main axis")}}
-- {{Glossary("Alignment container")}}
-- {{Glossary("Alignment subject")}}
-- {{Glossary("Fallback alignment")}}
-
-## Guides
-
-- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
-- [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
-- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
 
 ## Specifications
 
@@ -328,6 +89,9 @@ As the CSS box alignment properties are implemented differently depending on the
 
 ## See also
 
+- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
+- [Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
+- [Box alignment in CSS grid layouts](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
 - [CSS display](/en-US/docs/Web/CSS/CSS_display) module
-- [CSS flex layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
+- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
 - [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module
diff --git a/files/en-us/web/svg/attribute/alignment-baseline/index.md b/files/en-us/web/svg/attribute/alignment-baseline/index.md
index 9a93407803090a1..fd48292e03effa7 100644
--- a/files/en-us/web/svg/attribute/alignment-baseline/index.md
+++ b/files/en-us/web/svg/attribute/alignment-baseline/index.md
@@ -145,4 +145,4 @@ For object alignment in other elements (such as {{SVGElement("text")}}), see {{S
 
 ## See also
 
-- [CSS baseline alignment](/en-US/docs/Web/CSS/CSS_box_alignment#baseline_alignment)
+- [CSS baseline alignment](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment#baseline_alignment)

From 25924970e8dbf0cdccfb5d47654eaaa143ed60e2 Mon Sep 17 00:00:00 2001
From: Estelle Weyl 
Date: Wed, 15 Jan 2025 10:38:30 -0800
Subject: [PATCH 035/102] New pages: CSS box alignment data types (#37567)

* new pages: CSS box alignment data types

* Apply suggestions from code review

Co-authored-by: Chris Mills 

* edits per review

* link text

---------

Co-authored-by: Chris Mills 
---
 .../en-us/web/css/baseline-position/index.md  | 47 ++++++++++++++++
 .../web/css/content-distribution/index.md     | 51 ++++++++++++++++++
 files/en-us/web/css/content-position/index.md | 49 +++++++++++++++++
 .../en-us/web/css/overflow-position/index.md  | 44 +++++++++++++++
 files/en-us/web/css/self-position/index.md    | 53 +++++++++++++++++++
 5 files changed, 244 insertions(+)
 create mode 100644 files/en-us/web/css/baseline-position/index.md
 create mode 100644 files/en-us/web/css/content-distribution/index.md
 create mode 100644 files/en-us/web/css/content-position/index.md
 create mode 100644 files/en-us/web/css/overflow-position/index.md
 create mode 100644 files/en-us/web/css/self-position/index.md

diff --git a/files/en-us/web/css/baseline-position/index.md b/files/en-us/web/css/baseline-position/index.md
new file mode 100644
index 000000000000000..c8fc915e55844ae
--- /dev/null
+++ b/files/en-us/web/css/baseline-position/index.md
@@ -0,0 +1,47 @@
+---
+title: 
+slug: Web/CSS/baseline-position
+page-type: css-type
+browser-compat: css.types.baseline-position
+---
+
+{{CSSRef}}
+
+The **``** {{glossary("enumerated")}} value type represents the `baseline` keyword values and `first` and `last` modifiers, used for the {{cssxref("align-content")}}, {{cssxref("align-items")}}, {{cssxref("align-self")}}, {{cssxref("justify-items")}} and {{cssxref("justify-self")}} properties as well as the {{cssxref("place-content")}}, {{cssxref("place-items")}}, and {{cssxref("place-self")}} shorthand properties.
+
+The `first` and `last` values give a box a baseline alignment preference, defaulting to `first` if the modifier is omitted.
+
+## Syntax
+
+```plain
+ = [ first | last ]? && baseline
+```
+
+## Values
+
+The `` enumerated value type is specified using an optional `first` or `last` modifier with the `baseline` value. If a box does not belong to a shared alignment context, then the fallback alignment is used. The fallback alignment is also used to align the baseline-sharing group within its {{glossary("alignment container")}}.
+
+- `baseline`
+
+  - : Computes to `first baseline`, as defined below.
+
+- `first baseline`
+
+  - : Aligns the alignment baseline of the box's first baseline set with the corresponding baseline of its baseline-sharing group. The fallback alignment is `safe self-start` for self-alignment or `safe start` for content distribution.
+
+- `last baseline`
+  - : Aligns the alignment baseline of the box's last baseline set with the corresponding baseline of its baseline-sharing group. The fallback alignment is `safe self-end` for self-alignment or `safe end` for content distribution.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- Properties that use this data type: {{cssxref("align-content")}}, {{cssxref("align-items")}}, {{cssxref("align-self")}}, {{cssxref("justify-items")}}, {{cssxref("justify-self")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, and {{cssxref("place-self")}}
+- Other box alignment data types: {{cssxref("content-distribution")}}, {{cssxref("content-position")}}, {{cssxref("overflow-position")}}, and {{cssxref("self-position")}}
+- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module
diff --git a/files/en-us/web/css/content-distribution/index.md b/files/en-us/web/css/content-distribution/index.md
new file mode 100644
index 000000000000000..75deb707f51203e
--- /dev/null
+++ b/files/en-us/web/css/content-distribution/index.md
@@ -0,0 +1,51 @@
+---
+title: 
+slug: Web/CSS/content-distribution
+page-type: css-type
+browser-compat: css.types.content-distribution
+---
+
+{{CSSRef}}
+
+The **``** {{glossary("enumerated")}} value type is used by {{cssxref("justify-content")}} and {{cssxref("align-content")}} properties, and the {{cssxref("place-content")}} shorthand, to distribute a container's extra space among its {{glossary("alignment subject", "alignment subjects")}}.
+
+## Syntax
+
+```plain
+ = space-between | space-around | space-evenly | stretch
+```
+
+## Values
+
+The following keyword values are represented by the `` grammar term:
+
+- `space-between`
+
+  - : Evenly distributes the {{glossary("alignment subject")}} within the {{glossary("alignment container")}}. The first item is placed flush with the start edge of the alignment container, the last item subject is placed flush with the end edge of the alignment container, and the remaining items are evenly distributed so that the spacing between any two adjacent items is the same. The default fallback alignment for `space-between` is `safe flex-start` for flex layout, and `start` otherwise. If there is only one item, the item will be flush with the start edge.
+
+- `space-around`
+
+  - : The items are evenly distributed in the container, with a half-size space on either end. The spacing between any two adjacent items is the same, and the spacing before the first and after the last items is half the size of the other spacing. The default fallback alignment for `space-around` is `safe center`. If the container has only one child, the item will be centered.
+
+- `space-evenly`
+
+  - : The items are evenly distributed in the container, with a full-size space on either end. The spacing between any two adjacent items, before the first item, and after the last item, are all the same. The default fallback alignment for `space-evenly` is `safe center`. If the container has only one child, the item will be centered.
+
+- `stretch`
+
+  - : If the combined size of the items is less than the size of the container, any items that can grow will have their size increased equally (not proportionally), while still respecting the constraints imposed by {{cssxref("max-height")}}, {{cssxref("max-width")}}, or equivalent functionality, so that the combined size of the items exactly fills the container. The default fallback alignment for `stretch` is `flex-start` in flexbox, and `start` in other layout modes. If there is only one item, and that item can grow, it will grow to fill the container.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- Properties that use this data type: {{cssxref("align-content")}}, {{cssxref("justify-content")}}, {{cssxref("place-content")}}
+- Other box alignment data types: {{cssxref("baseline-position")}}, {{cssxref("content-position")}}, {{cssxref("overflow-position")}}, and {{cssxref("self-position")}}
+- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module
+- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
diff --git a/files/en-us/web/css/content-position/index.md b/files/en-us/web/css/content-position/index.md
new file mode 100644
index 000000000000000..e0af4a100bfb6ec
--- /dev/null
+++ b/files/en-us/web/css/content-position/index.md
@@ -0,0 +1,49 @@
+---
+title: 
+slug: Web/CSS/content-position
+page-type: css-type
+browser-compat: css.types.content-position
+---
+
+{{CSSRef}}
+
+The **``** {{glossary("enumerated")}} value type is used by {{cssxref("justify-content")}} and {{cssxref("align-content")}} properties, and the {{cssxref("place-content")}} shorthand, to align the box's contents within itself.
+
+## Syntax
+
+```plain
+ = center | start | end | flex-start | flex-end
+```
+
+## Values
+
+The `` enumerated value type is specified using one of the following key terms.
+
+- `center`
+  - : Centers the {{glossary("alignment subject")}} within its {{glossary("alignment container")}}.
+- `start`
+  - : Aligns the alignment subject flush with the alignment container's start edge.
+- `end`
+  - : Aligns the alignment subject flush with the alignment container's end edge.
+- `flex-start`
+  - : In flex layout, aligns the alignment subject flush with the edge of the alignment container corresponding to the flex container's main-start or cross-start side, as appropriate. It is identical to `start` for layout modes other than flex layout.
+- `flex-end`
+  - : In flex layout, aligns the alignment subject flush with the edge of the alignment container corresponding to the flex container's main-end or cross-end side, as appropriate. Identical to `end` for layout modes other than flex layout.
+
+> [!NOTE]
+> The `left` and `right` keywords are excluded from ``, despite being valid positional alignment values for the `justify-*` properties ({{cssxref("justify-content")}}, {{cssxref("justify-self")}}, and {{cssxref("justify-items")}}), because they are not allowed in the `align-*` properties ({{cssxref("align-content")}}, {{cssxref("align-self")}}, and {{cssxref("align-items")}}). They are instead explicitly included in the `justify-*` properties' grammars.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- Properties that use this data type: {{cssxref("align-content")}}, {{cssxref("justify-content")}}, {{cssxref("place-content")}}
+- Other box alignment data types: {{cssxref("baseline-position")}}, {{cssxref("content-distribution")}}, {{cssxref("content-position")}}, {{cssxref("overflow-position")}}, and {{cssxref("self-position")}}
+- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module
+- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
diff --git a/files/en-us/web/css/overflow-position/index.md b/files/en-us/web/css/overflow-position/index.md
new file mode 100644
index 000000000000000..fa96759a81207d7
--- /dev/null
+++ b/files/en-us/web/css/overflow-position/index.md
@@ -0,0 +1,44 @@
+---
+title: 
+slug: Web/CSS/overflow-position
+page-type: css-type
+browser-compat: css.types.overflow-position
+---
+
+{{CSSRef}}
+
+The **``** {{glossary("enumerated")}} value type defines how an alignment subject that is larger than its alignment container will overflow that container. For example, if centered items are wider than their container, the overflow may be displayed beyond the viewport's start edge, which can't be scrolled to. The `` value defines whether the alignment mode should be overridden to ensure the content is visible (`safe`) or if the alignment mode must be adhered to (`unsafe`).
+
+This data type is valid for the {{cssxref("align-content")}}, {{cssxref("align-items")}}, {{cssxref("align-self")}}, {{cssxref("justify-items")}} and {{cssxref("justify-self")}} properties as well as the {{cssxref("place-content")}}, {{cssxref("place-items")}}, and {{cssxref("place-self")}} shorthand properties.
+If omitted, the default overflow alignment is a blend of `safe` and `unsafe`.
+
+## Syntax
+
+```plain
+ = unsafe | safe
+```
+
+## Values
+
+The following keyword values are represented by the `` grammar term:
+
+- `safe`
+
+  - : If the size of the {{glossary("alignment subject")}} overflows the {{glossary("alignment container")}}, the alignment subject is instead aligned as if the alignment mode were `start`.
+
+- `unsafe`
+  - : Regardless of the relative sizes of the alignment subject and alignment container, the given alignment value is honored.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- Properties that use this data type: {{cssxref("align-content")}}, {{cssxref("align-items")}}, {{cssxref("align-self")}}, {{cssxref("justify-content")}} {{cssxref("justify-items")}}, {{cssxref("justify-self")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, and {{cssxref("place-self")}}
+- Other box alignment data types: {{cssxref("content-distribution")}}, {{cssxref("content-position")}}, {{cssxref("baseline-position")}}, and {{cssxref("self-position")}}
+- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module
diff --git a/files/en-us/web/css/self-position/index.md b/files/en-us/web/css/self-position/index.md
new file mode 100644
index 000000000000000..e7495f7b8cb2850
--- /dev/null
+++ b/files/en-us/web/css/self-position/index.md
@@ -0,0 +1,53 @@
+---
+title: 
+slug: Web/CSS/self-position
+page-type: css-type
+browser-compat: css.types.self-position
+---
+
+{{CSSRef}}
+
+The **``** {{glossary("enumerated")}} value data type is used by the {{cssxref("justify-self")}} and {{cssxref("align-self")}} properties, and the {{cssxref("place-self")}} shorthand, to align the box within its alignment container. It is also used by the {{cssxref("justify-items")}} and {{cssxref("align-items")}} properties, and the {{cssxref("place-items")}} shorthand, to specify default values for `justify-self` and `align-self`.
+
+## Syntax
+
+```plain
+ = center | start | end | self-start | self-end | flex-start | flex-end
+```
+
+## Values
+
+The following keyword values are represented by the `` grammar term:
+
+- `center`
+  - : Centers the {{glossary("alignment subject")}} within its {{glossary("alignment container")}}.
+- `start`
+  - : Aligns the alignment subject flush with the alignment container's start edge.
+- `end`
+  - : Aligns the alignment subject flush with the alignment container's end edge.
+- `self-start`
+  - : Aligns the alignment subject flush with the edge of the alignment container corresponding to the alignment subject's start side.
+- `self-end`
+  - : Aligns the alignment subject flush with the edge of the alignment container corresponding to the alignment subject's end side.
+- `flex-start`
+  - : In flex layout, aligns the alignment subject flush with the edge of the alignment container corresponding to the flex container's main-start or cross-start side, as appropriate. It is identical to `start` for layout modes other than flex layout.
+- `flex-end`
+  - : In flex layout, aligns the alignment subject flush with the edge of the alignment container corresponding to the flex container's main-end or cross-end side, as appropriate. Identical to `end` for layout modes other than flex layout.
+
+> [!NOTE]
+> The `left` and `right` keywords are excluded from ``, despite being valid positional alignment values for the `justify-*` properties ({{cssxref("justify-content")}}, {{cssxref("justify-self")}}, and {{cssxref("justify-items")}}), because they are not allowed in the `align-*` properties ({{cssxref("align-content")}}, {{cssxref("align-self")}}, and {{cssxref("align-items")}}). They are instead explicitly included in the `justify-*` properties' grammars.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- Properties that use this data type: {{cssxref("align-self")}}, {{cssxref("justify-self")}}, {{cssxref("place-self")}}, {{cssxref("align-items")}}, {{cssxref("justify-items")}}, {{cssxref("place-items")}}
+- Other box alignment data types: {{cssxref("baseline-position")}}, {{cssxref("content-distribution")}}, {{cssxref("overflow-position")}}, and {{cssxref("content-position")}}
+- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module
+- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module

From 1574e4728b2d31b8898f84843a9832253790c516 Mon Sep 17 00:00:00 2001
From: Flying Hawk <140573524+SurajKharkwal@users.noreply.github.com>
Date: Thu, 16 Jan 2025 07:01:34 +0530
Subject: [PATCH 036/102] More information about formatToParts pages (#37658)

* Fix issue in Named Year: Fix Issue #37609

* Fix more

---------

Co-authored-by: Joshua Chen 
---
 .../intl/datetimeformat/format/index.md       |   2 +-
 .../formatrangetoparts/index.md               |  63 ++++---
 .../datetimeformat/formattoparts/index.md     | 159 +++++-------------
 .../durationformat/durationformat/index.md    |   2 +-
 .../durationformat/formattoparts/index.md     |  25 +--
 .../intl/listformat/format/index.md           |  11 +-
 .../intl/listformat/formattoparts/index.md    |  32 +---
 .../numberformat/formatrangetoparts/index.md  |  59 +------
 .../intl/numberformat/formattoparts/index.md  |  99 ++++-------
 .../relativetimeformat/formattoparts/index.md |  11 +-
 10 files changed, 150 insertions(+), 313 deletions(-)

diff --git a/files/en-us/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md b/files/en-us/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md
index 33221b5114f43af..fa1fc8db7b71dec 100644
--- a/files/en-us/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md
@@ -20,7 +20,7 @@ format(date)
 ### Parameters
 
 - `date`
-  - : The date to format.
+  - : The date to format. Omitting it results in formatting the current date (as returned by {{jsxref("Date.now()")}}), which could be slightly confusing, so it is advisable to always explicitly pass a date.
 
 ### Return value
 
diff --git a/files/en-us/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md b/files/en-us/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md
index fd06a3c8fb6add9..a8563c1f51227e7 100644
--- a/files/en-us/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md
@@ -7,8 +7,7 @@ browser-compat: javascript.builtins.Intl.DateTimeFormat.formatRangeToParts
 
 {{JSRef}}
 
-The **`formatRangeToParts()`** method of {{jsxref("Intl.DateTimeFormat")}} instances returns an array of locale-specific tokens representing each part of the formatted date
-range produced by this `Intl.DateTimeFormat` object.
+The **`formatRangeToParts()`** method of {{jsxref("Intl.DateTimeFormat")}} instances returns an array of objects representing each part of the formatted string that would be returned by {{jsxref("Intl/DatetimeFormat/formatRange", "formatRange()")}}. It is useful for building custom strings from the locale-specific tokens.
 
 {{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrangetoparts.html", "taller")}}
 
@@ -18,15 +17,31 @@ range produced by this `Intl.DateTimeFormat` object.
 formatRangeToParts(startDate, endDate)
 ```
 
-## Examples
+### Parameters
+
+- `startDate`
+  - : A {{jsxref("Date")}} object representing the start of the date range.
+- `endDate`
+  - : A {{jsxref("Date")}} object representing the end of the date range.
+
+### Return value
+
+An {{jsxref("Array")}} of objects containing the formatted date range in parts. Each object has three properties, `type`, `value`, and `source`, each containing a string. The string concatenation of `value`, in the order provided, will result in the same string as {{jsxref("Intl/DateTimeFormat/formatRange", "formatRange()")}}. The `type` may have the same values as {{jsxref("Intl/DateTimeFormat/formatToParts", "formatToParts()")}}. The `source` can be one of the following:
+
+- `startRange`
+  - : The token is a part of the start date.
+- `endRange`
+  - : The token is a part of the end date.
+- `shared`
+  - : The token is shared between the start and end; for example, if the start and end dates share the same day period, that token may get reused. All literals that are part of the range pattern itself, such as the `" – "` separator, are also marked as `shared`.
+
+If the start and end dates are equivalent at the precision of the output, then the output has the same list of tokens as calling {{jsxref("Intl/DateTimeFormat/formatToParts", "formatToParts()")}} on the start date, with all tokens marked as `source: "shared"`.
 
-### Basic formatRangeToParts usage
+## Examples
 
-This method receives two {{jsxref("Date")}}s and returns an {{jsxref("Array")}} of
-objects containing the _locale-specific_ tokens representing each part of the formatted date range.
+### Using formatRangeToParts()
 
-> [!NOTE]
-> The return values shown in your locale may differ from those listed below.
+The `formatRange()` method outputs localized, opaque strings that cannot be manipulated directly:
 
 ```js
 const date1 = new Date(Date.UTC(1906, 0, 10, 10, 0, 0)); // Wed, 10 Jan 1906 10:00:00 GMT
@@ -38,19 +53,25 @@ const fmt = new Intl.DateTimeFormat("en", {
 });
 
 console.log(fmt.formatRange(date1, date2)); // '10:00 – 11:00 AM'
+```
+
+However, in many user interfaces you may want to customize the formatting of this string, or interleave it with other texts. The `formatRangeToParts()` method produces the same information in parts:
 
-fmt.formatRangeToParts(date1, date2);
-// [
-//   { type: 'hour',      value: '10',  source: "startRange" },
-//   { type: 'literal',   value: ':',   source: "startRange" },
-//   { type: 'minute',    value: '00',  source: "startRange" },
-//   { type: 'literal',   value: ' – ', source: "shared"     },
-//   { type: 'hour',      value: '11',  source: "endRange"   },
-//   { type: 'literal',   value: ':',   source: "endRange"   },
-//   { type: 'minute',    value: '00',  source: "endRange"   },
-//   { type: 'literal',   value: ' ',   source: "shared"     },
-//   { type: 'dayPeriod', value: 'AM',  source: "shared"     }
-// ]
+```js
+console.log(fmt.formatRangeToParts(date1, date2));
+
+// return value:
+[
+  { type: "hour", value: "10", source: "startRange" },
+  { type: "literal", value: ":", source: "startRange" },
+  { type: "minute", value: "00", source: "startRange" },
+  { type: "literal", value: " – ", source: "shared" },
+  { type: "hour", value: "11", source: "endRange" },
+  { type: "literal", value: ":", source: "endRange" },
+  { type: "minute", value: "00", source: "endRange" },
+  { type: "literal", value: " ", source: "shared" },
+  { type: "dayPeriod", value: "AM", source: "shared" },
+];
 ```
 
 ## Specifications
@@ -63,5 +84,5 @@ fmt.formatRangeToParts(date1, date2);
 
 ## See also
 
-- {{jsxref("Intl/DateTimeFormat/formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}}
 - {{jsxref("Intl.DateTimeFormat")}}
+- {{jsxref("Intl/DateTimeFormat/formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}}
diff --git a/files/en-us/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.md b/files/en-us/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.md
index ba8c55234fee104..ffdb72cc6aa8fcd 100644
--- a/files/en-us/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.md
@@ -7,7 +7,7 @@ browser-compat: javascript.builtins.Intl.DateTimeFormat.formatToParts
 
 {{JSRef}}
 
-The **`formatToParts()`** method of {{jsxref("Intl.DateTimeFormat")}} instances allows locale-aware formatting of strings produced by this `Intl.DateTimeFormat` object.
+The **`formatToParts()`** method of {{jsxref("Intl.DateTimeFormat")}} instances returns an array of objects representing each part of the formatted string that would be returned by {{jsxref("Intl/DatetimeFormat/format", "format()")}}. It is useful for building custom strings from the locale-specific tokens.
 
 {{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formattoparts.html", "taller")}}
 
@@ -19,66 +19,52 @@ formatToParts(date)
 
 ### Parameters
 
-- `date` {{optional_inline}}
-  - : The date to format.
+- `date`
+  - : The date to format. Omitting it results in formatting the current date (as returned by {{jsxref("Date.now()")}}), which could be slightly confusing, so it is advisable to always explicitly pass a date.
 
 ### Return value
 
-An {{jsxref("Array")}} of objects containing the formatted date in parts.
-
-## Description
-
-The `formatToParts()` method is useful for custom formatting of date
-strings. It returns an {{jsxref("Array")}} of objects containing the locale-specific
-tokens from which it possible to build custom strings while preserving the
-locale-specific parts. The structure the `formatToParts()` method returns,
-looks like this:
-
-```js
-[
-  { type: "day", value: "17" },
-  { type: "weekday", value: "Monday" },
-];
-```
-
-Possible types are the following:
+An {{jsxref("Array")}} of objects containing the formatted date in parts. Each object has two properties, `type` and `value`, each containing a string. The string concatenation of `value`, in the order provided, will result in the same string as {{jsxref("Intl/DateTimeFormat/format", "format()")}}. The `type` may be one of the [date-time components](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#date-time_component_options):
 
+- `weekday`
+  - : For example `"M"`, `"Monday"`, or `"Montag"`.
+- `era`
+  - : For example `"BC"` or `"AD"`.
+- `year`
+  - : For example `"2012"` or `"96"`.
+- `month`
+  - : For example `"12"` or `"January"`.
 - `day`
-  - : The string used for the day, for example `"17"`.
+  - : For example `"17"`.
 - `dayPeriod`
-  - : The string used for the day period, for example, `"AM"`,
-    `"PM"`, `"in the morning"`, or `"noon"`
-- `era`
-  - : The string used for the era, for example `"BC"` or `"AD"`.
-- `fractionalSecond`
-  - : The string used for the fractional seconds, for example `"0"` or `"00"` or `"000"`.
+  - : For example `"AM"`, `"PM"`, `"in the morning"`, or `"noon"`.
 - `hour`
-  - : The string used for the hour, for example `"3"` or `"03"`.
-- `literal`
-  - : The string used for separating date and time values, for example `"/"`,
-    `","`, `"o'clock"`, `"de"`, etc.
+  - : For example `"3"` or `"03"`.
 - `minute`
-  - : The string used for the minute, for example `"00"`.
-- `month`
-  - : The string used for the month, for example `"12"`.
-- `relatedYear`
-  - : The string used for the related 4-digit Gregorian year, in the event that the
-    calendar's representation would be a yearName instead of a year, for example `"2019"`.
+  - : For example `"00"`.
 - `second`
-  - : The string used for the second, for example `"07"` or `"42"`.
+  - : For example `"07"` or `"42"`.
+- `fractionalSecond`
+  - : For example `"0"`, `"00"`, or `"000"`.
 - `timeZoneName`
-  - : The string used for the name of the time zone, for example `"UTC"`. Default is the timezone of the current environment.
-- `weekday`
-  - : The string used for the weekday, for example `"M"`, `"Monday"`, or `"Montag"`.
-- `year`
-  - : The string used for the year, for example `"2012"` or `"96"`.
+  - : For example `"UTC"`, `"CET"`, or `"Central European Time"`.
+
+The `type` may also be one of the following:
+
+- `literal`
+  - : Any string that's a part of the format pattern and not influenced by the `date`; for example `"/"`, `", "`, `"o'clock"`, `"de"`, `" "`, etc.
+- `relatedYear`
+  - : A 4-digit Gregorian year, in the event that the calendar's representation would be a `yearName` instead of a year; for example `"2019"`. See [named years](#named_years) for more details.
 - `yearName`
-  - : The string used for the yearName in relevant contexts, for example `"geng-zi"`
+  - : The name given to the year, usually in calendars without the concept of continuous years; for example `"geng-zi"`.
+- `unknown`
+  - : Reserved for any token that's not recognized as any of the above; should be rarely encountered.
 
 ## Examples
 
-`DateTimeFormat` outputs localized, opaque strings that cannot be
-manipulated directly:
+### Using formatToParts()
+
+The `format()` method outputs localized, opaque strings that cannot be manipulated directly:
 
 ```js
 const date = Date.UTC(2012, 11, 17, 3, 0, 42);
@@ -100,9 +86,7 @@ formatter.format(date);
 // "Monday, 12/17/2012, 3:00:42.000 AM"
 ```
 
-However, in many User Interfaces there is a desire to customize the formatting of this
-string. The `formatToParts` method enables locale-aware formatting of strings
-produced by `DateTimeFormat` formatters by providing you the string in parts:
+However, in many user interfaces you may want to customize the formatting of this string, or interleave it with other texts. The `formatToParts()` method produces the same information in parts:
 
 ```js
 formatter.formatToParts(date);
@@ -128,12 +112,7 @@ formatter.formatToParts(date);
 ];
 ```
 
-Now the information is available separately and it can be formatted and concatenated
-again in a customized way. For example by using {{jsxref("Array.prototype.map()")}},
-[arrow functions](/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions),
-a [switch statement](/en-US/docs/Web/JavaScript/Reference/Statements/switch),
-[template literals](/en-US/docs/Web/JavaScript/Reference/Template_literals),
-and {{jsxref("Array.prototype.join()")}}.
+Now the information is available separately and it can be formatted and concatenated again in a customized way. For example by using {{jsxref("Array.prototype.map()")}}, [arrow functions](/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), a [switch statement](/en-US/docs/Web/JavaScript/Reference/Statements/switch), [template literals](/en-US/docs/Web/JavaScript/Reference/Template_literals), and {{jsxref("Array.prototype.join()")}}, to insert additional markup for certain components.
 
 ```js
 const dateString = formatter
@@ -147,36 +126,20 @@ const dateString = formatter
     }
   })
   .join("");
-```
-
-This will emphasize the day period when using the `formatToParts()` method.
-
-```js
-console.log(formatter.format(date));
-// "Monday, 12/17/2012, 3:00:42.000 AM"
 
 console.log(dateString);
 // "Monday, 12/17/2012, 3:00:42.000 AM"
 ```
 
-### Named Years and Mixed calendars
+### Named years
 
-In some cases, calendars use named years. Chinese and Tibetan calendars, for example,
-use a 60-year [sexagenary cycle](https://en.wikipedia.org/wiki/Sexagenary_cycle) of named years.
-These years are disambiguated by relationship to
-corresponding years on the Gregorian calendar. When this is the case, the result of
-`formatToParts()` will contain an entry for `relatedYear` when a
-year would normally be present, containing the 4-digit Gregorian year, instead of an
-entry for `year`. Setting an entry in the bag for `year` (with any
-value) will yield both the and the `yearName` Gregorian
-`relatedYear`:
+Some calendars use named years; for example, the Chinese and Tibetan calendars use a 60-year [sexagenary cycle](https://en.wikipedia.org/wiki/Sexagenary_cycle) of named years. These calendars do not have a universal way to unambiguously number each year, so years are disambiguated by relationship to corresponding years on the Gregorian calendar. In this case, when the `DateTimeFormat` is configured to output the year component, a token for `relatedYear` is output instead of `year`.
 
 ```js
-const opts = { year: "numeric", month: "numeric", day: "numeric" };
-const df = new Intl.DateTimeFormat("zh-u-ca-chinese", opts);
+const df = new Intl.DateTimeFormat("zh-u-ca-chinese");
 df.formatToParts(Date.UTC(2012, 11, 17, 3, 0, 42));
 
-// return value
+// return value:
 [
   { type: "relatedYear", value: "2012" },
   { type: "literal", value: "年" },
@@ -185,53 +148,24 @@ df.formatToParts(Date.UTC(2012, 11, 17, 3, 0, 42));
 ];
 ```
 
-If the `year` option is not set in the bag (to any value), the result will
-include only the `relatedYear`:
+Sometimes, the combination of date-time component options maps to a format that also includes a `yearName`. There isn't a separate option that controls whether `yearName` is displayed or not. For example, the options below sets `month` to `"long"` and results in a `yearName` token, despite `year` still being `"numeric"`:
 
 ```js
-const df = new Intl.DateTimeFormat("zh-u-ca-chinese");
+const opts = { year: "numeric", month: "long", day: "numeric" };
+const df = new Intl.DateTimeFormat("zh-u-ca-chinese", opts);
 df.formatToParts(Date.UTC(2012, 11, 17, 3, 0, 42));
 
-// return value
+// return value:
 [
   { type: "relatedYear", value: "2012" },
+  { type: "yearName", value: "壬辰" },
   { type: "literal", value: "年" },
   { type: "month", value: "十一月" },
   { type: "day", value: "4" },
 ];
 ```
 
-In cases where the `year` would be output, `.format()` may
-commonly present these side-by-side:
-
-```js
-const df = new Intl.DateTimeFormat("zh-u-ca-chinese", { year: "numeric" });
-df.format(Date.UTC(2012, 11, 17, 3, 0, 42)); // 2012壬辰年
-```
-
-This also makes it possible to mix locale and calendar in both `format`:
-
-```js
-const df = new Intl.DateTimeFormat("en-u-ca-chinese", { year: "numeric" });
-const date = Date.UTC(2012, 11, 17, 3, 0, 42);
-df.format(date); // 2012(ren-chen)
-```
-
-And `formatToParts`:
-
-```js
-const opts = { month: "numeric", day: "numeric", year: "numeric" };
-const df = new Intl.DateTimeFormat("en-u-ca-chinese", opts);
-const date = Date.UTC(2012, 11, 17, 3);
-df.formatToParts(date);
-// [
-//   { type: 'month', value: '11' },
-//   { type: 'literal', value: '/' },
-//   { type: 'day', value: '4' },
-//   { type: 'literal', value: '/' },
-//   { type: 'relatedYear', value: '2012' }
-// ]
-```
+Because `format()` just concatenates all the `value` strings together, you will see the Gregorian year and the year name together in the output in this case.
 
 ## Specifications
 
@@ -245,6 +179,3 @@ df.formatToParts(date);
 
 - {{jsxref("Intl.DateTimeFormat")}}
 - {{jsxref("Intl/DateTimeFormat/format", "Intl.DateTimeFormat.prototype.format()")}}
-- {{jsxref("Date.prototype.toLocaleString()")}}
-- {{jsxref("Date.prototype.toLocaleDateString()")}}
-- {{jsxref("Date.prototype.toLocaleTimeString()")}}
diff --git a/files/en-us/web/javascript/reference/global_objects/intl/durationformat/durationformat/index.md b/files/en-us/web/javascript/reference/global_objects/intl/durationformat/durationformat/index.md
index a99fe8f9a8c733a..ea16de43ff35a4d 100644
--- a/files/en-us/web/javascript/reference/global_objects/intl/durationformat/durationformat/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/intl/durationformat/durationformat/index.md
@@ -41,7 +41,7 @@ new Intl.DurationFormat(locales, options)
     - `numberingSystem`
       - : The numbering system to use for number formatting, such as `"arab"`, `"hans"`, `"mathsans"`, and so on. For a list of supported numbering system types, see [`Intl.Locale.prototype.getNumberingSystems()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getNumberingSystems#supported_numbering_system_types). This option can also be set through the `nu` Unicode extension key; if both are provided, this `options` property takes precedence.
     - `style`
-      - : The style of the formatted duration. Possible values are:
+      - : The style of the formatted duration. This value is used as the default for all other unit options, and also corresponds to the `style` option of {{jsxref("Intl/ListFormat/ListFormat", "Intl.ListFormat()")}} when concatenating the list of duration units. Possible values are:
         - `"long"`
           - : E.g., 1 hour and 50 minutes
         - `"short"` (default)
diff --git a/files/en-us/web/javascript/reference/global_objects/intl/durationformat/formattoparts/index.md b/files/en-us/web/javascript/reference/global_objects/intl/durationformat/formattoparts/index.md
index b6c89eafff3a7dd..a5d080739180693 100644
--- a/files/en-us/web/javascript/reference/global_objects/intl/durationformat/formattoparts/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/intl/durationformat/formattoparts/index.md
@@ -7,7 +7,7 @@ browser-compat: javascript.builtins.Intl.DurationFormat.formatToParts
 
 {{JSRef}}
 
-The **`formatToParts()`** method of {{jsxref("Intl.DurationFormat")}} instances allows locale-aware formatting of strings produced by {{jsxref("Intl.DurationFormat")}} formatters.
+The **`formatToParts()`** method of {{jsxref("Intl.DurationFormat")}} instances returns an array of objects representing each part of the formatted string that would be returned by {{jsxref("Intl/DurationFormat/format", "format()")}}. It is useful for building custom strings from the locale-specific tokens.
 
 ## Syntax
 
@@ -22,23 +22,7 @@ formatToParts(duration)
 
 ### Return value
 
-An {{jsxref("Array")}} of objects containing the formatted duration in parts.
-
-## Description
-
-The `formatToParts()` method is useful for custom formatting of duration objects. It returns an {{jsxref("Array")}} of objects containing the locale-specific tokens from which it possible to build custom strings while preserving the locale-specific parts. The structure the `formatToParts()` method returns, looks like this:
-
-```js
-[
-  { type: "integer", value: "7", unit: "hour" },
-  { type: "literal", value: " ", unit: "hour" },
-  { type: "unit", value: "hr", unit: "hour" },
-  { type: "literal", value: ", " },
-  { type: "integer", value: "8", unit: "minute" },
-  { type: "literal", value: " ", unit: "minute" },
-  { type: "unit", value: "min", unit: "minute" },
-];
-```
+An {{jsxref("Array")}} of objects containing the formatted duration in parts. Each object has two or three properties, `type`, `value`, and optionally `unit`, each containing a string. The string concatenation of `value`, in the order provided, will result in the same string as {{jsxref("Intl/DurationFormat/format", "format()")}}. The parts can be thought of as directly obtained from calling {{jsxref("Intl/NumberFormat/formatToParts", "Intl.NumberFormat.prototype.formatToParts()")}} with the numeric value and their respective units. All tokens that are produced by the `NumberFormat` have an additional `unit` property, which is the singular form of the input `unit`; this is for programmatic usage and is not localized. The localized unit is output as a separate `unit` token as part of the `NumberFormat` result. The parts from each duration unit are concatenated together in the same fashion as calling {{jsxref("Intl/ListFormat/formatToParts", "Intl.ListFormat.prototype.formatToParts()")}} with `{ type: "unit" }`, so additional literal tokens are inserted.
 
 ## Examples
 
@@ -77,7 +61,7 @@ new Intl.DurationFormat("en", { style: "long" }).formatToParts(duration);
   { type: "integer", value: "456", unit: "microsecond" },
   { type: "literal", value: " ", unit: "microsecond" },
   { type: "unit", value: "microseconds", unit: "microsecond" },
-  { type: "literal", value: " and " },
+  { type: "literal", value: ", " },
   { type: "integer", value: "789", unit: "nanosecond" },
   { type: "literal", value: " ", unit: "nanosecond" },
   { type: "unit", value: "nanoseconds", unit: "nanosecond" },
@@ -95,5 +79,4 @@ new Intl.DurationFormat("en", { style: "long" }).formatToParts(duration);
 ## See also
 
 - {{jsxref("Intl.DurationFormat")}}
-- {{jsxref("Intl.supportedValuesOf()")}}
-- {{jsxref("Intl")}}
+- {{jsxref("Intl/DurationFormat/format", "Intl.DurationFormat.prototype.format()")}}
diff --git a/files/en-us/web/javascript/reference/global_objects/intl/listformat/format/index.md b/files/en-us/web/javascript/reference/global_objects/intl/listformat/format/index.md
index c8a9261ff1c3424..404604815e04dfb 100644
--- a/files/en-us/web/javascript/reference/global_objects/intl/listformat/format/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/intl/listformat/format/index.md
@@ -15,14 +15,13 @@ language-specific representation of the list.
 ## Syntax
 
 ```js-nolint
-format()
 format(list)
 ```
 
 ### Parameters
 
 - `list`
-  - : An iterable object, such as an Array.
+  - : An iterable object, such as an Array, containing strings. Omitting it results in formatting the empty array, which could be slightly confusing, so it is advisable to always explicitly pass a list.
 
 ### Return value
 
@@ -31,14 +30,6 @@ A language-specific formatted string representing the elements of the list.
 > [!NOTE]
 > Most of the time, the formatting returned by `format()` is consistent. However, the output may vary between implementations, even within the same locale — output variations are by design and allowed by the specification. It may also not be what you expect. For example, the string may use non-breaking spaces or be surrounded by bidirectional control characters. You should not compare the results of `format()` to hardcoded constants.
 
-## Description
-
-The **`format()`** method returns a string that has been
-formatted based on parameters provided in the `Intl.ListFormat` object. The
-`locales` and `options` parameters customize the behavior of
-`format()` and let applications specify the language conventions that
-should be used to format the list.
-
 ## Examples
 
 ### Using format
diff --git a/files/en-us/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.md b/files/en-us/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.md
index e536b44bf4b8ac0..47dc10926ae06d1 100644
--- a/files/en-us/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.md
@@ -7,9 +7,7 @@ browser-compat: javascript.builtins.Intl.ListFormat.formatToParts
 
 {{JSRef}}
 
-The **`formatToParts()`** method of {{jsxref("Intl.ListFormat")}} instances
-returns an {{jsxref("Array")}} of objects representing the different components that
-can be used to format a list of values in a locale-aware fashion.
+The **`formatToParts()`** method of {{jsxref("Intl.ListFormat")}} instances returns an array of objects representing each part of the formatted string that would be returned by {{jsxref("Intl/ListFormat/format", "format()")}}. It is useful for building custom strings from the locale-specific tokens.
 
 {{EmbedInteractiveExample("pages/js/intl-listformat-prototype-formattoparts.html", "taller")}}
 
@@ -22,31 +20,20 @@ formatToParts(list)
 ### Parameters
 
 - `list`
-  - : An iterable object, such as an {{jsxref("Array")}}, to be formatted according to a locale.
+  - : An iterable object, such as an Array, containing strings. Omitting it results in formatting the empty array, which could be slightly confusing, so it is advisable to always explicitly pass a list.
 
 ### Return value
 
-An {{jsxref("Array")}} of components which contains the formatted parts from the list.
+An {{jsxref("Array")}} of objects containing the formatted list in parts. Each object has two properties, `type` and `value`, each containing a string. The string concatenation of `value`, in the order provided, will result in the same string as {{jsxref("Intl/ListFormat/format", "format()")}}. The `type` may be one of the following:
 
-## Description
-
-Whereas {{jsxref("Intl/ListFormat/format", "Intl.ListFormat.prototype.format()")}} returns a string being the formatted version
-of the list (according to the given locale and style options),
-`formatToParts()` returns an array of the different components of the
-formatted string.
-
-Each element of the resulting array has two properties: `type` and
-`value`. The `type` property may be either
-`"element"`, which refers to a value from the list, or
-`"literal"` which refers to a linguistic construct. The `value`
-property gives the content, as a string, of the token.
-
-The locale and style options used for formatting are given when constructing the
-{{jsxref("Intl.ListFormat")}} instance.
+- `literal`
+  - : Any string that's a part of the format pattern; for example `", "`, `", and"`, etc.
+- `element`
+  - : An element of the list, exactly as provided.
 
 ## Examples
 
-### Using formatToParts
+### Using formatToParts()
 
 ```js
 const fruits = ["Apple", "Orange", "Pineapple"];
@@ -77,6 +64,3 @@ console.table(myListFormat.formatToParts(fruits));
 
 - {{jsxref("Intl.ListFormat")}}
 - {{jsxref("Intl/ListFormat/format", "Intl.ListFormat.prototype.format()")}}
-- {{jsxref("Intl/RelativeTimeFormat/formatToParts", "Intl.RelativeTimeFormat.prototype.formatToParts()")}}
-- {{jsxref("Intl/NumberFormat/formatToParts", "Intl.NumberFormat.prototype.formatToParts()")}}
-- {{jsxref("Intl/DateTimeFormat/formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}
diff --git a/files/en-us/web/javascript/reference/global_objects/intl/numberformat/formatrangetoparts/index.md b/files/en-us/web/javascript/reference/global_objects/intl/numberformat/formatrangetoparts/index.md
index 79ebdee27c0aedb..3601dabfe15167e 100644
--- a/files/en-us/web/javascript/reference/global_objects/intl/numberformat/formatrangetoparts/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/intl/numberformat/formatrangetoparts/index.md
@@ -24,55 +24,16 @@ formatRangeToParts(startRange, endRange)
 
 ### Return value
 
-An {{jsxref("Array")}} of objects containing the formatted range of numbers in parts.
-
-The structure of the returned looks like this:
-
-```js
-[
-  { type: "integer", value: "3", source: "startRange" },
-  { type: "literal", value: "-", source: "shared" },
-  { type: "integer", value: "5", source: "endRange" },
-  { type: "literal", value: " ", source: "shared" },
-  { type: "currency", value: "€", source: "shared" },
-];
-```
-
-Possible values for the `type` property include:
-
-- `currency`
-  - : The currency string, such as the symbols "$" and "€" or the name "Dollar", "Euro", depending on how `currencyDisplay` is specified.
-- `decimal`
-  - : The decimal separator string (".").
-- `fraction`
-  - : The fraction number.
-- `group`
-  - : The group separator string (",").
-- `infinity`
-  - : The {{jsxref("Infinity")}} string ("∞").
-- `integer`
-  - : The integer number.
-- `literal`
-  - : Any literal strings or whitespace in the formatted number.
-- `minusSign`
-  - : The minus sign string ("-").
-- `nan`
-  - : The {{jsxref("NaN")}} string ("NaN").
-- `plusSign`
-  - : The plus sign string ("+").
-- `percentSign`
-  - : The percent sign string ("%").
-- `unit`
-  - : The unit string, such as the "l" or "litres", depending on how `unitDisplay` is specified.
-
-Possible values for the `source` property include:
+An {{jsxref("Array")}} of objects containing the formatted range in parts. Each object has three properties, `type`, `value`, and `source`, each containing a string. The string concatenation of `value`, in the order provided, will result in the same string as {{jsxref("Intl/NumberFormat/formatRange", "formatRange()")}}. The `type` may have the same values as {{jsxref("Intl/NumberFormat/formatToParts", "formatToParts()")}}. The `source` can be one of the following:
 
 - `startRange`
-  - : The object is the start part of the range.
+  - : The token is a part of the start number.
 - `endRange`
-  - : The object is the end part of the range.
+  - : The token is a part of the end number.
 - `shared`
-  - : The object is a "shared" part of the range, such as a separator or currency.
+  - : The token is shared between the start and end; for example, the currency symbol. All literals that are part of the range pattern itself, such as the `"–"` separator, are also marked as `shared`.
+
+If the start and end numbers are equivalent, then the output has the same list of tokens as calling {{jsxref("Intl/NumberFormat/formatToParts", "formatToParts()")}} on the start number, with all tokens marked as `source: "shared"`.
 
 ### Exceptions
 
@@ -83,9 +44,9 @@ Possible values for the `source` property include:
 
 ## Examples
 
-### Comparing formatRange and formatRangeToParts
+### Using formatRangeToParts()
 
-`NumberFormat` outputs localized, opaque strings that cannot be manipulated directly:
+The `formatRange()` method outputs localized, opaque strings that cannot be manipulated directly:
 
 ```js
 const startRange = 3500;
@@ -100,8 +61,7 @@ console.log(formatter.formatRange(startRange, endRange));
 // "3.500,00–9.500,00 €"
 ```
 
-However, for many user interfaces there is a need to customize the formatting of this string.
-The `formatRangeToParts` method enables locale-aware formatting of strings produced by `NumberFormat` formatters by providing you the string in parts:
+However, in many user interfaces you may want to customize the formatting of this string, or interleave it with other texts. The `formatRangeToParts()` method produces the same information in parts:
 
 ```js
 console.log(formatter.formatRangeToParts(startRange, endRange));
@@ -136,4 +96,3 @@ console.log(formatter.formatRangeToParts(startRange, endRange));
 
 - {{jsxref("Intl.NumberFormat")}}
 - {{jsxref("Intl/NumberFormat/format", "Intl.NumberFormat.prototype.format()")}}
-- {{jsxref("Intl/DateTimeFormat/formatRangeToParts", "Intl.DateTimeFormat.prototype.formatRangeToParts()")}}
diff --git a/files/en-us/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.md b/files/en-us/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.md
index da6c36e399691ee..9a22bc6203fb197 100644
--- a/files/en-us/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.md
@@ -7,7 +7,7 @@ browser-compat: javascript.builtins.Intl.NumberFormat.formatToParts
 
 {{JSRef}}
 
-The **`formatToParts()`** method of {{jsxref("Intl.NumberFormat")}} instances allows locale-aware formatting of strings produced by this `Intl.NumberFormat` object.
+The **`formatToParts()`** method of {{jsxref("Intl.NumberFormat")}} instances returns an array of objects representing each part of the formatted string that would be returned by {{jsxref("Intl/NumberFormat/format", "format()")}}. It is useful for building custom strings from the locale-specific tokens.
 
 {{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-formattoparts.html")}}
 
@@ -24,67 +24,48 @@ formatToParts(number)
 
 ### Return value
 
-An {{jsxref("Array")}} of objects containing the formatted number in parts.
+An {{jsxref("Array")}} of objects containing the formatted number in parts. Each object has two properties, `type` and `value`, each containing a string. The string concatenation of `value`, in the order provided, will result in the same string as {{jsxref("Intl/NumberFormat/format", "format()")}}. The `type` may be one of the following:
 
-## Description
-
-The `formatToParts()` method is useful for custom formatting of number
-strings. It returns an {{jsxref("Array")}} of objects containing the locale-specific
-tokens from which it possible to build custom strings while preserving the
-locale-specific parts. The structure the `formatToParts()` method returns,
-looks like this:
-
-```js
-[
-  { type: "integer", value: "3" },
-  { type: "group", value: "." },
-  { type: "integer", value: "500" },
-];
-```
-
-Possible types are the following:
-
-- `compact`
-  - : The exponent in `"long"` or `"short"` form, depending on how `compactDisplay` (which defaults to `short`) is specified when `notation` is set to `compact`.
-- `currency`
-  - : The currency string, such as the symbols "$" and "€" or the name "Dollar", "Euro", depending on how `currencyDisplay` is specified.
+- `literal`
+  - : Any string that's a part of the format pattern; for example `" "`. Note that common tokens like the decimal separator or the plus/minus signs have their own token types.
+- `integer`
+  - : The integral part of the number, or a segment of it if using grouping (controlled by `options.useGrouping`).
+- `group`
+  - : The group separator string, such as `","`. Only present when using grouping (controlled by `options.useGrouping`).
 - `decimal`
-  - : The decimal separator string (".").
-- `exponentInteger`
-  - : The exponent integer value, when `notation` is set to `scientific` or `engineering`.
-- `exponentMinusSign`
-  - : The exponent minus sign string ("-").
-- `exponentSeparator`
-  - : The exponent separator, when `notation` is set to `scientific` or `engineering`.
+  - : The decimal separator string, such as `"."`. Only present when `fraction` is present.
 - `fraction`
-  - : The fraction number.
-- `group`
-  - : The group separator string (",").
-- `infinity`
-  - : The {{jsxref("Infinity")}} string ("∞").
-- `integer`
-  - : The integer number.
-- `literal`
-  - : Any literal strings or whitespace in the formatted number.
-- `minusSign`
-  - : The minus sign string ("-").
+  - : The fractional part of the number.
+- `compact`
+  - : The compact exponent, such as `"M"` or `"thousands"`. Only present when `options.notation` is `"compact"`. The form (`"short"` or `"long"`) can be controlled via `options.compactDisplay`.
+- `exponentSeparator`
+  - : The exponent separator, such as `"E"`. Only present when `options.notation` is `"scientific"` or `"engineering"`.
+- `exponentMinusSign`
+  - : The exponent minus sign string, such as `"-"`. Only present when `options.notation` is `"scientific"` or `"engineering"` and the exponent is negative.
+- `exponentInteger`
+  - : The exponent's integer value. Only present when `options.notation` is `"scientific"` or `"engineering"`.
 - `nan`
-  - : The {{jsxref("NaN")}} string ("NaN").
+  - : A string representing {{jsxref("NaN")}}, such as `"NaN"`. This is the sole token representing the number itself when the number is `NaN`.
+- `infinity`
+  - : A string representing {{jsxref("Infinity")}} or `-Infinity`, such as `"∞"`. This is the sole token representing the number itself when the number is `Infinity` or `-Infinity`.
 - `plusSign`
-  - : The plus sign string ("+").
+  - : The plus sign, such as `"+"`.
+- `minusSign`
+  - : The minus sign, such as `"-"`.
 - `percentSign`
-  - : The percent sign string ("%").
+  - : The percent sign, such as `"%"`. Only present when `options.style` is `"percent"`.
 - `unit`
-  - : The unit string, such as the "l" or "litres", depending on how `unitDisplay` is specified.
+  - : The unit string, such as `"l"` or `"litres"`. Only present when `options.style` is `"unit"`. The form (`"short"`, `"narrow"`, or `"long"`) can be controlled via `options.unitDisplay`.
+- `currency`
+  - : The currency string, such as `"$"`, `"€"`, `"Dollar"`, or `"Euro"`. Only present when `options.style` is `"currency"`. The form (`"code"`, `"symbol"`, `"narrowSymbol"`, or `"name"`) can be controlled via `options.currencyDisplay`.
 - `unknown`
-  - : The string for `unknown` type results.
+  - : Reserved for any token that's not recognized as one of the above; should be rarely encountered.
 
 ## Examples
 
-### Comparing format and formatToParts
+### Using formatToParts()
 
-`NumberFormat` outputs localized, opaque strings that cannot be manipulated
-directly:
+The `format()` method outputs localized, opaque strings that cannot be manipulated directly:
 
 ```js
 const number = 3500;
@@ -98,10 +79,7 @@ formatter.format(number);
 // "3.500,00 €"
 ```
 
-However, in many User Interfaces there is a desire to customize the formatting of this
-string. The `formatToParts` method enables locale-aware formatting of
-strings produced by `NumberFormat` formatters by providing you the string
-in parts:
+However, in many user interfaces you may want to customize the formatting of this string, or interleave it with other texts. The `formatToParts()` method produces the same information in parts:
 
 ```js
 formatter.formatToParts(number);
@@ -118,11 +96,7 @@ formatter.formatToParts(number);
 ];
 ```
 
-Now the information is available separately and it can be formatted and concatenated
-again in a customized way. For example by using {{jsxref("Array.prototype.map()")}},
-[arrow functions](/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions),
-a [switch statement](/en-US/docs/Web/JavaScript/Reference/Statements/switch),
-[template literals](/en-US/docs/Web/JavaScript/Reference/Template_literals), and {{jsxref("Array.prototype.reduce()")}}.
+Now the information is available separately and it can be formatted and concatenated again in a customized way. For example by using {{jsxref("Array.prototype.map()")}}, [arrow functions](/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), a [switch statement](/en-US/docs/Web/JavaScript/Reference/Statements/switch), [template literals](/en-US/docs/Web/JavaScript/Reference/Template_literals), and {{jsxref("Array.prototype.join()")}}, to insert additional markup for certain components.
 
 ```js
 const numberString = formatter
@@ -135,12 +109,8 @@ const numberString = formatter
         return value;
     }
   })
-  .reduce((string, part) => string + part);
-```
+  .join("");
 
-This will make the currency bold, when using the `formatToParts()` method.
-
-```js
 console.log(numberString);
 // "3.500,00 €"
 ```
@@ -157,4 +127,3 @@ console.log(numberString);
 
 - {{jsxref("Intl.NumberFormat")}}
 - {{jsxref("Intl/NumberFormat/format", "Intl.NumberFormat.prototype.format()")}}
-- {{jsxref("Intl/DateTimeFormat/formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}
diff --git a/files/en-us/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.md b/files/en-us/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.md
index b741feb9456817c..a2c27500eed205e 100644
--- a/files/en-us/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.md
@@ -7,7 +7,7 @@ browser-compat: javascript.builtins.Intl.RelativeTimeFormat.formatToParts
 
 {{JSRef}}
 
-The **`formatToParts()`** method of {{jsxref("Intl.RelativeTimeFormat")}} instances returns an {{jsxref("Array")}} of objects representing the relative time format in parts that can be used for custom locale-aware formatting.
+The **`formatToParts()`** method of {{jsxref("Intl.RelativeTimeFormat")}} instances returns an array of objects representing each part of the formatted string that would be returned by {{jsxref("Intl/RelativeTimeFormat/format", "format()")}}. It is useful for building custom strings from the locale-specific tokens.
 
 {{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-formattoparts.html")}}
 
@@ -26,15 +26,13 @@ formatToParts(value, unit)
 
 ### Return value
 
-An {{jsxref("Array")}} of objects containing the formatted relative time in parts.
+An {{jsxref("Array")}} of objects containing the formatted relative time in parts. Each object has two or three properties, `type`, `value`, and optionally `unit`, each containing a string. The string concatenation of `value`, in the order provided, will result in the same string as {{jsxref("Intl/RelativeTimeFormat/format", "format()")}}. The parts can be thought of as directly obtained from calling {{jsxref("Intl/NumberFormat/formatToParts", "Intl.NumberFormat.prototype.formatToParts()")}} with the numeric value, passing only the `numberingSystem` option, and then adding additional `type: "literal"` tokens, such as `"in "`, `" days ago"`, etc. All tokens that are produced by the `NumberFormat` have an additional `unit` property, which is the singular form of the input `unit`; this is for programmatic usage and is not localized. The localized unit is output as a part of a literal token.
 
-## Description
-
-The `Intl.RelativeTimeFormat.prototype.formatToParts` method is a version of the format method which it returns an array of objects which represent "parts" of the object, separating the formatted number into its constituent parts and separating it from other surrounding text. These objects have two properties: type a `NumberFormat` formatToParts type, and value, which is the String which is the component of the output. If a "part" came from `NumberFormat`, it will have a unit property which indicates the unit being formatted; literals which are part of the larger frame will not have this property.
+When `options.numeric` is `"auto"`, and there's a special string for the value, the returned array is a single literal token.
 
 ## Examples
 
-### Using formatToParts
+### Using formatToParts()
 
 ```js
 const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
@@ -62,3 +60,4 @@ rtf.formatToParts(100, "day");
 ## See also
 
 - {{jsxref("Intl.RelativeTimeFormat")}}
+- {{jsxref("Intl/RelativeTimeFormat/format", "Intl.RelativeTimeFormat.prototype.format()")}}

From 243e5eabfe95971f2850fcfdf2a7b2f210c85532 Mon Sep 17 00:00:00 2001
From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com>
Date: Thu, 16 Jan 2025 02:37:31 +0100
Subject: [PATCH 037/102] fix: auto-cleanup by bot (#37666)

* chore: auto-fix Markdownlint, Prettier, and front-matter issues

* Make it uppercase

---------

Co-authored-by: Joshua Chen 
---
 files/en-us/glossary/baseline/typography/index.md           | 2 +-
 files/en-us/mozilla/firefox/releases/61/index.md            | 2 +-
 .../en-us/web/css/css_box_alignment/box_alignment/index.md  | 2 +-
 .../box_alignment_in_block_abspos_tables/index.md           | 2 +-
 .../css/css_box_alignment/box_alignment_in_flexbox/index.md | 2 +-
 .../css_box_alignment/box_alignment_in_grid_layout/index.md | 2 +-
 .../box_alignment_in_multi-column_layout/index.md           | 2 +-
 files/en-us/web/css/css_box_alignment/index.md              | 6 +++---
 files/en-us/web/svg/attribute/alignment-baseline/index.md   | 2 +-
 9 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/files/en-us/glossary/baseline/typography/index.md b/files/en-us/glossary/baseline/typography/index.md
index 45199bd983d17a1..64b22390066d86e 100644
--- a/files/en-us/glossary/baseline/typography/index.md
+++ b/files/en-us/glossary/baseline/typography/index.md
@@ -14,6 +14,6 @@ Other writing systems have different baselines. For example, Tibetan and similar
 
 ## See also
 
-- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment#types_of_alignment)
+- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment#types_of_alignment)
 - [CSS inline layout](/en-US/docs/Web/CSS/CSS_inline_layout) module
 - [Baseline (Typography)]() on Wikipedia
diff --git a/files/en-us/mozilla/firefox/releases/61/index.md b/files/en-us/mozilla/firefox/releases/61/index.md
index 7fcddb57567119a..f63a36bf024c7a5 100644
--- a/files/en-us/mozilla/firefox/releases/61/index.md
+++ b/files/en-us/mozilla/firefox/releases/61/index.md
@@ -36,7 +36,7 @@ _No changes._
 
 - CSS parsing has been parallelized ([Firefox bug 1346988](https://bugzil.la/1346988)).
 - Support for {{cssxref("font-variation-settings")}} and {{cssxref("font-optical-sizing")}} has been enabled by default ([Firefox bug 1447163](https://bugzil.la/1447163)).
-- The `grid-gap`, `grid-row-gap`, and `grid-column-gap` properties have been renamed to {{cssxref("gap")}}, {{cssxref("row-gap")}}, and {{cssxref("column-gap")}}, as they are no longer grid-specific ([Firefox bug 1398482](https://bugzil.la/1398482)). See [Box alignment; Gaps between boxes](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment#gaps_between_boxes) for additional details. The old names have been kept as aliases for web compatibility purposes.
+- The `grid-gap`, `grid-row-gap`, and `grid-column-gap` properties have been renamed to {{cssxref("gap")}}, {{cssxref("row-gap")}}, and {{cssxref("column-gap")}}, as they are no longer grid-specific ([Firefox bug 1398482](https://bugzil.la/1398482)). See [Box alignment; Gaps between boxes](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment#gaps_between_boxes) for additional details. The old names have been kept as aliases for web compatibility purposes.
 - The {{cssxref("flex-basis")}} `content` value is now supported ([Firefox bug 1105111](https://bugzil.la/1105111)).
 - Percentage values of {{cssxref("column-gap")}} are now supported in [CSS multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout) ([Firefox bug 1398537](https://bugzil.la/1398537)).
 - The CSS {{cssxref(":host")}} pseudo-class is now supported; this selects a custom element from inside its shadow DOM ([Firefox bug 992245](https://bugzil.la/992245)).
diff --git a/files/en-us/web/css/css_box_alignment/box_alignment/index.md b/files/en-us/web/css/css_box_alignment/box_alignment/index.md
index 9794afb81ba96de..a4e5fa1dffabb24 100644
--- a/files/en-us/web/css/css_box_alignment/box_alignment/index.md
+++ b/files/en-us/web/css/css_box_alignment/box_alignment/index.md
@@ -1,6 +1,6 @@
 ---
 title: CSS box alignment overview
-slug: Web/CSS/CSS_box_alignment/box_alignment
+slug: Web/CSS/CSS_box_alignment/Box_alignment
 page-type: guide
 ---
 
diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
index 099b136e46171da..f5f57d0bdb8f610 100644
--- a/files/en-us/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
+++ b/files/en-us/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
@@ -4,7 +4,7 @@ slug: Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables
 page-type: guide
 ---
 
-The [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module details how alignment works in various layout methods. In this guide, we explore how box alignment works in the context of block layout, including floated, positioned, and table elements. As this guide aims to detail things which are specific to block layout and box alignment, it should be read in conjunction with the [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide, which details the common features of box alignment across layout methods.
+The [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module details how alignment works in various layout methods. In this guide, we explore how box alignment works in the context of block layout, including floated, positioned, and table elements. As this guide aims to detail things which are specific to block layout and box alignment, it should be read in conjunction with the [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment) guide, which details the common features of box alignment across layout methods.
 
 ## align-content and justify-content
 
diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md
index 6c535b9e539db94..c44819db54f7924 100644
--- a/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md
+++ b/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md
@@ -6,7 +6,7 @@ page-type: guide
 
 {{CSSRef}}
 
-The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module details how alignment works in various layout methods. In this guide, we explore how box alignment works in the context of [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox). As this guide aims to detail things which are specific to flexbox and box alignment, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide, which details the common features of box alignment across layout methods.
+The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module details how alignment works in various layout methods. In this guide, we explore how box alignment works in the context of [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox). As this guide aims to detail things which are specific to flexbox and box alignment, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment) guide, which details the common features of box alignment across layout methods.
 
 ## Basic example
 
diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md
index f7dff9a24a30737..a272fcf9689d18c 100644
--- a/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md
+++ b/files/en-us/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md
@@ -8,7 +8,7 @@ page-type: guide
 
 The [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module details how alignment works in various layout methods. On this page, we explore how box alignment works in the context of [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout).
 
-As this guide aims to detail things which are specific to CSS grid layout and Box Alignment, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide, which details the common features of box alignment across layout methods.
+As this guide aims to detail things which are specific to CSS grid layout and Box Alignment, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment) guide, which details the common features of box alignment across layout methods.
 
 ## Basic example
 
diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
index aada480e70b098d..f1cccb2de0d1649 100644
--- a/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
+++ b/files/en-us/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
@@ -6,7 +6,7 @@ page-type: guide
 
 {{CSSRef}}
 
-The [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module details how alignment works in various layout methods; in this guide, we explore how box alignment works in the context of [multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout). As this guide aims to detail things that are specific to both modules, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment) guide, which details the common features of box alignment across layout methods.
+The [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module details how alignment works in various layout methods; in this guide, we explore how box alignment works in the context of [multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout). As this guide aims to detail things that are specific to both modules, it should be read in conjunction with the [box alignment overview](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment) guide, which details the common features of box alignment across layout methods.
 
 In [multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout/Basic_concepts), the {{glossary("alignment container")}} is the content box of the multicol container. The {{glossary("alignment subject")}} is the column box. The properties which apply to multi-column layouts are detailed below.
 
diff --git a/files/en-us/web/css/css_box_alignment/index.md b/files/en-us/web/css/css_box_alignment/index.md
index 867f64dec0517e4..2a46db4025c4119 100644
--- a/files/en-us/web/css/css_box_alignment/index.md
+++ b/files/en-us/web/css/css_box_alignment/index.md
@@ -44,10 +44,10 @@ The alignment of text and inline-level content is defined in [CSS text module](/
 
 - {{Glossary("Alignment container")}}
 - {{Glossary("Alignment subject")}}
-- [Baseline alignment](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment#baseline_alignment)
-- [Distributed alignment](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment#distributed_alignment)
+- [Baseline alignment](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment#baseline_alignment)
+- [Distributed alignment](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment#distributed_alignment)
 - {{Glossary("Fallback alignment")}}
-- [Positional alignment](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment#positional_alignment)
+- [Positional alignment](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment#positional_alignment)
 
 ## Guides
 
diff --git a/files/en-us/web/svg/attribute/alignment-baseline/index.md b/files/en-us/web/svg/attribute/alignment-baseline/index.md
index fd48292e03effa7..1bd78409fe9c76d 100644
--- a/files/en-us/web/svg/attribute/alignment-baseline/index.md
+++ b/files/en-us/web/svg/attribute/alignment-baseline/index.md
@@ -145,4 +145,4 @@ For object alignment in other elements (such as {{SVGElement("text")}}), see {{S
 
 ## See also
 
-- [CSS baseline alignment](/en-US/docs/Web/CSS/CSS_box_alignment/box_alignment#baseline_alignment)
+- [CSS baseline alignment](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment#baseline_alignment)

From bfb5a7ebb1aeafd70025723a495cdfdba412a802 Mon Sep 17 00:00:00 2001
From: Arman Charan 
Date: Thu, 16 Jan 2025 11:38:19 +1000
Subject: [PATCH 038/102] fix typo (#37668)

---
 files/en-us/web/api/url/pathname/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/api/url/pathname/index.md b/files/en-us/web/api/url/pathname/index.md
index 20aa16660136e83..9dfef11f5d1f85f 100644
--- a/files/en-us/web/api/url/pathname/index.md
+++ b/files/en-us/web/api/url/pathname/index.md
@@ -11,7 +11,7 @@ browser-compat: api.URL.pathname
 The **`pathname`** property of the {{domxref("URL")}} interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a `/` character.
 
 HTTPS, HTTP, or other URLs with [hierarchical schemes](https://www.rfc-editor.org/rfc/rfc3986#section-1.2.3) (which the URL standard calls "[special schemes](https://url.spec.whatwg.org/#special-scheme)") always have at least one (invisible) path segment: the empty string.
-The `pathname` value for such URLs will therefore always have a least one `/` character.
+The `pathname` value for such URLs will therefore always have at least one `/` character.
 
 For non-hierarchical schemes, if the URL has no path segments, the value of its `pathname` property will be the empty string.
 

From c4c270ae9af4adf462c058a6e646355611323784 Mon Sep 17 00:00:00 2001
From: Marty Hernandez Avedon 
Date: Wed, 15 Jan 2025 22:25:53 -0500
Subject: [PATCH 039/102] Replace dead link to inclusive design principles site
 (#37662)

A spammer is squatting on https://inclusivedesignprinciples.org now, and https://inclusivedesignprinciples.info/ appears to have the intended content. If the .info site isn't what was intended, maybe we need to point to a new resource (or an archived version of the old website)
---
 .../learn_web_development/core/design_for_developers/index.md   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/learn_web_development/core/design_for_developers/index.md b/files/en-us/learn_web_development/core/design_for_developers/index.md
index 4a20aac1e88c942..34b8ad9b7065577 100644
--- a/files/en-us/learn_web_development/core/design_for_developers/index.md
+++ b/files/en-us/learn_web_development/core/design_for_developers/index.md
@@ -63,7 +63,7 @@ Learning outcomes:
 Resources:
 
 - [Accessibility overview](/en-US/docs/Learn_web_development/Core/Accessibility)
-- [Inclusive design principles](https://inclusivedesignprinciples.org/), inclusivedesignprinciples.org
+- [Inclusive design principles](https://inclusivedesignprinciples.info/), inclusivedesignprinciples.info
 
 ## Design briefs
 

From a7c8d7fda7dae7094d6e7a73e72682d5d73b431b Mon Sep 17 00:00:00 2001
From: Estelle Weyl 
Date: Wed, 15 Jan 2025 23:31:03 -0800
Subject: [PATCH 040/102] Minor: See also: add grid to box alignment data types
 (#37661)

* See also: add grid to box alignment data types

* Another link
---
 files/en-us/web/css/baseline-position/index.md       | 2 ++
 files/en-us/web/css/content-distribution/index.md    | 1 +
 files/en-us/web/css/content-position/index.md        | 1 +
 files/en-us/web/css/css_flexible_box_layout/index.md | 1 +
 files/en-us/web/css/overflow-position/index.md       | 2 ++
 files/en-us/web/css/self-position/index.md           | 1 +
 6 files changed, 8 insertions(+)

diff --git a/files/en-us/web/css/baseline-position/index.md b/files/en-us/web/css/baseline-position/index.md
index c8fc915e55844ae..a00159f949e2944 100644
--- a/files/en-us/web/css/baseline-position/index.md
+++ b/files/en-us/web/css/baseline-position/index.md
@@ -45,3 +45,5 @@ The `` enumerated value type is specified using an optional `
 - Properties that use this data type: {{cssxref("align-content")}}, {{cssxref("align-items")}}, {{cssxref("align-self")}}, {{cssxref("justify-items")}}, {{cssxref("justify-self")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, and {{cssxref("place-self")}}
 - Other box alignment data types: {{cssxref("content-distribution")}}, {{cssxref("content-position")}}, {{cssxref("overflow-position")}}, and {{cssxref("self-position")}}
 - [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module
+- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
+- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module
diff --git a/files/en-us/web/css/content-distribution/index.md b/files/en-us/web/css/content-distribution/index.md
index 75deb707f51203e..3eb5e49af4aa71e 100644
--- a/files/en-us/web/css/content-distribution/index.md
+++ b/files/en-us/web/css/content-distribution/index.md
@@ -49,3 +49,4 @@ The following keyword values are represented by the `` gra
 - Other box alignment data types: {{cssxref("baseline-position")}}, {{cssxref("content-position")}}, {{cssxref("overflow-position")}}, and {{cssxref("self-position")}}
 - [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module
 - [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
+- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module
diff --git a/files/en-us/web/css/content-position/index.md b/files/en-us/web/css/content-position/index.md
index e0af4a100bfb6ec..713036ab3b8936f 100644
--- a/files/en-us/web/css/content-position/index.md
+++ b/files/en-us/web/css/content-position/index.md
@@ -47,3 +47,4 @@ The `` enumerated value type is specified using one of the fol
 - Other box alignment data types: {{cssxref("baseline-position")}}, {{cssxref("content-distribution")}}, {{cssxref("content-position")}}, {{cssxref("overflow-position")}}, and {{cssxref("self-position")}}
 - [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module
 - [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
+- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module
diff --git a/files/en-us/web/css/css_flexible_box_layout/index.md b/files/en-us/web/css/css_flexible_box_layout/index.md
index d80f2b0a57309f1..1cd2e2fa998f5e3 100644
--- a/files/en-us/web/css/css_flexible_box_layout/index.md
+++ b/files/en-us/web/css/css_flexible_box_layout/index.md
@@ -121,5 +121,6 @@ body {
 
 ## See also
 
+- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module
 - [CSS writing modes](/en-US/docs/Web/CSS/CSS_writing_modes) module
 - [Using the multi-keyword syntax with CSS display](/en-US/docs/Web/CSS/display/multi-keyword_syntax_of_display)
diff --git a/files/en-us/web/css/overflow-position/index.md b/files/en-us/web/css/overflow-position/index.md
index fa96759a81207d7..a8202bb6872cbc0 100644
--- a/files/en-us/web/css/overflow-position/index.md
+++ b/files/en-us/web/css/overflow-position/index.md
@@ -42,3 +42,5 @@ The following keyword values are represented by the `` gramma
 - Properties that use this data type: {{cssxref("align-content")}}, {{cssxref("align-items")}}, {{cssxref("align-self")}}, {{cssxref("justify-content")}} {{cssxref("justify-items")}}, {{cssxref("justify-self")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, and {{cssxref("place-self")}}
 - Other box alignment data types: {{cssxref("content-distribution")}}, {{cssxref("content-position")}}, {{cssxref("baseline-position")}}, and {{cssxref("self-position")}}
 - [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module
+- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
+- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module
diff --git a/files/en-us/web/css/self-position/index.md b/files/en-us/web/css/self-position/index.md
index e7495f7b8cb2850..82970a3231d3909 100644
--- a/files/en-us/web/css/self-position/index.md
+++ b/files/en-us/web/css/self-position/index.md
@@ -51,3 +51,4 @@ The following keyword values are represented by the `` grammar te
 - Other box alignment data types: {{cssxref("baseline-position")}}, {{cssxref("content-distribution")}}, {{cssxref("overflow-position")}}, and {{cssxref("content-position")}}
 - [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module
 - [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
+- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module

From 63b1a2582144341f7e319ab12ecfd12a100358ed Mon Sep 17 00:00:00 2001
From: Brian Smith 
Date: Thu, 16 Jan 2025 11:50:21 +0100
Subject: [PATCH 041/102] chore(http): Add 'CSP' to Content-Security-Policy
 header page (#37657)

---
 .../en-us/web/http/headers/content-security-policy/index.md  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/files/en-us/web/http/headers/content-security-policy/index.md b/files/en-us/web/http/headers/content-security-policy/index.md
index 2bfdd877f718cd9..5236dfab2603318 100644
--- a/files/en-us/web/http/headers/content-security-policy/index.md
+++ b/files/en-us/web/http/headers/content-security-policy/index.md
@@ -1,5 +1,6 @@
 ---
-title: Content-Security-Policy
+title: Content-Security-Policy (CSP)
+short-title: Content-Security-Policy
 slug: Web/HTTP/Headers/Content-Security-Policy
 page-type: http-header
 browser-compat: http.headers.Content-Security-Policy
@@ -10,7 +11,7 @@ browser-compat: http.headers.Content-Security-Policy
 The HTTP **`Content-Security-Policy`** response header allows website administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints.
 This helps guard against {{Glossary("cross-site scripting")}} attacks.
 
-For more information, see the introductory article on [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP).
+See the [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP) guide for details about how a CSP is delivered to the browser, what it looks like, along with use cases and deployment strategies.
 
 

From 7a945328f569c5bf243c73a9e05bcd47b850c1be Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 16 Jan 2025 14:21:18 +0000
Subject: [PATCH 042/102] Bump lint-staged from 15.3.0 to 15.4.0 (#37675)

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 104d319270389c6..36e04ae05b7dd38 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "gray-matter": "^4.0.3",
     "husky": "9.1.7",
     "js-yaml": "^4.1.0",
-    "lint-staged": "15.3.0",
+    "lint-staged": "15.4.0",
     "markdownlint-cli2": "0.17.1",
     "markdownlint-rule-search-replace": "1.2.0",
     "prettier": "3.4.2"
diff --git a/yarn.lock b/yarn.lock
index 43636f2f442f1f1..cba746877a5d85f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5604,10 +5604,10 @@ linkify-it@^5.0.0:
   dependencies:
     uc.micro "^2.0.0"
 
-lint-staged@15.3.0:
-  version "15.3.0"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-15.3.0.tgz#32a0b3f2f2b8825950bd3b9fb093e045353bdfa3"
-  integrity sha512-vHFahytLoF2enJklgtOtCtIjZrKD/LoxlaUusd5nh7dWv/dkKQJY74ndFSzxCdv7g0ueGg1ORgTSt4Y9LPZn9A==
+lint-staged@15.4.0:
+  version "15.4.0"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-15.4.0.tgz#ea2d096c35452ba7854f31431bb5d195260c9474"
+  integrity sha512-UdODqEZiQimd7rCzZ2vqFuELRNUda3mdv7M93jhE4SmDiqAj/w/msvwKgagH23jv2iCPw6Q5m+ltX4VlHvp2LQ==
   dependencies:
     chalk "~5.4.1"
     commander "~12.1.0"

From 9ad94afb35bf16a6be881d39eb20b9c13aa5097e Mon Sep 17 00:00:00 2001
From: Gleb BUSHUKIN <58744878+NemoZon@users.noreply.github.com>
Date: Thu, 16 Jan 2025 20:13:47 +0100
Subject: [PATCH 043/102] add mention of property access on numeric literals
 (#37681)

* add mention of numeric literals

* fix: add no-lint & delete useless example

* Apply suggestions from code review

---------

Co-authored-by: Joshua Chen 
---
 .../errors/identifier_after_number/index.md   | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/files/en-us/web/javascript/reference/errors/identifier_after_number/index.md b/files/en-us/web/javascript/reference/errors/identifier_after_number/index.md
index 611be8a22a681c1..26fe9e474635760 100644
--- a/files/en-us/web/javascript/reference/errors/identifier_after_number/index.md
+++ b/files/en-us/web/javascript/reference/errors/identifier_after_number/index.md
@@ -42,9 +42,6 @@ const 1life = "foo";
 
 const foo = 1life;
 // SyntaxError: identifier starts immediately after numeric literal
-
-alert(1.foo);
-// SyntaxError: identifier starts immediately after numeric literal
 ```
 
 You will need to rename your variable to avoid the leading number.
@@ -54,6 +51,26 @@ const life1 = "foo";
 const foo = life1;
 ```
 
+In JavaScript, there is a syntactic peculiarity when calling properties or methods on numbers. If you want to call a method on an integer, you cannot immediately use a dot after the number because the dot is interpreted as the start of a decimal fraction, causing the parser to see the method's name as an identifier immediately after a number literal. To avoid this, you need to either wrap the number in parentheses or use a double dot, where the first dot is a decimal point for the number literal and the second dot is the property accessor.
+
+```js-nolint example-bad
+alert(typeof 1.toString())
+// SyntaxError: identifier starts immediately after numeric literal
+```
+
+Correct ways to call methods on numbers:
+
+```js-nolint example-good
+// Wrap the number in parentheses
+alert(typeof (1).toString());
+
+// Add an extra dot for the number literal
+alert(typeof 2..toString());
+
+// Use square brackets
+alert(typeof 3["toString"]());
+```
+
 ## See also
 
 - [Lexical grammar](/en-US/docs/Web/JavaScript/Reference/Lexical_grammar)

From 77be0bd59aea58e15e4ab6d2c5d9c31a8e0f95f1 Mon Sep 17 00:00:00 2001
From: Gleb BUSHUKIN <58744878+NemoZon@users.noreply.github.com>
Date: Thu, 16 Jan 2025 21:01:58 +0100
Subject: [PATCH 044/102] Delete unnecessary sentence (#37674)

Update index.md
---
 .../security/practical_implementation_guides/cookies/index.md   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/security/practical_implementation_guides/cookies/index.md b/files/en-us/web/security/practical_implementation_guides/cookies/index.md
index 26722eda74c9cc9..e7aa379cee4efa8 100644
--- a/files/en-us/web/security/practical_implementation_guides/cookies/index.md
+++ b/files/en-us/web/security/practical_implementation_guides/cookies/index.md
@@ -25,7 +25,7 @@ To minimize the scope for cookie vulnerabilities on your site, limit access to c
 - `HttpOnly`
   - : Cookies that don't require access from JavaScript should have the `HttpOnly` directive set to block access, such as from {{domxref("Document.cookie")}}. It is particularly important that session identifiers don't have JavaScript access, to help prevent attacks such as CSRF.
 - `Expires` and `Max-Age`
-  - : Cookies should expire as soon as they are no longer needed. Session identifiers in particular should expire as quickly as possible. `Expires` is preferred unless you need to support IE < 8, in which case use `Max-Age`.
+  - : Cookies should expire as soon as they are no longer needed. Session identifiers in particular should expire as quickly as possible.
     - `Expires`: Sets an absolute expiration date for a given cookie.
     - `Max-Age`: Sets a relative expiration date for a given cookie.
       > **Note:** `Expires` has been available for longer than `Max-Age`; however, `Max-Age` is less error-prone, and takes precedence when both are set. The rationale behind this is that when you set an `Expires` date and time, they're relative to the client on which the cookie is being set. If the server is set to a different time, this could cause errors.

From d6528c3d7881662e6aaa77cd2a1a49e3af349088 Mon Sep 17 00:00:00 2001
From: younisayoub <143106292+younisdev@users.noreply.github.com>
Date: Thu, 16 Jan 2025 22:06:30 +0200
Subject: [PATCH 045/102] Fix outdated syntax and double intialized variable. 
 (#37683)

* Fix outdated syntax and double intialized variable.

Fixed an outdated syntax and double initialization of the `request` variable, which leads to an error.

* Fix a minor typo.
---
 files/en-us/web/api/request/credentials/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/api/request/credentials/index.md b/files/en-us/web/api/request/credentials/index.md
index 0179093ad859c4a..170685b1f8e4dbe 100644
--- a/files/en-us/web/api/request/credentials/index.md
+++ b/files/en-us/web/api/request/credentials/index.md
@@ -31,7 +31,7 @@ In the following snippet, we create a new request using the {{domxref("Request.R
 
 ```js
 const request = new Request("flowers.jpg");
-const request = request.request; // returns "same-origin" by default
+const credentials = request.credentials; // returns "same-origin" by default
 ```
 
 ## Specifications

From ab65140829d7c4df540fd859c0a97a78b3b1fd33 Mon Sep 17 00:00:00 2001
From: Stephen Mutheu Muya 
Date: Thu, 16 Jan 2025 23:11:17 +0300
Subject: [PATCH 046/102] fix: auxclick, click, contentmenu events updated
 (#37679)

* auxclick, click, contentmenu events updated

* Apply suggestions from code review

---------

Co-authored-by: Joshua Chen 
---
 files/en-us/web/api/element/auxclick_event/index.md    | 2 +-
 files/en-us/web/api/element/click_event/index.md       | 2 +-
 files/en-us/web/api/element/contextmenu_event/index.md | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/files/en-us/web/api/element/auxclick_event/index.md b/files/en-us/web/api/element/auxclick_event/index.md
index 6664cdf78183e39..cea059f33c0a9f1 100644
--- a/files/en-us/web/api/element/auxclick_event/index.md
+++ b/files/en-us/web/api/element/auxclick_event/index.md
@@ -29,7 +29,7 @@ A {{domxref("PointerEvent")}}. Inherits from {{domxref("MouseEvent")}}.
 {{InheritanceDiagram("PointerEvent")}}
 
 > [!NOTE]
-> In earlier versions of the specification the event type for this event was a {{domxref("MouseEvent")}}, and this is still the type passed in Firefox and Safari.
+> In earlier versions of the specification, the event type for this event was a {{domxref("MouseEvent")}}. Check [browser compatibility](#browser_compatibility) for more information.
 
 ## Event properties
 
diff --git a/files/en-us/web/api/element/click_event/index.md b/files/en-us/web/api/element/click_event/index.md
index e1bdd209c5e687a..84dd872cd50adcb 100644
--- a/files/en-us/web/api/element/click_event/index.md
+++ b/files/en-us/web/api/element/click_event/index.md
@@ -37,7 +37,7 @@ A {{domxref("PointerEvent")}}. Inherits from {{domxref("MouseEvent")}}.
 {{InheritanceDiagram("PointerEvent")}}
 
 > [!NOTE]
-> In earlier versions of the specification the event type for this event was a {{domxref("MouseEvent")}}, and this is still the type passed in Firefox and Safari.
+> In earlier versions of the specification, the event type for this event was a {{domxref("MouseEvent")}}. Check [browser compatibility](#browser_compatibility) for more information.
 
 ## Event properties
 
diff --git a/files/en-us/web/api/element/contextmenu_event/index.md b/files/en-us/web/api/element/contextmenu_event/index.md
index 851c96190951549..b61ed03bd58bc08 100644
--- a/files/en-us/web/api/element/contextmenu_event/index.md
+++ b/files/en-us/web/api/element/contextmenu_event/index.md
@@ -34,7 +34,7 @@ A {{domxref("PointerEvent")}}. Inherits from {{domxref("MouseEvent")}}.
 {{InheritanceDiagram("PointerEvent")}}
 
 > [!NOTE]
-> In earlier versions of the specification the event type for this event was a {{domxref("MouseEvent")}}, and this is still the type passed in Firefox and Safari.
+> In earlier versions of the specification, the event type for this event was a {{domxref("MouseEvent")}}. Check [browser compatibility](#browser_compatibility) for more information.
 
 ## Event properties
 

From c5806a7b25ce499217abe53e53f909b027d3734f Mon Sep 17 00:00:00 2001
From: younisayoub <143106292+younisdev@users.noreply.github.com>
Date: Thu, 16 Jan 2025 22:43:43 +0200
Subject: [PATCH 047/102] Fix typo in 'justify-self' documentation: change 'an
 intrinsic sizes'  to 'an intrinsic size' (#37684)

Fix typo in 'justify-self' documentation: change 'an intrinsic sizes' to 'an intrinsic size'
---
 files/en-us/web/css/justify-self/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/css/justify-self/index.md b/files/en-us/web/css/justify-self/index.md
index bff8949755cce3c..735151fd70670a0 100644
--- a/files/en-us/web/css/justify-self/index.md
+++ b/files/en-us/web/css/justify-self/index.md
@@ -77,7 +77,7 @@ This property can take one of three different forms:
     - In absolutely-positioned layouts, the keyword behaves like `start` on _replaced_ absolutely-positioned boxes, and as `stretch` on _all other_ absolutely-positioned boxes.
     - In table cell layouts, this keyword has no meaning as this property is _ignored_.
     - In flexbox layouts, this keyword has no meaning as this property is _ignored._
-    - In grid layouts, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like `start`.
+    - In grid layouts, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic size where it behaves like `start`.
 
 - `start`
   - : The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.

From 6507fce619e492a688a1141b40e813a3ead194ee Mon Sep 17 00:00:00 2001
From: Anika Islam Neha <76821812+aneha15@users.noreply.github.com>
Date: Fri, 17 Jan 2025 07:28:35 +0600
Subject: [PATCH 048/102] Fix typos (#37539) (#37671)

---
 .../aligning_items_in_a_flex_container/index.md             | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/files/en-us/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md b/files/en-us/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
index e462ae603d42677..83687c0cdee7a4f 100644
--- a/files/en-us/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
+++ b/files/en-us/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
@@ -190,7 +190,7 @@ You can try this out in the example below, which has a flex container with `flex
 
 ## Aligning content on the cross axis with the `align-content` property
 
-So far, we have focused on aligning items or an individual items inside the area defined by a {{glossary("flex_container")}} containing a single line of flex items. When flex items are allowed to wrap across multiple lines, the {{cssxref("align-content")}} property can be used to control the distribution of space between the lines, also known as **packing flex lines**.
+So far, we have focused on aligning items or individual items inside the area defined by a {{glossary("flex container")}} containing a single line of flex items. When flex items are allowed to wrap across multiple lines, the {{cssxref("align-content")}} property can be used to control the distribution of space between the lines, also known as **packing flex lines**.
 
 For `align-content` to have an effect, the cross axis dimension (the height in this case) of the flex container must be greater than needed to display the items. It then works on all the items as a set. The `align-content` values dictate what happens with the extra available space and the alignment of the entire set of items within it.
 
@@ -307,7 +307,7 @@ In our initial example with `display: flex` on the container, the items display
 
 ![Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items.](align6.png)
 
-The `baseline` values aren't relevant in this dimension. Otherwise, `justify-content` property accepts the same values as `align-content`.
+The `baseline` values aren't relevant in this dimension. Otherwise, the `justify-content` property accepts the same values as `align-content`.
 
 - `justify-content: flex-start`
 - `justify-content: flex-end`
@@ -514,7 +514,7 @@ In this live example, the flex items are arranged in a row with the basic flex v
 To create a gap between flex items, use the {{cssxref("gap")}}, {{cssxref("column-gap")}}, and {{cssxref("row-gap")}} properties. The {{cssxref("column-gap")}} property creates gaps between items in a row. The {{cssxref("row-gap")}} property creates gaps between flex lines when you have {{cssxref("flex-wrap")}} set to `wrap`.
 
 The {{cssxref("gap")}} property is a shorthand that sets both `row-gap` and `column-gap`.
-The gap between flex items or between flex line depends on the direction. If the {{cssxref("flex-direction")}} property creates rows, the first value defines the gap between flex lines, and the second value defines the gap between items within each line. With columns (when `flex-direction` is set to `column` or `column-reverse`), the first value defines the gap between flex items, and the second value defines the gaps between flex lines.
+The gaps between flex items or flex lines depend on the direction. If the {{cssxref("flex-direction")}} property creates rows, the first value defines the gap between flex lines, and the second value defines the gap between items within each line. With columns (when `flex-direction` is set to `column` or `column-reverse`), the first value defines the gap between flex items, and the second value defines the gaps between flex lines.
 
 ```html live-sample___gap
 


From 4030a3382d2f2ee9a2aa6232c1fbb5724a27cc8b Mon Sep 17 00:00:00 2001
From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com>
Date: Fri, 17 Jan 2025 09:30:11 +0800
Subject: [PATCH 049/102] Update `filter-function-list` to `filter-value-list`
 (#37633)

* Update `filter-function-list` to `filter-value-list`

* update
---
 files/en-us/web/css/backdrop-filter/index.md  | 2 +-
 files/en-us/web/svg/attribute/filter/index.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/en-us/web/css/backdrop-filter/index.md b/files/en-us/web/css/backdrop-filter/index.md
index 03b805456f8be22..7b13c3f7fface61 100644
--- a/files/en-us/web/css/backdrop-filter/index.md
+++ b/files/en-us/web/css/backdrop-filter/index.md
@@ -47,7 +47,7 @@ backdrop-filter: unset;
 
 - `none`
   - : No filter is applied to the backdrop.
-- ``
+- ``
   - : A space-separated list of {{cssxref("<filter-function>")}}s or an [SVG filter](/en-US/docs/Web/SVG/Element/filter) that will be applied to the backdrop. CSS ``s include {{CSSxRef("filter-function/blur", "blur()")}}, {{CSSxRef("filter-function/brightness", "brightness()")}}, {{CSSxRef("filter-function/contrast", "contrast()")}}, {{CSSxRef("filter-function/drop-shadow", "drop-shadow()")}}, {{CSSxRef("filter-function/grayscale", "grayscale()")}}, {{CSSxRef("filter-function/hue-rotate", "hue-rotate()")}}, {{CSSxRef("filter-function/invert", "invert()")}}, {{CSSxRef("filter-function/opacity", "opacity()")}}, {{CSSxRef("filter-function/saturate", "saturate()")}}, and {{CSSxRef("filter-function/sepia", "sepia()")}}.
 
 ## Formal definition
diff --git a/files/en-us/web/svg/attribute/filter/index.md b/files/en-us/web/svg/attribute/filter/index.md
index 5538eb7268da536..8611b53c68697bd 100644
--- a/files/en-us/web/svg/attribute/filter/index.md
+++ b/files/en-us/web/svg/attribute/filter/index.md
@@ -49,7 +49,7 @@ svg {
           title="Single bar: exactly one of the entities must be present"
           >|
-        <filter-function-list>
+        <filter-value-list>
       
     
     


From a09c221ec70c550da9939d2d105defc1d75ec322 Mon Sep 17 00:00:00 2001
From: Jacob Cassidy 
Date: Fri, 17 Jan 2025 08:31:39 +0700
Subject: [PATCH 050/102] Fix displayed URL titles for Specifications section
 (#37541)

Fix displayed URL title for specifications
---
 files/en-us/web/css/css_overflow/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/en-us/web/css/css_overflow/index.md b/files/en-us/web/css/css_overflow/index.md
index 59a8120532db5b6..b94c2a392155219 100644
--- a/files/en-us/web/css/css_overflow/index.md
+++ b/files/en-us/web/css/css_overflow/index.md
@@ -3,8 +3,8 @@ title: CSS overflow
 slug: Web/CSS/CSS_overflow
 page-type: css-module
 spec-urls:
-  - https://drafts.csswg.org/css-overflow-3
-  - https://drafts.csswg.org/css-overflow-4
+  - https://drafts.csswg.org/css-overflow-3/
+  - https://drafts.csswg.org/css-overflow-4/
 ---
 
 {{CSSRef}}

From 232dc9186a6d79d7e12b3000999ad026d63e995e Mon Sep 17 00:00:00 2001
From: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
Date: Fri, 17 Jan 2025 10:58:03 +0800
Subject: [PATCH 051/102] fix: correct gfm syntax (#37688)

---
 .../http/headers/content-security-policy/index.md | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/files/en-us/web/http/headers/content-security-policy/index.md b/files/en-us/web/http/headers/content-security-policy/index.md
index 5236dfab2603318..3443265a5b127b2 100644
--- a/files/en-us/web/http/headers/content-security-policy/index.md
+++ b/files/en-us/web/http/headers/content-security-policy/index.md
@@ -207,7 +207,8 @@ If a directive contains a nonce and `unsafe-inline`, then the browser ignores `u
 
 See [Nonces](/en-US/docs/Web/HTTP/CSP#nonces) in the CSP guide for more usage information.
 
-> [!NOTE] Nonce source expressions are only applicable to {{htmlelement("script")}} and {{htmlelement("style")}} elements.
+> [!NOTE]
+> Nonce source expressions are only applicable to {{htmlelement("script")}} and {{htmlelement("style")}} elements.
 
 ### '\-'
 
@@ -230,7 +231,8 @@ If a directive contains a hash and `unsafe-inline`, then the browser ignores `un
 
 See [Hashes](/en-US/docs/Web/HTTP/CSP#hashes) in the CSP guide for more usage information.
 
-> [!NOTE] Hash source expressions are only applicable to {{htmlelement("script")}} and {{htmlelement("style")}} elements.
+> [!NOTE]
+> Hash source expressions are only applicable to {{htmlelement("script")}} and {{htmlelement("style")}} elements.
 
 ### \
 
@@ -281,7 +283,8 @@ By default, if a CSP contains a `default-src` or a `script-src` directive, then
 
 The `unsafe-eval` keyword can be used to undo this protection, allowing dynamic evaluation of strings as JavaScript.
 
-> [!WARNING] Developers should avoid `'unsafe-eval'`, because it defeats much of the purpose of having a CSP.
+> [!WARNING]
+> Developers should avoid `'unsafe-eval'`, because it defeats much of the purpose of having a CSP.
 
 See [`eval()` and similar APIs](/en-US/docs/Web/HTTP/CSP#eval_and_similar_apis) in the CSP guide for more usage information.
 
@@ -306,7 +309,8 @@ Similarly, if a CSP contains `default-src` or a `style-src` directive, then inli
 
 The `unsafe-inline` keyword can be used to undo this protection, allowing all these forms to be loaded.
 
-> [!WARNING] Developers should avoid `'unsafe-inline'`, because it defeats much of the purpose of having a CSP.
+> [!WARNING]
+> Developers should avoid `'unsafe-inline'`, because it defeats much of the purpose of having a CSP.
 
 See [Inline JavaScript](/en-US/docs/Web/HTTP/CSP#inline_javascript) in the CSP guide for more usage information.
 
@@ -322,7 +326,8 @@ script-src 'unsafe-hashes' 'sha256-cd9827ad...'
 
 If the hash value matches the hash of an inline event handler attribute value or of a `style` attribute value, then the code will be allowed to execute.
 
-> [!WARNING] The `'unsafe-hashes'` value is unsafe.
+> [!WARNING]
+> The `'unsafe-hashes'` value is unsafe.
 >
 > In particular, it enables an attack in which the content of the inline event handler attribute is injected into the document as an inline `