From 245e56693416d64d8720b87a704c3f2a5a5a42fb Mon Sep 17 00:00:00 2001 From: oti Date: Fri, 12 May 2023 05:23:04 +0900 Subject: [PATCH 01/86] Fix the description of the display property according to the CSS specification (#26612) * change: `block element box` -> `block level box` * change: `inline element boxes` -> `inline level boxes` * change: `block element` -> `block level` * change: `inline element` -> `inline level` * fix: `inline/block level box` -> `inline/block box` * change: `inline/block level` -> `inline-level/block-level element` * fix: `block level` -> `block-level element` --- files/en-us/web/css/display/index.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/files/en-us/web/css/display/index.md b/files/en-us/web/css/display/index.md index 9a06d1e32c4585b..66a8ab51d0eb266 100644 --- a/files/en-us/web/css/display/index.md +++ b/files/en-us/web/css/display/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.display {{CSSRef}} -The **`display`** [CSS](/en-US/docs/Web/CSS) property sets whether an element is treated as a [block or inline element](/en-US/docs/Web/CSS/CSS_Flow_Layout) and the layout used for its children, such as [flow layout](/en-US/docs/Web/CSS/CSS_Flow_Layout), [grid](/en-US/docs/Web/CSS/CSS_Grid_Layout) or [flex](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout). +The **`display`** [CSS](/en-US/docs/Web/CSS) property sets whether an element is treated as a [block or inline box](/en-US/docs/Web/CSS/CSS_Flow_Layout) and the layout used for its children, such as [flow layout](/en-US/docs/Web/CSS/CSS_Flow_Layout), [grid](/en-US/docs/Web/CSS/CSS_Grid_Layout) or [flex](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout). Formally, the **`display`** property sets an element's inner and outer _display types_. The outer type sets an element's participation in [flow layout](/en-US/docs/Web/CSS/CSS_Flow_Layout); the inner type sets the layout of children. Some values of `display` are fully defined in their own individual specifications; for example the detail of what happens when `display: flex` is declared is defined in the CSS Flexible Box Model specification. @@ -66,9 +66,9 @@ The keyword values can be grouped into six value categories. - : These keywords specify the element's outer display type, which is essentially its role in flow layout: - `block` - - : The element generates a block element box, generating line breaks both before and after the element when in the normal flow. + - : The element generates a block box, generating line breaks both before and after the element when in the normal flow. - `inline` - - : The element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space. + - : The element generates one or more inline boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space. > **Note:** Browsers that support the multi-keyword syntax, on finding the outer value only, such as when `display: block` or `display: inline` is specified, will set the inner value to `flow`. > This will result in expected behavior; for example, if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout. @@ -88,15 +88,15 @@ The keyword values can be grouped into six value categories. Depending on the value of other properties (such as {{CSSxRef("position")}}, {{CSSxRef("float")}}, or {{CSSxRef("overflow")}}) and whether it is itself participating in a block or inline formatting context, it either establishes a new [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context) (BFC) for its contents or integrates its contents into its parent formatting context. - `flow-root` - - : The element generates a block element box that establishes a new [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context), defining where the formatting root lies. + - : The element generates a block box that establishes a new [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context), defining where the formatting root lies. - `table` - : These elements behave like HTML {{HTMLElement("table")}} elements. It defines a block-level box. - `flex` - - : The element behaves like a block element and lays out its content according to the [flexbox model](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout). + - : The element behaves like a block-level element and lays out its content according to the [flexbox model](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout). - `grid` - - : The element behaves like a block element and lays out its content according to the [grid model](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout). + - : The element behaves like a block-level element and lays out its content according to the [grid model](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout). - `ruby` {{Experimental_Inline}} - - : The element behaves like an inline element and lays out its content according to the ruby formatting model. It behaves like the corresponding HTML {{HTMLElement("ruby")}} elements. + - : The element behaves like an inline-level element and lays out its content according to the ruby formatting model. It behaves like the corresponding HTML {{HTMLElement("ruby")}} elements. > **Note:** Browsers that support the multi-keyword syntax, on finding the inner value only, such as when `display: flex` or `display: grid` is specified, will set their outer value to `block`. > This will result in expected behavior; for example, if you specify an element to be `display: grid`, you would expect that the box created on the grid container would be a block-level box. @@ -168,7 +168,7 @@ This can be used together with {{CSSxRef("list-style-type")}} and {{CSSxRef("lis - `inline-block` - - : The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would). + - : The element generates a block box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would). It is equivalent to `inline flow-root`. @@ -180,13 +180,13 @@ This can be used together with {{CSSxRef("list-style-type")}} and {{CSSxRef("lis - `inline-flex` - - : The element behaves like an inline element and lays out its content according to the flexbox model. + - : The element behaves like an inline-level element and lays out its content according to the flexbox model. It is equivalent to `inline flex`. - `inline-grid` - - : The element behaves like an inline element and lays out its content according to the grid model. + - : The element behaves like an inline-level element and lays out its content according to the grid model. It is equivalent to `inline grid`. From f2b566d968271d16addc71e7e9dda5f52cb65a3a Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Fri, 12 May 2023 04:25:38 +0800 Subject: [PATCH 02/86] Adding missing sections for `container*` (#25739) * Update sections for `container` * Update sections for `container-name` * Update sections for `container-type` * Update files/en-us/web/css/container-name/index.md --------- Co-authored-by: Estelle Weyl Co-authored-by: Estelle Weyl Co-authored-by: Brian Thomas Smith --- files/en-us/web/css/container-name/index.md | 23 +++++++++++++++++++-- files/en-us/web/css/container-type/index.md | 20 +++++++++++++++++- files/en-us/web/css/container/index.md | 21 ++++++++++++++++++- 3 files changed, 60 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/container-name/index.md b/files/en-us/web/css/container-name/index.md index e18b0d4137f848c..e0c54ffb70dad61 100644 --- a/files/en-us/web/css/container-name/index.md +++ b/files/en-us/web/css/container-name/index.md @@ -13,8 +13,19 @@ When a containment context is given a name, it can be specifically targeted usin ## Syntax -```plain -container-name: ; +```css +/* A single name */ +container-name: myLayout; + +/* Multiple names */ +container-name: myPageLayout myComponentLibrary; + +/* Global Values */ +container-name: inherit; +container-name: initial; +container-name: revert; +container-name: revert-layer; +container-name: unset; ``` ### Values @@ -30,6 +41,14 @@ container-name: ; - The dashed ident intended to denote author-defined identifiers (e.g., `--container-name`) is permitted. - A list of multiple names separated by a space is allowed. +## Formal definition + +{{CSSInfo}} + +## Formal syntax + +{{CSSSyntax}} + ## Examples ### Using a container name diff --git a/files/en-us/web/css/container-type/index.md b/files/en-us/web/css/container-type/index.md index f579383aad85a01..2d2b8ac855e9d07 100644 --- a/files/en-us/web/css/container-type/index.md +++ b/files/en-us/web/css/container-type/index.md @@ -12,7 +12,17 @@ The **container-type** [CSS](/en-US/docs/Web/CSS) property is used to define the ## Syntax ```css -container-type: ; +/* Keyword values */ +container-type: normal; +container-type: size; +container-type: inline-size; + +/* Global Values */ +container-type: inherit; +container-type: initial; +container-type: revert; +container-type: revert-layer; +container-type: unset; ``` ### Values @@ -32,6 +42,14 @@ container-type: ; > **Note:** to understand what happens when you apply layout, style, and size containment to a box, see the {{cssxref("contain")}} property. +## Formal definition + +{{CSSInfo}} + +## Formal syntax + +{{CSSSyntax}} + ## Example Given the following HTML example which is a card component with an image, a title, and some text: diff --git a/files/en-us/web/css/container/index.md b/files/en-us/web/css/container/index.md index f73fff796e2f745..b511130d8fc9291 100644 --- a/files/en-us/web/css/container/index.md +++ b/files/en-us/web/css/container/index.md @@ -12,7 +12,18 @@ The **container** [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) [CSS](/e ## Syntax ```css -container: / ; +/* */ +container: my-layout; + +/* / */ +container: my-layout / size; + +/* Global Values */ +container: inherit; +container: initial; +container: revert; +container: revert-layer; +container: unset; ``` ### Values @@ -24,6 +35,14 @@ container: / ; - : The type of containment context. More details on the syntax are covered in the {{cssxref("container-type")}} property page. +## Formal definition + +{{CSSInfo}} + +## Formal syntax + +{{CSSSyntax}} + ## Example Given the following HTML example which is a card component with an image, a title, and some text: From e9830ea66151f0c1ff6a32256790e0f24f01a4fa Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Thu, 11 May 2023 16:32:19 -0400 Subject: [PATCH 03/86] fix(prefers-reduced-motion): Edit text and improve example (#26630) * edits to page for clarity * improve example explanation * fix review comments * Update files/en-us/web/css/@media/prefers-reduced-motion/index.md --------- Co-authored-by: Estelle Weyl --- .../@media/prefers-reduced-motion/index.md | 38 +++++++++++-------- 1 file changed, 23 insertions(+), 15 deletions(-) diff --git a/files/en-us/web/css/@media/prefers-reduced-motion/index.md b/files/en-us/web/css/@media/prefers-reduced-motion/index.md index ead01f74f8477d0..e676fb4220d991f 100644 --- a/files/en-us/web/css/@media/prefers-reduced-motion/index.md +++ b/files/en-us/web/css/@media/prefers-reduced-motion/index.md @@ -9,20 +9,22 @@ browser-compat: css.at-rules.media.prefers-reduced-motion > **Warning:** An embedded example at the bottom of this page has a scaling movement that may be problematic for some readers. Readers with vestibular motion disorders may wish to enable the reduce motion feature on their device before viewing the animation. -The **`prefers-reduced-motion`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) is used to detect if the user has requested that the system either minimize the amount of non-essential motion used or remove animations altogether, depending on available user preference setting. +The **`prefers-reduced-motion`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) is used to detect if a user has enabled a setting on their device to minimize the amount of non-essential motion. The setting is used to convey to the browser on the device that the user prefers an interface that removes, reduces, or replaces motion-based animations. + +Such animations can trigger discomfort for those with [vestibular motion disorders](https://www.a11yproject.com/posts/understanding-vestibular-disorders/). Animations such as scaling or panning large objects can be vestibular motion triggers. ```css @media (prefers-reduced-motion) { - /* styles to apply if the user's settings are set to reduced motion */ + /* styles to apply if a user's device settings are set to reduced motion */ } ``` ## Syntax - `no-preference` - - : Indicates that the user has made no preference known to the system. + - : Indicates that a user has made no preference known on the device. This keyword value evaluates as false. - `reduce` - - : Indicates that the user has notified the system that they prefer an interface that removes or replaces the types of motion-based animation. + - : Indicates that a user has enabled the setting on their device for reduced motion. This keyword value evaluates as true. ## User preferences @@ -43,32 +45,36 @@ For Firefox, the `reduce` request is honoured if: ## Examples -This example has a scaling animation by default. If Reduce Motion or Remove Animations is enabled in your accessibility preferences, the animation is toned down to a simple dissolve without vestibular motion triggers. +This example uses a scaling animation for the purpose of demonstrating `prefers-reduced-motion`. If you enable the setting for reducing motion in the accessibility preferences on your device, the `prefers-reduced-motion` media query will detect your preference and the CSS within the reduced motion rules, with the same [specificity](/en-US/docs/Web/CSS/Specificity) but coming later in the [CSS source order](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#source_order), will take precedence. As a result, the [animation](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) on the box will tone down to the `dissolve` animation, which is a more muted animation that is not a vestibular motion trigger. + +### Toning down the animation scaling -### HTML +#### HTML ```html
animated box
``` -### CSS +#### CSS ```css .animation { animation: pulse 1s linear infinite both; + background-color: purple; } -/* Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. */ +/* Tone down the animation to avoid vestibular motion triggers. */ @media (prefers-reduced-motion) { .animation { - animation: dissolve 2s linear infinite both; + animation: dissolve 4s linear infinite both; + background-color: green; + text-decoration: overline; } } ``` ```css hidden .animation { - background-color: #306; color: #fff; font: 1.2em sans-serif; width: 10em; @@ -100,7 +106,7 @@ This example has a scaling animation by default. If Reduce Motion or Remove Anim opacity: 1; } 50% { - opacity: 0.8; + opacity: 0.3; } 100% { opacity: 1; @@ -108,9 +114,11 @@ This example has a scaling animation by default. If Reduce Motion or Remove Anim } ``` -### Result +#### Result + +{{EmbedLiveSample("Toning down the animation scaling")}} -{{EmbedLiveSample("Examples")}} +You can enable the setting for reducing motion on [your device](#user_preferences) to view the change in animation scaling. This example uses the background color and the line over the text to visually highlight when the keyframe animation switches in response to the setting being enabled or disabled. ## Specifications @@ -122,5 +130,5 @@ This example has a scaling animation by default. If Reduce Motion or Remove Anim ## See also -- [An Introduction to the Reduced Motion Media Query (CSS Tricks)](https://css-tricks.com/introduction-reduced-motion-media-query/) -- [Responsive Design for Motion (WebKit Blog)](https://webkit.org/blog/7551/responsive-design-for-motion/) includes vestibular motion trigger examples. +- [An introduction to the reduced motion media query](https://css-tricks.com/introduction-reduced-motion-media-query/) on CSS-Tricks (April 24, 2019) +- [Responsive design for motion](https://webkit.org/blog/7551/responsive-design-for-motion/) on WebKit Blog (May 15, 2017) From bb3255f7a7ca31f530f4700127d4a9abeee3a4ac Mon Sep 17 00:00:00 2001 From: Ctibor Laky Date: Fri, 12 May 2023 01:39:48 +0200 Subject: [PATCH 04/86] Added info for 'muted' driven emission (#26641) * Added info for 'muted' driven emission Fixing missing information that muting also fires this event. Standard spec: https://html.spec.whatwg.org/multipage/media.html#event-media-volumechange * Update files/en-us/web/api/htmlmediaelement/volumechange_event/index.md * lint --------- Co-authored-by: wbamberg --- .../en-us/web/api/htmlmediaelement/volumechange_event/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/htmlmediaelement/volumechange_event/index.md b/files/en-us/web/api/htmlmediaelement/volumechange_event/index.md index d0b068a84de3943..1f9f1f5ec077fa2 100644 --- a/files/en-us/web/api/htmlmediaelement/volumechange_event/index.md +++ b/files/en-us/web/api/htmlmediaelement/volumechange_event/index.md @@ -8,7 +8,7 @@ browser-compat: api.HTMLMediaElement.volumechange_event {{APIRef("HTMLMediaElement")}} -The `volumechange` event is fired when the volume has changed. +The `volumechange` event is fired when either the {{domxref("HTMLMediaElement.volume", "volume")}} attribute or the {{domxref("HTMLMediaElement.muted", "muted")}} attribute has changed. This event is not cancelable and does not bubble. From ae36b1dcba1ff033983c58116d3df1dd72164ab6 Mon Sep 17 00:00:00 2001 From: CanadaHonk <19228318+CanadaHonk@users.noreply.github.com> Date: Fri, 12 May 2023 01:54:21 +0100 Subject: [PATCH 05/86] Add page for prefers-reduced-transparency (#25289) * Add page for prefers-reduced-transparency * Update page for prefers-reduced-transparency Changed text as requested in PR comments. --------- Co-authored-by: Brian Thomas Smith Co-authored-by: Dipika Bhattacharya --- .../prefers-reduced-transparency/index.md | 72 +++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 files/en-us/web/css/@media/prefers-reduced-transparency/index.md diff --git a/files/en-us/web/css/@media/prefers-reduced-transparency/index.md b/files/en-us/web/css/@media/prefers-reduced-transparency/index.md new file mode 100644 index 000000000000000..325662f3741a2c8 --- /dev/null +++ b/files/en-us/web/css/@media/prefers-reduced-transparency/index.md @@ -0,0 +1,72 @@ +--- +title: prefers-reduced-transparency +slug: Web/CSS/@media/prefers-reduced-transparency +page-type: css-media-feature +status: + - experimental +browser-compat: css.at-rules.media.prefers-reduced-transparency +--- + +{{CSSRef}}{{SeeCompatTable}} + +The **`prefers-reduced-transparency`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) is used to detect if a user has enabled a setting on their device to reduce the transparent or translucent layer effects used on the device. Switching on such a setting can help improve contrast and readability for some users. + +## Syntax + +- `no-preference` + - : Indicates that a user has made no preference known on the device. This keyword value evaluates as false in the boolean context. +- `reduce` + - : Indicates that a user has enabled the setting on their device to minimize the amount of transparent or translucent layer effects. + +## User preferences + +For Firefox, the `reduce` request is honored if a dedicated system-specific setting exists, otherwise it is enabled if reduced motion is also enabled: + +- In GTK/GNOME: Settings > Accessibility > Seeing > Reduced animation is turned on. + + - In older versions of GNOME, GNOME Tweaks > General tab (or Appearance, depending on version) > Animations is turned off. + - Alternatively, add `gtk-enable-animations = false` to the `[Settings]` block of [the GTK 3 configuration file](https://wiki.archlinux.org/title/GTK#Configuration). + +- In Plasma/KDE: System Settings > Workspace Behavior -> General Behavior > "Animation speed" is set all the way to right to "Instant". +- In Windows 10: Settings > Personalization > Colors > Transparency effects. +- In Windows 11: Settings > Personalization > Colors > Transparency effects. +- In macOS: System Preferences > Accessibility > Display > Reduce transparency. +- In iOS: Settings > Accessibility > Motion. +- In Android 9+: Settings > Accessibility > Remove animations. + +## Examples + +This example has a translucent box by default. If the setting to reduce transparency is enabled in the accessibility preferences on your device, the translucent box becomes more opaque. + +### HTML + +```html +
translucent box
+``` + +### CSS + +```css +.translucent { + opacity: 0.4; +} + +@media (prefers-reduced-transparency) { + .translucent { + opacity: 0.8; + } +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- CSS [prefers-reduced-motion](/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query +- [Using media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) From 48291f1fb822579ca22d429bde189314abdd99fb Mon Sep 17 00:00:00 2001 From: nintendoit <91181094+nintendoit@users.noreply.github.com> Date: Fri, 12 May 2023 07:42:01 +0530 Subject: [PATCH 06/86] Fix arrow syntax explanation (#26704) * remove bracket around the parameter The example should omit the brackets around the parameter, as described in the explanation above this code. * Update files/en-us/learn/javascript/building_blocks/functions/index.md * Update files/en-us/learn/javascript/building_blocks/functions/index.md * Update index.md --------- Co-authored-by: Joshua Chen --- .../building_blocks/functions/index.md | 30 ++++++++++--------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/files/en-us/learn/javascript/building_blocks/functions/index.md b/files/en-us/learn/javascript/building_blocks/functions/index.md index 6a9466ead75b034..d75460fab98efb1 100644 --- a/files/en-us/learn/javascript/building_blocks/functions/index.md +++ b/files/en-us/learn/javascript/building_blocks/functions/index.md @@ -234,23 +234,15 @@ textBox.addEventListener("keydown", (event) => { }); ``` -If the function only has one line in the curly brackets, you omit the curly brackets: +If the function only takes one parameter, you can omit the brackets around the parameter: -```js -textBox.addEventListener("keydown", (event) => - console.log(`You pressed "${event.key}".`) -); -``` - -If the function only takes one parameter, you can also omit the brackets around the parameter: - -```js -textBox.addEventListener("keydown", (event) => - console.log(`You pressed "${event.key}".`) -); +```js-nolint +textBox.addEventListener("keydown", event => { + console.log(`You pressed "${event.key}".`); +}); ``` -Finally, if your function needs to return a value, and contains only one line, you can also omit the `return` statement. In the following example we're using the {{jsxref("Array.prototype.map()","map()")}} method of `Array` to double every value in the original array: +Finally, if your function contains only one line that's a `return` statement, you can also omit the braces and the `return` keyword, and implicitly return the expression. In the following example we're using the {{jsxref("Array.prototype.map()","map()")}} method of `Array` to double every value in the original array: ```js const originals = [1, 2, 3]; @@ -270,6 +262,16 @@ function doubleItem(item) { } ``` +You can use the same concise syntax to rewrite the `addEventListener` example. + +```js +textBox.addEventListener("keydown", (event) => + console.log(`You pressed "${event.key}".`) +); +``` + +In this case, the value of `console.log()`, which is `undefined`, is implicitly returned from the callback function. + We recommend that you use arrow functions, as they can make your code shorter and more readable. To learn more, see the [section on arrow functions in the JavaScript guide](/en-US/docs/Web/JavaScript/Guide/Functions#arrow_functions), and our [reference page on arrow functions](/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). > **Note:** There are some subtle differences between arrow functions and normal functions. They're outside the scope of this introductory guide, and are unlikely to make a difference in the cases we've discussed here. To learn more, see the [arrow function reference documentation](/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). From 33e054640393bb70c43b0ef92c3017f0aec6c05e Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Fri, 12 May 2023 13:08:55 +1000 Subject: [PATCH 07/86] Add RTCAudioSourceStats (#26667) * Add RTCAudioSourceStats * Update files/en-us/web/api/rtcaudiosourcestats/index.md Co-authored-by: wbamberg * Apply suggestions from code review Co-authored-by: wbamberg * Apply suggestions from code review Co-authored-by: wbamberg * Update files/en-us/web/api/rtcaudiosourcestats/index.md * Add keys for BCD data * Make it clear that the audiolevel can also be calculated --------- Co-authored-by: wbamberg --- .../rtcaudiosourcestats/audiolevel/index.md | 28 ++++ .../web/api/rtcaudiosourcestats/id/index.md | 26 ++++ .../web/api/rtcaudiosourcestats/index.md | 140 ++++++++++++++++++ .../web/api/rtcaudiosourcestats/kind/index.md | 25 ++++ .../rtcaudiosourcestats/timestamp/index.md | 27 ++++ .../totalaudioenergy/index.md | 50 +++++++ .../totalsamplesduration/index.md | 28 ++++ .../trackidentifier/index.md | 23 +++ .../web/api/rtcaudiosourcestats/type/index.md | 26 ++++ files/en-us/web/api/rtcstats/index.md | 3 + files/jsondata/GroupData.json | 1 + 11 files changed, 377 insertions(+) create mode 100644 files/en-us/web/api/rtcaudiosourcestats/audiolevel/index.md create mode 100644 files/en-us/web/api/rtcaudiosourcestats/id/index.md create mode 100644 files/en-us/web/api/rtcaudiosourcestats/index.md create mode 100644 files/en-us/web/api/rtcaudiosourcestats/kind/index.md create mode 100644 files/en-us/web/api/rtcaudiosourcestats/timestamp/index.md create mode 100644 files/en-us/web/api/rtcaudiosourcestats/totalaudioenergy/index.md create mode 100644 files/en-us/web/api/rtcaudiosourcestats/totalsamplesduration/index.md create mode 100644 files/en-us/web/api/rtcaudiosourcestats/trackidentifier/index.md create mode 100644 files/en-us/web/api/rtcaudiosourcestats/type/index.md diff --git a/files/en-us/web/api/rtcaudiosourcestats/audiolevel/index.md b/files/en-us/web/api/rtcaudiosourcestats/audiolevel/index.md new file mode 100644 index 000000000000000..6ccd6d877f989fe --- /dev/null +++ b/files/en-us/web/api/rtcaudiosourcestats/audiolevel/index.md @@ -0,0 +1,28 @@ +--- +title: "RTCAudioSourceStats: audioLevel property" +short-title: audioLevel +slug: Web/API/RTCAudioSourceStats/audioLevel +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_media-source.audioLevel +--- + +{{APIRef("WebRTC")}} + +The {{domxref("RTCAudioSourceStats")}} dictionary's **`audioLevel`** property represents the audio level of the media source. + +The level is averaged over some small implementation-dependent interval. +Users can alternatively calculate the average audio level over some arbitrary duration using the algorithm described in the [`RTCAudioSourceStats` description](/en-US/docs/Web/API/RTCAudioSourceStats#description). + +> **Note:** For audio levels of remotely sourced tracks, see {{domxref("RTCInboundRtpStreamStats.audioLevel")}}. + +## Value + +A number between 0 and 1 (linear), where 1.0 represents 0 dBov ([decibels relative to full scale (DBFS)](https://en.wikipedia.org/wiki/DBFS)), 0 represents silence, and 0.5 represents approximately 6 dB SPL change in the [sound pressure level](https://en.wikipedia.org/wiki/Sound_pressure#Sound_pressure_level) from 0 dBov. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcaudiosourcestats/id/index.md b/files/en-us/web/api/rtcaudiosourcestats/id/index.md new file mode 100644 index 000000000000000..fcb5401930354d6 --- /dev/null +++ b/files/en-us/web/api/rtcaudiosourcestats/id/index.md @@ -0,0 +1,26 @@ +--- +title: "RTCAudioSourceStats: id property" +short-title: id +slug: Web/API/RTCAudioSourceStats/id +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_media-source.id +--- + +{{APIRef("WebRTC")}} + +The **`id`** property of the {{domxref("RTCAudioSourceStats")}} dictionary is a string which uniquely identifies the object +for which this object provides statistics. + +Using the `id`, you can correlate this statistics object with others, in order to monitor statistics over time for a given WebRTC object, such as an {{domxref("RTCPeerConnection")}}, or an {{domxref("RTCDataChannel")}}. + +## Value + +A string that uniquely identifies the object for which this `RTCAudioSourceStats` object provides statistics. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcaudiosourcestats/index.md b/files/en-us/web/api/rtcaudiosourcestats/index.md new file mode 100644 index 000000000000000..6f560866a20ee14 --- /dev/null +++ b/files/en-us/web/api/rtcaudiosourcestats/index.md @@ -0,0 +1,140 @@ +--- +title: RTCAudioSourceStats +slug: Web/API/RTCAudioSourceStats +page-type: web-api-interface +browser-compat: api.RTCStatsReport.type_media-source +--- + +{{APIRef("WebRTC")}} + +The [WebRTC API](/en-US/docs/Web/API/WebRTC_API)'s **`RTCAudioSourceStats`** dictionary provides information about an audio track that is attached to one or more senders. + +These statistics can be obtained by iterating the {{domxref("RTCStatsReport")}} returned by {{domxref("RTCRtpSender.getStats()")}} or {{domxref("RTCPeerConnection.getStats()")}} until you find a report with the [`type`](#type) of `media-source` and a [`kind`](#kind) of `audio`. + +> **Note:** For audio information about remotely sourced tracks (that are being received), see {{domxref("RTCInboundRtpStreamStats")}}. + +## Instance properties + +- {{domxref("RTCAudioSourceStats.audioLevel", "audioLevel")}} + - : A number that represents the audio level of the media source. +- {{domxref("RTCAudioSourceStats.totalAudioEnergy", "totalAudioEnergy")}} + - : A number that represents the total audio energy of the media source over the lifetime of the stats object. +- {{domxref("RTCAudioSourceStats.totalSamplesDuration", "totalSamplesDuration")}} + - : A number that represents the total duration of all samples produced by the media source over the lifetime of the stats object. + +The following properties are present in both `RTCAudioSourceStats` and {{domxref("RTCVideoSourceStats")}}: + +- {{domxref("RTCAudioSourceStats.trackIdentifier", "trackIdentifier")}} + - : A string that contains the [`id`](/en-US/docs/Web/API/MediaStreamTrack/id) value of the [`MediaStreamTrack`](/en-US/docs/Web/API/MediaStreamTrack) associated with the audio source. +- {{domxref("RTCAudioSourceStats.kind", "kind")}} + - : A string indicating whether this object represents stats for a video source or a media source. For an `RTCAudioSourceStats` this will always be `audio`. + +### Common instance properties + +The following properties are common to all statistics objects. + +- {{domxref("RTCAudioSourceStats.id", "id")}} + - : A string that uniquely identifies the object that is being monitored to produce this set of statistics. +- {{domxref("RTCAudioSourceStats.timestamp", "timestamp")}} + - : A {{domxref("DOMHighResTimeStamp")}} object indicating the time at which the sample was taken for this statistics object. +- {{domxref("RTCAudioSourceStats.type", "type")}} + - : A string with the value `"media-source"`, indicating that the object is an instance of either {{domxref("RTCAudioSourceStats")}} or {{domxref("RTCVideoSourceStats")}}. + +## Description + +The interface provides statistics about an audio media source attached to one or more senders. +The information includes the current audio level, averaged over a short (implementation dependent) duration. + +The statistics also include the accumulated total energy and total sample duration, at a particular timestamp. +The totals can be used to determine the average audio level over the lifetime of the stats object. +You can calculate a root mean square (RMS) value in the same units as `audioLevel` using the following formula: + + + + + totalAudioEnergy + totalSamplesDuration + + + + +You can also use the accumulated totals to calculate the average audio level over an arbitrary time period. + +The total audio energy of the stats object is accumulated by adding the energy of every sample over the lifetime of the stats object, while the total duration is accumulated by adding the duration of each sample. +The energy of each sample is determined using the following formula, where `sample_level` is the level of the sample, `max_level` is the highest-intensity encodable value, and `duration` is the duration of the sample in seconds: + + + + duration + ⁢ + + + ( + + sample_level + max_level + + ) + + 2 + + + + +The average audio level between any two different `getStats()` calls, over any duration, can be calculated using the following equation: + + + + + + + totalAudioEnergy + 2 + + - + + totalAudioEnergy + 1 + + + + + totalSamplesDuration + 2 + + - + + totalSamplesDuration + 1 + + + + + + +## Examples + +This example shows how you might iterate the stats object returned from `RTCRtpSender.getStats()` to get the audio source stats, and then extract the `audioLevel`. + +```js +// where sender is an RTCRtpSender +const stats = await sender.getStats(); +let audioSourceStats = null; + +stats.forEach((report) => { + if (report.type === "media-source" && report.kind==="audio") { + audioSourceStats = report; + break; + } +}); + +const audioLevel = audioSourceStats?.audioLevel; +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcaudiosourcestats/kind/index.md b/files/en-us/web/api/rtcaudiosourcestats/kind/index.md new file mode 100644 index 000000000000000..cd75502f477851f --- /dev/null +++ b/files/en-us/web/api/rtcaudiosourcestats/kind/index.md @@ -0,0 +1,25 @@ +--- +title: "RTCAudioSourceStats: kind property" +short-title: kind +slug: Web/API/RTCAudioSourceStats/kind +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_media-source.kind +--- + +{{APIRef("WebRTC")}} + +The {{domxref("RTCAudioSourceStats")}} dictionary's **`kind`** property is a string value that is used to differentiate `audio` and `video` media sources. + +Along with the {{domxref("RTCAudioSourceStats.type", "type")}}, this identifies the object as an {{domxref("RTCAudioSourceStats")}} object when iterating the {{domxref("RTCStatsReport")}} returned by {{domxref("RTCRtpSender.getStats()")}} or {{domxref("RTCPeerConnection.getStats()")}}. + +## Value + +A string with the value `audio`. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcaudiosourcestats/timestamp/index.md b/files/en-us/web/api/rtcaudiosourcestats/timestamp/index.md new file mode 100644 index 000000000000000..e3a9e1138fdd74d --- /dev/null +++ b/files/en-us/web/api/rtcaudiosourcestats/timestamp/index.md @@ -0,0 +1,27 @@ +--- +title: "RTCAudioSourceStats: timestamp property" +short-title: timestamp +slug: Web/API/RTCAudioSourceStats/timestamp +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_media-source.timestamp +--- + +{{APIRef("WebRTC")}} + +The **`timestamp`** property of the {{domxref("RTCAudioSourceStats")}} dictionary is a {{domxref("DOMHighResTimeStamp")}} object specifying the time at which the data in the object was sampled. + +The time is given in milliseconds elapsed since the first moment of January 1, 1970, UTC (also known as [Unix time](/en-US/docs/Glossary/Unix_time)). + +## Value + +A {{domxref("DOMHighResTimeStamp")}} value indicating the time at which the activity described by the statistics in this object was recorded, in milliseconds elapsed since the beginning of January 1, 1970, UTC. + +The value should be accurate to within a few milliseconds but may not be entirely precise, either because of hardware or operating system limitations or because of [fingerprinting](/en-US/docs/Glossary/Fingerprinting) protection in the form of reduced clock precision or accuracy. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcaudiosourcestats/totalaudioenergy/index.md b/files/en-us/web/api/rtcaudiosourcestats/totalaudioenergy/index.md new file mode 100644 index 000000000000000..773c9f0ffc063ff --- /dev/null +++ b/files/en-us/web/api/rtcaudiosourcestats/totalaudioenergy/index.md @@ -0,0 +1,50 @@ +--- +title: "RTCAudioSourceStats: totalAudioEnergy property" +short-title: totalAudioEnergy +slug: Web/API/RTCAudioSourceStats/totalAudioEnergy +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_media-source.totalAudioEnergy +--- + +{{APIRef("WebRTC")}} + +The {{domxref("RTCAudioSourceStats")}} dictionary's **`totalAudioEnergy`** property represents the total audio energy of the media source over the lifetime of this stats object. + +The total energy across a particular duration can be determined by subtracting the value of this property returned by two different `getStats()` calls. + +> **Note:** For audio energy of remotely sourced tracks, see {{domxref("RTCInboundRtpStreamStats.totalAudioEnergy")}}. + +## Value + +A number produced by summing the energy of every sample over the lifetime of this stats object. + +The energy of each sample is calculated by dividing the sample's value by the highest-intensity encodable value, squaring the result, and then multiplying by the duration of the sample in seconds. +This is shown as an equation below: + + + + duration + ⁢ + + + ( + + sample_level + max_level + + ) + + 2 + + + + +Note that if multiple audio channels are used, the audio energy of a sample refers to the highest energy of any channel. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcaudiosourcestats/totalsamplesduration/index.md b/files/en-us/web/api/rtcaudiosourcestats/totalsamplesduration/index.md new file mode 100644 index 000000000000000..ce5a55745ccea77 --- /dev/null +++ b/files/en-us/web/api/rtcaudiosourcestats/totalsamplesduration/index.md @@ -0,0 +1,28 @@ +--- +title: "RTCAudioSourceStats: totalSamplesDuration property" +short-title: totalSamplesDuration +slug: Web/API/RTCAudioSourceStats/totalSamplesDuration +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_media-source.totalSamplesDuration +--- + +{{APIRef("WebRTC")}} + +The {{domxref("RTCAudioSourceStats")}} dictionary's **`totalSamplesDuration`** property represents the combined duration of all samples produced by the media source over the lifetime of this stats object, in seconds. +It does not include samples dropped before reaching this media source. + +This can be used with {{domxref("RTCAudioSourceStats.totalAudioEnergy", "totalAudioEnergy")}} to compute an [average audio level over different intervals](/en-US/docs/Web/API/RTCAudioSourceStats#description). + +> **Note:** For audio duration of remotely sourced tracks, see {{domxref("RTCInboundRtpStreamStats.totalSamplesDuration")}}. + +## Value + +A number indicating the total duration of all samples produced by this source over the lifetime this stats object, in seconds. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcaudiosourcestats/trackidentifier/index.md b/files/en-us/web/api/rtcaudiosourcestats/trackidentifier/index.md new file mode 100644 index 000000000000000..24755a4f38773cb --- /dev/null +++ b/files/en-us/web/api/rtcaudiosourcestats/trackidentifier/index.md @@ -0,0 +1,23 @@ +--- +title: "RTCAudioSourceStats: trackIdentifier property" +short-title: trackIdentifier +slug: Web/API/RTCAudioSourceStats/trackIdentifier +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_media-source.trackIdentifier +--- + +{{APIRef("WebRTC")}} + +The {{domxref("RTCAudioSourceStats")}} dictionary's property **`trackIdentifier`** contains the `id` attribute of the associated [`MediaStreamTrack`](/en-US/docs/Web/API/MediaStreamTrack). + +## Value + +A string containing the value of the associated [`MediaStreamTrack.id`](/en-US/docs/Web/API/MediaStreamTrack/id). + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcaudiosourcestats/type/index.md b/files/en-us/web/api/rtcaudiosourcestats/type/index.md new file mode 100644 index 000000000000000..409b3b4db3ef003 --- /dev/null +++ b/files/en-us/web/api/rtcaudiosourcestats/type/index.md @@ -0,0 +1,26 @@ +--- +title: "RTCAudioSourceStats: type property" +short-title: type +slug: Web/API/RTCAudioSourceStats/type +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_media-source.type +--- + +{{APIRef("WebRTC")}} + +The {{domxref("RTCAudioSourceStats")}} dictionary's property **`type`** is a string with value `media-source`. + +The type of `media-source` identifies the type of statistics as either {{domxref("RTCAudioSourceStats")}} or {{domxref("RTCVideoSourceStats")}} when iterating the {{domxref("RTCStatsReport")}} returned by {{domxref("RTCRtpSender.getStats()")}} or {{domxref("RTCPeerConnection.getStats()")}}. +The type of stats can further be differentiated using the {{domxref("RTCAudioSourceStats.kind", "kind")}}, which will be `audio` for `RTCAudioSourceStats`. + +## Value + +A string with the value `media-source`. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcstats/index.md b/files/en-us/web/api/rtcstats/index.md index ae4d3776f04d79c..2024648cc337dcf 100644 --- a/files/en-us/web/api/rtcstats/index.md +++ b/files/en-us/web/api/rtcstats/index.md @@ -38,6 +38,9 @@ The various dictionaries that are used to define the contents of the objects tha - {{domxref("RTCOutboundRtpStreamStats")}} contains statistics about the local sending endpoint of an RTP stream. - {{domxref("RTCRemoteOutboundRtpStreamStats")}} holds statistics related to the remote sending end an RTP stream. + - {{domxref("RTCAudioSourceStats")}} contains statistics about audio media sources. + - {{domxref("RTCVideoSourceStats")}} contains statistics about video media sources. + ## Specifications {{Specifications}} diff --git a/files/jsondata/GroupData.json b/files/jsondata/GroupData.json index 327b806d17ecdb7..85789dc2537dd2e 100644 --- a/files/jsondata/GroupData.json +++ b/files/jsondata/GroupData.json @@ -2035,6 +2035,7 @@ "RTCRemoteOutboundRtpStreamStats", "RTCRtpContributingSourceStats", "RTCPeerConnectionStats", + "RTCAudioSourceStats", "RTCMediaStreamStats", "RTCMediaHandlerStats", "RTCVideoHandlerStats", From b801106c4c7d3acfc086e0e38f4818bf8aaa1d0e Mon Sep 17 00:00:00 2001 From: A1lo Date: Fri, 12 May 2023 14:20:19 +0800 Subject: [PATCH 08/86] correct language tag of code fence (#26738) --- files/en-us/learn/server-side/django/authentication/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/learn/server-side/django/authentication/index.md b/files/en-us/learn/server-side/django/authentication/index.md index d9afe17f4a2837f..7a2a59a698d2c11 100644 --- a/files/en-us/learn/server-side/django/authentication/index.md +++ b/files/en-us/learn/server-side/django/authentication/index.md @@ -608,7 +608,7 @@ The very last step is to add a link for this new page into the sidebar. We'll pu Open the base template (**/locallibrary/catalog/templates/base_generic.html**) and add the "My Borrowed" line to the sidebar in the position shown below. -```python +```django
    {% if user.is_authenticated %}
  • User: \{{ user.get_username }}
    • @@ -656,7 +656,7 @@ Open the **catalog/models.py**, and add the permission as shown above. You will The current user's permissions are stored in a template variable called `\{{ perms }}`. You can check whether the current user has a particular permission using the specific variable name within the associated Django "app" — e.g. `\{{ perms.catalog.can_mark_returned }}` will be `True` if the user has this permission, and `False` otherwise. We typically test for the permission using the template `{% if %}` tag as shown: -```python +```django {% if perms.catalog.can_mark_returned %} From 464084ca12397e21f4d21d576e264fd359cda2d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20Vaeng=20R=C3=B8tnes?= Date: Fri, 12 May 2023 11:15:45 +0100 Subject: [PATCH 09/86] Fix code comment in dialog example (#26669) --- files/en-us/web/html/element/dialog/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/html/element/dialog/index.md b/files/en-us/web/html/element/dialog/index.md index fe4b64126585b3b..8c668e62a9f501b 100644 --- a/files/en-us/web/html/element/dialog/index.md +++ b/files/en-us/web/html/element/dialog/index.md @@ -106,7 +106,7 @@ selectEl.addEventListener('change', (e) => { confirmBtn.value = selectEl.value; }); -// "Confirm" button triggers "close" on dialog because of [method="dialog"] +// "Confirm" button triggers "close" on dialog because of [formmethod="dialog"] favDialog.addEventListener('close', (e) => { outputBox.value = favDialog.returnValue === 'default' ? "No return value." : `ReturnValue: ${favDialog.returnValue}.`; // Have to check for "default" rather than empty string }); From 977af6e36630befba4fef0d9407f0be97c74273c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Soboci=C5=84ski?= Date: Fri, 12 May 2023 12:16:54 +0200 Subject: [PATCH 10/86] Update index.md (#26744) --- files/en-us/web/api/document/adoptedstylesheets/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/document/adoptedstylesheets/index.md b/files/en-us/web/api/document/adoptedstylesheets/index.md index ef8ad3e80d360ba..de2bcc69f5778c5 100644 --- a/files/en-us/web/api/document/adoptedstylesheets/index.md +++ b/files/en-us/web/api/document/adoptedstylesheets/index.md @@ -63,7 +63,7 @@ This is demonstrated below using spread-syntax: ```js const extraSheet = new CSSStyleSheet(); -sheet.replaceSync("p { color: green; }"); +extraSheet.replaceSync("p { color: green; }"); // Combine the existing sheets and new one document.adoptedStyleSheets = [...document.adoptedStyleSheets, extraSheet]; From ff66d214be02040f12cb982b69a47ba71fd4e124 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Fri, 12 May 2023 05:39:25 -0700 Subject: [PATCH 11/86] Remove Prettier ignore for /web/web_components (#24225) --- .prettierignore | 1 - 1 file changed, 1 deletion(-) diff --git a/.prettierignore b/.prettierignore index 6393e7dad90969e..922b3c1044f3abb 100644 --- a/.prettierignore +++ b/.prettierignore @@ -10,4 +10,3 @@ build/ /files/en-us/mozilla/add-ons/**/*.md /files/en-us/web/html/**/*.md /files/en-us/web/javascript/**/*.md -/files/en-us/web/web_components/**/*.md From 9ec47aec753a114bec8ad1912801d28ad47fe760 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 12 May 2023 15:03:12 +0000 Subject: [PATCH 12/86] Bump @mdn/yari from 2.20.0 to 2.20.3 (#26747) --- package.json | 2 +- yarn.lock | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index cb4c3cc7edd6519..a28395152480c3c 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "dependencies": { "@apideck/better-ajv-errors": "^0.3.6", "@caporal/core": "^2.0.2", - "@mdn/yari": "2.20.0", + "@mdn/yari": "2.20.3", "ajv": "^8.12.0", "ajv-formats": "^2.1.1", "async": "^3.2.4", diff --git a/yarn.lock b/yarn.lock index 94e4cefdaf41f1a..887b2c113240dcb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -595,16 +595,16 @@ resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-5.2.57.tgz#8aa713ed5bdf2686b72775623ef14ffb58c2c0f4" integrity sha512-ED1+lSPglyGjBVPubg44h7nIzZK/Oc3lUI/rEZ+xDWmSY/LRKFINdJKYdGnViy/R7LXa3EGDKFSC9jXG6mfaiQ== -"@mdn/yari@2.20.0": - version "2.20.0" - resolved "https://registry.yarnpkg.com/@mdn/yari/-/yari-2.20.0.tgz#14b7b428425da0563d7e5bd47217fdfd09329520" - integrity sha512-xYzza8mAo7LgSQRJdW5tUhm3LAYE+/7gwfFqoNwz1vZjQGlfKLNCYq2G2rh15AvXAIkEIKspZkqGjzFnKGWN3w== +"@mdn/yari@2.20.3": + version "2.20.3" + resolved "https://registry.yarnpkg.com/@mdn/yari/-/yari-2.20.3.tgz#1e9b35680535f0c73cd4c039f9a3979c36bf518a" + integrity sha512-BD30P75neRNl/8LWDUoo078piMbSyVhRYjfXze/7i3ZoPdVxwlQB2/wGQlMyQMFi+cJ+anCr480i084h8ReuJA== dependencies: "@caporal/core" "^2.0.2" "@fast-csv/parse" "^4.3.6" "@mdn/bcd-utils-api" "^0.0.4" "@mdn/browser-compat-data" "^5.2.57" - "@mozilla/glean" "1.3.0" + "@mozilla/glean" "1.4.0" "@use-it/interval" "^1.0.0" "@vscode/ripgrep" "^1.15.2" "@webref/css" "^5.4.4" @@ -668,10 +668,10 @@ web-features "^0.4.1" web-specs "^2.57.0" -"@mozilla/glean@1.3.0": - version "1.3.0" - resolved "https://registry.npmjs.org/@mozilla/glean/-/glean-1.3.0.tgz" - integrity sha512-2bEhpV8Tf4U/KEAJvaesVhe8SXk089jeDCHicEiBbznsRiIElHZVku7t7QHJI16oTqJEf/wHqjTDSQI9Wl3p3A== +"@mozilla/glean@1.4.0": + version "1.4.0" + resolved "https://registry.yarnpkg.com/@mozilla/glean/-/glean-1.4.0.tgz#a29cb3bde7e52de4d100c1e539298aa3a7ec28f8" + integrity sha512-16YgRBPexUtgGD13dnAYYmHeeEzatQ2wSFuwopNvXuy4CeJw3xpJ+N4fVjnMJtQffpp89l2f4BvKva+eAmmBPg== dependencies: fflate "^0.7.1" jose "^4.0.4" From 0fbef27401e6f53b530826f8c0da120390cd2285 Mon Sep 17 00:00:00 2001 From: Amirhosain Shahsavari Date: Fri, 12 May 2023 23:15:10 +0330 Subject: [PATCH 13/86] Update length values description (#26728) * Update length values description length values are not always absolute. For example we can use 2em for width property as a length value but it is not absolute. I corrected this in the Values section. * Update files/en-us/web/css/width/index.md Co-authored-by: Dipika Bhattacharya --------- Co-authored-by: Dipika Bhattacharya --- files/en-us/web/css/width/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/width/index.md b/files/en-us/web/css/width/index.md index 955ede51eaceabe..ccccd2f2f8bedcb 100644 --- a/files/en-us/web/css/width/index.md +++ b/files/en-us/web/css/width/index.md @@ -40,7 +40,7 @@ width: unset; ### Values - {{cssxref("<length>")}} - - : Defines the width as an absolute value. + - : Defines the width as a distance value. - {{cssxref("<percentage>")}} - : Defines the width as a percentage of the containing block's width. - `auto` From e5e808cf9dd5a95adb243f86e0a93278ea24fc26 Mon Sep 17 00:00:00 2001 From: Dan Cecile Date: Sat, 13 May 2023 00:10:53 -0400 Subject: [PATCH 14/86] Add TransformStream note about returning a promise (#26757) --- files/en-us/web/api/transformstream/transformstream/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/transformstream/transformstream/index.md b/files/en-us/web/api/transformstream/transformstream/index.md index 853e9d808f272f0..bcc6c25d7d61d88 100644 --- a/files/en-us/web/api/transformstream/transformstream/index.md +++ b/files/en-us/web/api/transformstream/transformstream/index.md @@ -30,7 +30,7 @@ new TransformStream(transformer, writableStrategy, readableStrategy) - `start(controller)` - : Called when the `TransformStream` is constructed. It is typically used to enqueue chunks using {{domxref("TransformStreamDefaultController.enqueue()")}}. - `transform(chunk, controller)` - - : Called when a chunk written to the writable side is ready to be transformed, and performs the work of the transformation stream. If no `transform()` method is supplied, the identity transform is used, and the chunk will be enqueued with no changes. + - : Called when a chunk written to the writable side is ready to be transformed, and performs the work of the transformation stream. It can return a promise to signal success or failure of the write operation. If no `transform()` method is supplied, the identity transform is used, and the chunk will be enqueued with no changes. - `flush(controller)` - : Called after all chunks written to the writable side have been successfully transformed, and the writable side is about to be closed. From 0ea7088392f9a63030bff9121b539e274cd3a160 Mon Sep 17 00:00:00 2001 From: Dan Cecile Date: Sat, 13 May 2023 00:40:08 -0400 Subject: [PATCH 15/86] Remove emphasis on WritableStream controller (#26758) * Remove emphasis on WritableStream controller * copy edit * lint --------- Co-authored-by: wbamberg --- .../api/writablestream/writablestream/index.md | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/files/en-us/web/api/writablestream/writablestream/index.md b/files/en-us/web/api/writablestream/writablestream/index.md index 2fda6eac5035104..beda8aaceeae387 100644 --- a/files/en-us/web/api/writablestream/writablestream/index.md +++ b/files/en-us/web/api/writablestream/writablestream/index.md @@ -23,23 +23,18 @@ new WritableStream(underlyingSink, queuingStrategy) - `underlyingSink` {{optional_inline}} - : An object containing methods and properties that define how the constructed stream - instance will behave. `underlyingSink` can contain the following: + instance will behave. The `controller` parameter passed to this object's methods is a {{domxref("WritableStreamDefaultController")}} that provides abort and error signaling. `underlyingSink` can contain the following: - `start(controller)` {{optional_inline}} - : This is a method, called immediately when the object is constructed. The contents of this method are defined by the developer, and should aim to get access to the underlying sink. If this process is to be done asynchronously, it can - return a promise to signal success or failure. The `controller` - parameter passed to this method is a - {{domxref("WritableStreamDefaultController")}}. This can be used by the developer - to control the stream during set up. + return a promise to signal success or failure. - `write(chunk, controller)` {{optional_inline}} - : This method, also defined by the developer, will be called when a new chunk of data (specified in the `chunk` parameter) is ready to be written to the underlying sink. It can return a promise to signal success or failure of the write - operation. The `controller` parameter passed to this method is a - {{domxref("WritableStreamDefaultController")}} that can be used by the developer - to control the stream as more chunks are submitted for writing. This method will + operation. This method will be called only after previous writes have succeeded, and never after the stream is closed or aborted (see below). - `close(controller)` {{optional_inline}} @@ -48,9 +43,7 @@ new WritableStream(underlyingSink, queuingStrategy) is necessary to finalize writes to the underlying sink, and release access to it. If this process is asynchronous, it can return a promise to signal success or failure. This method will be called only after all queued-up writes have - succeeded. The `controller` parameter passed to this method is a - {{domxref("WritableStreamDefaultController")}}, which can be used to control the - stream at the end of writing. + succeeded. - `abort(reason)` {{optional_inline}} - : This method, also defined by the developer, will be called if the app signals that it wishes to abruptly close the stream and put it in an errored state. It can From 448d4aaaeacc4fe470751fd3f9c9db199d341526 Mon Sep 17 00:00:00 2001 From: Jason Lam Date: Sat, 13 May 2023 12:42:27 +0800 Subject: [PATCH 16/86] fix: Updated description of example which in `JavaScript.Object` to be more accurate (#26742) Update index.md --- .../web/javascript/reference/global_objects/object/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/javascript/reference/global_objects/object/index.md b/files/en-us/web/javascript/reference/global_objects/object/index.md index aae9bb9d966196d..11cd4e28f08a58f 100644 --- a/files/en-us/web/javascript/reference/global_objects/object/index.md +++ b/files/en-us/web/javascript/reference/global_objects/object/index.md @@ -257,7 +257,7 @@ These properties are defined on `Object.prototype` and shared by all `Object` in ### Constructing empty objects -The following examples store an empty `Object` object in `o`: +The following example creates empty objects using the `new` keyword with different arguments: ```js const o1 = new Object(); From b829b2fae917b5b931011ddeb6a0d1b2d2b81c54 Mon Sep 17 00:00:00 2001 From: wbamberg Date: Fri, 12 May 2023 22:37:08 -0700 Subject: [PATCH 17/86] Fix some more return statements (#26759) * Fix return value for toString * Fix some more return statements --- files/en-us/web/api/htmlanchorelement/tostring/index.md | 2 +- files/en-us/web/api/htmlareaelement/tostring/index.md | 2 +- files/en-us/web/api/navigator/taintenabled/index.md | 2 +- files/en-us/web/api/nodeiterator/nextnode/index.md | 2 +- files/en-us/web/api/nodeiterator/previousnode/index.md | 2 +- files/en-us/web/api/selection/containsnode/index.md | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/api/htmlanchorelement/tostring/index.md b/files/en-us/web/api/htmlanchorelement/tostring/index.md index 4f52adeaeb8cf99..b9a6cb3966aca2a 100644 --- a/files/en-us/web/api/htmlanchorelement/tostring/index.md +++ b/files/en-us/web/api/htmlanchorelement/tostring/index.md @@ -24,7 +24,7 @@ None. ### Return value -None ({{jsxref("undefined")}}). +A string containing the element's complete URL. ## Examples diff --git a/files/en-us/web/api/htmlareaelement/tostring/index.md b/files/en-us/web/api/htmlareaelement/tostring/index.md index 77ac5a5046f71e2..39c3629ca335156 100644 --- a/files/en-us/web/api/htmlareaelement/tostring/index.md +++ b/files/en-us/web/api/htmlareaelement/tostring/index.md @@ -24,7 +24,7 @@ None. ### Return value -None ({{jsxref("undefined")}}). +A string containing the element's complete URL. ## Examples diff --git a/files/en-us/web/api/navigator/taintenabled/index.md b/files/en-us/web/api/navigator/taintenabled/index.md index 196b413329f327b..2aad93710284126 100644 --- a/files/en-us/web/api/navigator/taintenabled/index.md +++ b/files/en-us/web/api/navigator/taintenabled/index.md @@ -28,7 +28,7 @@ None. ### Return value -None ({{jsxref("undefined")}}). +Always returns `false`. ## Specifications diff --git a/files/en-us/web/api/nodeiterator/nextnode/index.md b/files/en-us/web/api/nodeiterator/nextnode/index.md index e607468a97a757e..45abf52d8b9e1bf 100644 --- a/files/en-us/web/api/nodeiterator/nextnode/index.md +++ b/files/en-us/web/api/nodeiterator/nextnode/index.md @@ -32,7 +32,7 @@ None. ### Return value -None ({{jsxref("undefined")}}). +A {{domxref("Node")}} representing the node after the current node in the set represented by this `NodeIterator`, or `null` if the current node is the last node in the set. ## Examples diff --git a/files/en-us/web/api/nodeiterator/previousnode/index.md b/files/en-us/web/api/nodeiterator/previousnode/index.md index 594a792ddd61869..bd377784b2575c6 100644 --- a/files/en-us/web/api/nodeiterator/previousnode/index.md +++ b/files/en-us/web/api/nodeiterator/previousnode/index.md @@ -32,7 +32,7 @@ None. ### Return value -None ({{jsxref("undefined")}}). +A {{domxref("Node")}} representing the node before the current node in the set represented by this `NodeIterator`, or `null` if the current node is the first node in the set. ## Examples diff --git a/files/en-us/web/api/selection/containsnode/index.md b/files/en-us/web/api/selection/containsnode/index.md index 9b1fa50b5368de9..b2001f5b9b207ec 100644 --- a/files/en-us/web/api/selection/containsnode/index.md +++ b/files/en-us/web/api/selection/containsnode/index.md @@ -31,7 +31,7 @@ containsNode(node, partialContainment) ### Return value -None ({{jsxref("undefined")}}). +Returns `true` if the given node is part of the selection, and `false` otherwise. ## Examples From 28c68788b8a5f53997be853e68c0c91d1144f529 Mon Sep 17 00:00:00 2001 From: wbamberg Date: Fri, 12 May 2023 22:37:58 -0700 Subject: [PATCH 18/86] Fix 26745: don't auto-play (#26748) --- .../htmlmediaelement/preservespitch/index.md | 30 +++++++++++-------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/files/en-us/web/api/htmlmediaelement/preservespitch/index.md b/files/en-us/web/api/htmlmediaelement/preservespitch/index.md index 9be5039e5f307e5..a7a58eafd6c38bd 100644 --- a/files/en-us/web/api/htmlmediaelement/preservespitch/index.md +++ b/files/en-us/web/api/htmlmediaelement/preservespitch/index.md @@ -46,19 +46,23 @@ div { ```js const audio = document.querySelector("audio"); - -const rate = document.querySelector("#rate"); -rate.addEventListener("input", () => (audio.playbackRate = rate.value)); - -const pitch = document.querySelector("#pitch"); -pitch.addEventListener("change", () => { - if ("preservesPitch" in audio) { - audio.preservesPitch = pitch.checked; - } else if ("mozPreservesPitch" in audio) { - // deprecated - audio.mozPreservesPitch = pitch.checked; - } -}); +// When the audio starts playing... +audio.addEventListener( + "play", + () => { + // Handle page visibility change: + // - If the page is hidden, pause the video + // - If the page is shown, play the video + document.addEventListener("visibilitychange", () => { + if (document.hidden) { + audio.pause(); + } else { + audio.play(); + } + }); + }, + { once: true } +); ``` {{EmbedLiveSample("Setting the preservesPitch property")}} From 1299320cc1dc0cfbca3de8bfc301b785ee30b2e8 Mon Sep 17 00:00:00 2001 From: wbamberg Date: Fri, 12 May 2023 22:41:22 -0700 Subject: [PATCH 19/86] Fix 26743: Fix return value; improve example (#26753) --- .../web/api/range/getclientrects/index.md | 36 +++++++++++++++++-- 1 file changed, 33 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/api/range/getclientrects/index.md b/files/en-us/web/api/range/getclientrects/index.md index 42f0e004c90f196..9cf8f1a5283a13a 100644 --- a/files/en-us/web/api/range/getclientrects/index.md +++ b/files/en-us/web/api/range/getclientrects/index.md @@ -24,16 +24,46 @@ None. ### Return value -None ({{jsxref("undefined")}}). +An [iterable](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol) sequence of {{domxref("DOMRect")}} objects. ## Examples +### Logging selected client rect sizes + +#### HTML + +```html +
    +
    
+```
+
+#### CSS
+
+```css
+div {
+  height: 80px;
+  width: 200px;
+  background-color: blue;
+}
+```
+
+#### JavaScript
+
 ```js
-range = document.createRange();
-range.selectNode(document.getElementsByTagName("div").item(0));
+const range = document.createRange();
+range.selectNode(document.querySelector("div"));
 rectList = range.getClientRects();
+
+const output = document.querySelector("#output");
+for (const rect of rectList) {
+  output.textContent = `${output.textContent}\n${rect.width}:${rect.height}`;
+}
 ```
 
+#### Result
+
+{{EmbedLiveSample}}
+
 ## Specifications
 
 {{Specifications}}

From 14c2445253ddc6294f146f595069a71eab056f72 Mon Sep 17 00:00:00 2001
From: wbamberg 
Date: Fri, 12 May 2023 22:41:59 -0700
Subject: [PATCH 20/86] Fix return value for Range: getBoundingClientRect()
 (#26754)

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

diff --git a/files/en-us/web/api/range/getboundingclientrect/index.md b/files/en-us/web/api/range/getboundingclientrect/index.md
index 144e94c129ec793..c515945b53ba676 100644
--- a/files/en-us/web/api/range/getboundingclientrect/index.md
+++ b/files/en-us/web/api/range/getboundingclientrect/index.md
@@ -28,7 +28,7 @@ None.
 
 ### Return value
 
-None ({{jsxref("undefined")}}).
+A {{domxref("DOMRect")}} object that encloses the union of the bounding rectangles for all elements in the range.
 
 ## Examples
 

From 0eeca1ab012cff21c410016ea3bcb241cc56083b Mon Sep 17 00:00:00 2001
From: Mathias Stearn 
Date: Sat, 13 May 2023 12:30:46 +0200
Subject: [PATCH 21/86] Mention that Set iterators have a defined order
 (#26727)

* Mention that Set iterators have a defined order

* Do it for Map

---------

Co-authored-by: Joshua Chen 
---
 .../javascript/reference/global_objects/map/@@iterator/index.md | 2 +-
 .../javascript/reference/global_objects/set/@@iterator/index.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/en-us/web/javascript/reference/global_objects/map/@@iterator/index.md b/files/en-us/web/javascript/reference/global_objects/map/@@iterator/index.md
index d40eb485cccdd73..c123522c283cb96 100644
--- a/files/en-us/web/javascript/reference/global_objects/map/@@iterator/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/map/@@iterator/index.md
@@ -7,7 +7,7 @@ browser-compat: javascript.builtins.Map.@@iterator
 
 {{JSRef}}
 
-The **`[@@iterator]()`** method of {{jsxref("Map")}} instances implements the [iterable protocol](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) and allows maps to be consumed by most syntaxes expecting iterables, such as the [spread syntax](/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) and {{jsxref("Statements/for...of", "for...of")}} loops. It returns a [map iterator object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator) that yields the key-value pairs of the map.
+The **`[@@iterator]()`** method of {{jsxref("Map")}} instances implements the [iterable protocol](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) and allows maps to be consumed by most syntaxes expecting iterables, such as the [spread syntax](/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) and {{jsxref("Statements/for...of", "for...of")}} loops. It returns a [map iterator object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator) that yields the key-value pairs of the map in insertion order.
 
 The initial value of this property is the same function object as the initial value of the {{jsxref("Map.prototype.entries")}} property.
 
diff --git a/files/en-us/web/javascript/reference/global_objects/set/@@iterator/index.md b/files/en-us/web/javascript/reference/global_objects/set/@@iterator/index.md
index 98369c82e1cc1e4..63f561991984615 100644
--- a/files/en-us/web/javascript/reference/global_objects/set/@@iterator/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/set/@@iterator/index.md
@@ -7,7 +7,7 @@ browser-compat: javascript.builtins.Set.@@iterator
 
 {{JSRef}}
 
-The **`[@@iterator]()`** method of {{jsxref("Set")}} instances implements the [iterable protocol](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) and allows sets to be consumed by most syntaxes expecting iterables, such as the [spread syntax](/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) and {{jsxref("Statements/for...of", "for...of")}} loops. It returns an [set iterator object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator) that yields the values of the set.
+The **`[@@iterator]()`** method of {{jsxref("Set")}} instances implements the [iterable protocol](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) and allows sets to be consumed by most syntaxes expecting iterables, such as the [spread syntax](/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) and {{jsxref("Statements/for...of", "for...of")}} loops. It returns an [set iterator object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator) that yields the values of the set in insertion order.
 
 The initial value of this property is the same function object as the initial value of the {{jsxref("Set.prototype.values")}} property.
 

From bfb5dcedefe2e753714dc918200077956713fdca Mon Sep 17 00:00:00 2001
From: "L. Coues" 
Date: Sat, 13 May 2023 12:42:23 +0200
Subject: [PATCH 22/86] Accentuate month being 0-index in getMonth example
 (#26734)

* Accentuate month being 0-index in get month example

`Date.getMonth` behavior differ slightly from the similar method as it return the index of the month and is 0-indexed, while the other method return ordinal values instead of index and don't have this distinction.

One could be tempted to run `${year}-${month}-${day}` and `${hour}:${minutes}:${seconds}` after the code in exemple to get iso formated date and time but the month would be off by one as iso month are 1-indexed, january being 1 and december being 12.

Adding a comment with the actual output put emphasis on this difference in behavior and might prevent people being surprised by that after the fact. The value chosen for the date is partly random. 2000 is the first year not starting with 19; January cause the month part to be 0 which should call attention to itself; 17 is high enough so it cannot be a month and I like it; 16 is in the 24h hour clock; 45 is high enough to not be confused with an hour; 30 is here for lack of imagination.

* Update files/en-us/web/javascript/reference/global_objects/date/index.md

* Update files/en-us/web/javascript/reference/global_objects/date/index.md

* Update files/en-us/web/javascript/reference/global_objects/date/index.md

---------

Co-authored-by: Joshua Chen 
---
 .../web/javascript/reference/global_objects/date/index.md     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/files/en-us/web/javascript/reference/global_objects/date/index.md b/files/en-us/web/javascript/reference/global_objects/date/index.md
index e9355f4db13b25d..e4ac4cc19faa2ea 100644
--- a/files/en-us/web/javascript/reference/global_objects/date/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/date/index.md
@@ -325,17 +325,19 @@ date.toLocaleTimeString(); // 6:50:21 PM
 ### To get Date, Month and Year or Time
 
 ```js
-const date = new Date();
+const date = new Date("2000-01-17T16:45:30");
 const [month, day, year] = [
   date.getMonth(),
   date.getDate(),
   date.getFullYear(),
 ];
+// [0, 17, 2000] as month are 0-indexed
 const [hour, minutes, seconds] = [
   date.getHours(),
   date.getMinutes(),
   date.getSeconds(),
 ];
+// [16, 45, 30]
 ```
 
 ### Interpretation of two-digit years

From a0d8bf75a0161ea0b1853c16b7a303e210a89264 Mon Sep 17 00:00:00 2001
From: Jason Lam 
Date: Sat, 13 May 2023 18:44:56 +0800
Subject: [PATCH 23/86] Do not use JSON.stringify in console.log (#26662)

* Update index.md

* fix: not use JSON.stringify when print via console.log
---
 .../javascript/reference/global_objects/array/shift/index.md    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/javascript/reference/global_objects/array/shift/index.md b/files/en-us/web/javascript/reference/global_objects/array/shift/index.md
index 67737626f993ce1..3e79b4f9cd1edec 100644
--- a/files/en-us/web/javascript/reference/global_objects/array/shift/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/array/shift/index.md
@@ -45,7 +45,7 @@ first element. It also displays the removed element:
 ```js
 const myFish = ["angel", "clown", "mandarin", "surgeon"];
 
-console.log("myFish before:", JSON.stringify(myFish));
+console.log("myFish before:", myFish);
 // myFish before: ['angel', 'clown', 'mandarin', 'surgeon']
 
 const shifted = myFish.shift();

From 2289452c9310a266bc5a7fbd7f6b056b36d95652 Mon Sep 17 00:00:00 2001
From: Jason Lam 
Date: Sat, 13 May 2023 18:49:17 +0800
Subject: [PATCH 24/86] fix: Update the description of callbackFn's accumulator
 in `Array.reduceRight()` (#26594)

* Update index.md

* Update files/en-us/web/javascript/reference/global_objects/array/reduceright/index.md

* Update files/en-us/web/javascript/reference/global_objects/array/reduceright/index.md

---------

Co-authored-by: Joshua Chen 
---
 .../reference/global_objects/array/reduceright/index.md         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/javascript/reference/global_objects/array/reduceright/index.md b/files/en-us/web/javascript/reference/global_objects/array/reduceright/index.md
index d946a0190c3345a..75f3180d3a9d774 100644
--- a/files/en-us/web/javascript/reference/global_objects/array/reduceright/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/array/reduceright/index.md
@@ -27,7 +27,7 @@ reduceRight(callbackFn, initialValue)
 - `callbackFn`
   - : A function to execute for each element in the array. Its return value becomes the value of the `accumulator` parameter on the next invocation of `callbackFn`. For the last invocation, the return value becomes the return value of `reduceRight()`. The function is called with the following arguments:
     - `accumulator`
-      - : The value previously returned in the last invocation of the callback, or `initialValue`, if supplied. (See below.)
+      - : The value resulting from the previous call to `callbackFn`. On first call, `initialValue` if specified, otherwise the array's last element's value.
     - `currentValue`
       - : The current element being processed in the array.
     - `index`

From 566157141ec6f675f1d94d916e4af8e201334899 Mon Sep 17 00:00:00 2001
From: Steven Nyman <35897452+stevennyman@users.noreply.github.com>
Date: Sat, 13 May 2023 21:47:44 -0400
Subject: [PATCH 25/86] Remove random arrow from Endianness example (#26767)

---
 files/en-us/glossary/endianness/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/glossary/endianness/index.md b/files/en-us/glossary/endianness/index.md
index c8a715744c777f4..01139698d34ddb7 100644
--- a/files/en-us/glossary/endianness/index.md
+++ b/files/en-us/glossary/endianness/index.md
@@ -14,7 +14,7 @@ Examples with the number `0x12345678` (i.e. 305 419 896 in decimal):
 
 - _little-endian_: `0x78 0x56 0x34 0x12`
 - _big-endian_: `0x12 0x34 0x56 0x78`
-- _mixed-endian_ (historic and very rare): `0x34 0x12 0x78 0x56`<-
+- _mixed-endian_ (historic and very rare): `0x34 0x12 0x78 0x56`
 
 ## See also
 

From aca5f79974fc3d0efecb2f87c6e9d2c574de8527 Mon Sep 17 00:00:00 2001
From: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com>
Date: Sun, 14 May 2023 09:59:24 +0530
Subject: [PATCH 26/86] Add missed redirect (#26769)

---
 files/en-us/_redirects.txt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
index a2080e7a65f85c7..250196b1bf6e78e 100644
--- a/files/en-us/_redirects.txt
+++ b/files/en-us/_redirects.txt
@@ -12073,6 +12073,7 @@
 /en-US/docs/Web/HTML/Forms_in_HTML	/en-US/docs/Learn/Forms
 /en-US/docs/Web/HTML/Index	/en-US/docs/Web/HTML
 /en-US/docs/Web/HTML/Inline_elemente	/en-US/docs/Glossary/Inline-level_content
+/en-US/docs/Web/HTML/Inline_elements	/en-US/docs/Glossary/Inline-level_content
 /en-US/docs/Web/HTML/Inline_elmements	/en-US/docs/Glossary/Inline-level_content
 /en-US/docs/Web/HTML/Introduction	/en-US/docs/Learn/HTML/Introduction_to_HTML
 /en-US/docs/Web/HTML/Kinds_of_HTML_content	/en-US/docs/Web/HTML/Content_categories

From 59d51895285b19fbac11d575f0b22d4622102aba Mon Sep 17 00:00:00 2001
From: A1lo 
Date: Sun, 14 May 2023 13:50:29 +0800
Subject: [PATCH 27/86] remove self-reference links (#26764)

* remove a self reference link

* Update index.md
---
 .../javascript/reference/global_objects/array/reduce/index.md   | 2 +-
 .../web/javascript/reference/global_objects/object/index.md     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/en-us/web/javascript/reference/global_objects/array/reduce/index.md b/files/en-us/web/javascript/reference/global_objects/array/reduce/index.md
index b2a133b90cc64ff..2d8b287e7b997f1 100644
--- a/files/en-us/web/javascript/reference/global_objects/array/reduce/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/array/reduce/index.md
@@ -284,7 +284,7 @@ console.log(myArrayWithNoDuplicates);
 
 Using {{jsxref("Array/filter", "filter()")}} then {{jsxref("Array/map", "map()")}} traverses the array
 twice, but you can achieve the same effect while traversing only once with
-{{jsxref("Array/reduce", "reduce()")}}, thereby being more efficient. (If you like `for` loops, you
+`reduce()`, thereby being more efficient. (If you like `for` loops, you
 can filter and map while traversing once with {{jsxref("Array/forEach", "forEach()")}}.)
 
 ```js
diff --git a/files/en-us/web/javascript/reference/global_objects/object/index.md b/files/en-us/web/javascript/reference/global_objects/object/index.md
index 11cd4e28f08a58f..d44c5a83cda72c6 100644
--- a/files/en-us/web/javascript/reference/global_objects/object/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/object/index.md
@@ -11,7 +11,7 @@ The **`Object`** type represents one of [JavaScript's data types](/en-US/docs/We
 
 ## Description
 
-Nearly all [objects](/en-US/docs/Web/JavaScript/Data_structures#objects) in JavaScript are instances of {{jsxref("Object")}}; a typical object inherits properties (including methods) from `Object.prototype`, although these properties may be shadowed (a.k.a. overridden). The only objects that don't inherit from `Object.prototype` are those with [`null` prototype](#null-prototype_objects), or descended from other `null` prototype objects.
+Nearly all [objects](/en-US/docs/Web/JavaScript/Data_structures#objects) in JavaScript are instances of `Object`; a typical object inherits properties (including methods) from `Object.prototype`, although these properties may be shadowed (a.k.a. overridden). The only objects that don't inherit from `Object.prototype` are those with [`null` prototype](#null-prototype_objects), or descended from other `null` prototype objects.
 
 Changes to the `Object.prototype` object are seen by **all** objects through prototype chaining, unless the properties and methods subject to those changes are overridden further along the prototype chain. This provides a very powerful although potentially dangerous mechanism to override or extend object behavior. To make it more secure, `Object.prototype` is the only object in the core JavaScript language that has [immutable prototype](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf#description) — the prototype of `Object.prototype` is always `null` and not changeable.
 

From e78e8398b539c87d0dc65fa4e8f0dae493e443ae Mon Sep 17 00:00:00 2001
From: Arka Poddar 
Date: Mon, 15 May 2023 04:37:51 +0530
Subject: [PATCH 28/86] Update index.md (#26771)

* Update index.md

Added the missing bracket

* Update files/en-us/web/api/stylepropertymap/append/index.md

---------

Co-authored-by: Hamish Willee 
---
 files/en-us/web/api/stylepropertymap/append/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/api/stylepropertymap/append/index.md b/files/en-us/web/api/stylepropertymap/append/index.md
index a8bb3bb6135347d..e3bb2f8e5d9d348 100644
--- a/files/en-us/web/api/stylepropertymap/append/index.md
+++ b/files/en-us/web/api/stylepropertymap/append/index.md
@@ -43,7 +43,7 @@ const buttonEl = document.querySelector("button");
 // append another value to the background-image property set on the attribute
 buttonEl.attributeStyleMap.append(
   "background-image",
-  "linear-gradient(180deg, blue, black"
+  "linear-gradient(180deg, blue, black)"
 );
 ```
 

From e01c063fff19145e01d06f80046373dceaf8b784 Mon Sep 17 00:00:00 2001
From: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
Date: Mon, 15 May 2023 07:19:25 +0800
Subject: [PATCH 29/86] correct http status code message (#26765)

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

diff --git a/files/en-us/web/http/methods/options/index.md b/files/en-us/web/http/methods/options/index.md
index bffad9ee4fdd105..c49c1552a4120b4 100644
--- a/files/en-us/web/http/methods/options/index.md
+++ b/files/en-us/web/http/methods/options/index.md
@@ -96,7 +96,7 @@ The server now can respond if it will accept a request under these circumstances
   - : The above permissions may be cached for 86,400 seconds (1 day).
 
 ```http
-HTTP/1.1 200 No Content
+HTTP/1.1 200 OK
 Date: Mon, 01 Dec 2008 01:15:39 GMT
 Server: Apache/2.0.61 (Unix)
 Access-Control-Allow-Origin: https://foo.example

From a75c144eaba00c38623b2ab9532319b1da40825f Mon Sep 17 00:00:00 2001
From: wbamberg 
Date: Sun, 14 May 2023 17:07:52 -0700
Subject: [PATCH 30/86] Fix 26741: reduce ambiguity, remove unneeded word
 (#26750)

* Fix 26741: reduce ambiguity, remove unneeded word

* Update files/en-us/web/http/overview/index.md

---------

Co-authored-by: Hamish Willee 
---
 files/en-us/web/http/overview/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/http/overview/index.md b/files/en-us/web/http/overview/index.md
index d95f7f77940d3b9..931a48d4294deee 100644
--- a/files/en-us/web/http/overview/index.md
+++ b/files/en-us/web/http/overview/index.md
@@ -55,7 +55,7 @@ The browser translates these directions into HTTP requests, and further interpre
 ### The Web server
 
 On the opposite side of the communication channel is the server, which _serves_ the document as requested by the client.
-A server appears as only a single machine virtually; but it may actually be a collection of servers sharing the load (load balancing), or a complex piece of software interrogating other computers (like cache, a DB server, or e-commerce servers), totally or partially generating the document on demand.
+A server appears as only a single machine virtually; but it may actually be a collection of servers sharing the load (load balancing), or other software (such as caches, a database server, or e-commerce servers), totally or partially generating the document on demand.
 
 A server is not necessarily a single machine, but several server software instances can be hosted on the same machine.
 With HTTP/1.1 and the {{HTTPHeader("Host")}} header, they may even share the same IP address.

From 7b3f7e671965bd85dfa06be2bc2d4b129858f67c Mon Sep 17 00:00:00 2001
From: Hamish Willee 
Date: Mon, 15 May 2023 10:31:05 +1000
Subject: [PATCH 31/86] Window.beforeunload event requires sticky activation
 (#26772)

---
 files/en-us/web/api/window/beforeunload_event/index.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/files/en-us/web/api/window/beforeunload_event/index.md b/files/en-us/web/api/window/beforeunload_event/index.md
index 76982ec44c20a35..1ca1838507d4b29 100644
--- a/files/en-us/web/api/window/beforeunload_event/index.md
+++ b/files/en-us/web/api/window/beforeunload_event/index.md
@@ -39,7 +39,8 @@ In addition to the `Window` interface, the event handler property `onbeforeunloa
 
 ## Security
 
-[Transient user activation](/en-US/docs/Web/Security/User_activation) is required. The user has to interact with the page or a UI element in order for this feature to work.
+[Sticky activation](/en-US/docs/Glossary/Sticky_activation) is required.
+The user has to have interacted with the page in order for this feature to work.
 
 ## Usage notes
 

From 7475a6925705450e44ae43ac2ba6a9244b69f4ea Mon Sep 17 00:00:00 2001
From: Wonder Dai <37327614+daiwanxing@users.noreply.github.com>
Date: Mon, 15 May 2023 12:28:14 +0800
Subject: [PATCH 32/86] Update `:paused` content (#26768)

* Update `:paused` content

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

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

Co-authored-by: Estelle Weyl 

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

Co-authored-by: Estelle Weyl 

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

Co-authored-by: A1lo 

---------

Co-authored-by: Joshua Chen 
Co-authored-by: Estelle Weyl 
Co-authored-by: A1lo 
---
 files/en-us/web/css/_colon_paused/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/en-us/web/css/_colon_paused/index.md b/files/en-us/web/css/_colon_paused/index.md
index 168749e25b2f386..3f206b8338b27f6 100644
--- a/files/en-us/web/css/_colon_paused/index.md
+++ b/files/en-us/web/css/_colon_paused/index.md
@@ -7,9 +7,9 @@ browser-compat: css.selectors.paused
 
 {{CSSRef}}
 
-The **`:paused`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selector is a resource state pseudo-class that will match an audio, video, or similar resource that is capable of being "played" or "paused", when that element is "paused".
+The **`:paused`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selector represents an element that is playable, such as {{htmlelement("audio")}} or {{htmlelement("video")}}, when that element is "paused" (i.e. not "playing").
 
-A resource is paused if the user explicitly paused it, or if it is in a non-activated state.
+A resource is paused if the user explicitly paused it, or if it is in a non-activated or other non-playing state, like "loaded, hasn't been activated yet."
 
 ## Syntax
 

From 33fe6977c5dcbf4d5d89ed1faa5559a778936b65 Mon Sep 17 00:00:00 2001
From: Hamish Willee 
Date: Mon, 15 May 2023 15:31:24 +1000
Subject: [PATCH 33/86] FF114 ECMAScript module support (#26774)

---
 .../firefox/experimental_features/index.md    | 40 -------------------
 .../mozilla/firefox/releases/114/index.md     |  5 +++
 files/en-us/web/api/serviceworker/index.md    |  3 ++
 files/en-us/web/api/worklet/index.md          |  3 ++
 4 files changed, 11 insertions(+), 40 deletions(-)

diff --git a/files/en-us/mozilla/firefox/experimental_features/index.md b/files/en-us/mozilla/firefox/experimental_features/index.md
index b0d18ae66488bff..c213af3db9b2609 100644
--- a/files/en-us/mozilla/firefox/experimental_features/index.md
+++ b/files/en-us/mozilla/firefox/experimental_features/index.md
@@ -888,46 +888,6 @@ The `groupBy` method should be used when strings can be used to represent elemen
   
 
 
-#### Static module import in workers
-
-[Workers](/en-US/docs/Web/API/Web_Workers_API) can now [`import`](/en-US/docs/Web/JavaScript/Reference/Statements/import) [JavaScript modules](/en-US/docs/Web/JavaScript/Guide/Modules) ([Firefox bug 1247687](https://bugzil.la/1247687)).
-
-
-  
-    
-      
-      
-      
-    
-  
-  
-    
-      
-      
-      
-    
-    
-      
-      
-      
-    
-    
-      
-      
-      
-    
-    
-      
-      
-      
-    
-    
-      
-      
-    
-  
-
    Release channelVersion removedEnabled by default?
    Nightly111Yes
    Developer Edition111No
    Beta111No
    Release111No
    Preference namedom.workers.modules.enabled
    
-
 ## APIs
 
 ### Graphics: Canvas, WebGL, and WebGPU
diff --git a/files/en-us/mozilla/firefox/releases/114/index.md b/files/en-us/mozilla/firefox/releases/114/index.md
index ec9232e77124d8a..6e01332fa866b63 100644
--- a/files/en-us/mozilla/firefox/releases/114/index.md
+++ b/files/en-us/mozilla/firefox/releases/114/index.md
@@ -21,6 +21,11 @@ This article provides information about the changes in Firefox 114 that affect d
 
 ### JavaScript
 
+- [Workers](/en-US/docs/Web/API/Web_Workers_API) now support loading [ECMAScript modules](/en-US/docs/Web/JavaScript/Guide/Modules).
+  You can load modules into workers by specifying the `{type: "module"}` option in the [`Worker`](/en-US/docs/Web/API/Worker/Worker#type) and [`SharedWorker` constructors](/en-US/docs/Web/API/SharedWorker/SharedWorker#type).
+  Worker scripts can also statically or dynamically import modules using [`import`](/en-US/docs/Web/JavaScript/Reference/Statements/import) and [`import()`](/en-US/docs/Web/JavaScript/Reference/Operators/import), respectively ([Firefox bug 1812591](https://bugzil.la/1812591)).
+- [Worklets](/en-US/docs/Web/API/Worklet) can now use [`import`](/en-US/docs/Web/JavaScript/Reference/Statements/import) to statically import [ECMAscript/JavaScript modules](/en-US/docs/Web/JavaScript/Guide/Modules) ([Firefox bug 1812591](https://bugzil.la/1812591)).
+
 #### Removals
 
 ### SVG
diff --git a/files/en-us/web/api/serviceworker/index.md b/files/en-us/web/api/serviceworker/index.md
index 9fe67035ac6f9f8..55bd9d6fe898152 100644
--- a/files/en-us/web/api/serviceworker/index.md
+++ b/files/en-us/web/api/serviceworker/index.md
@@ -13,6 +13,9 @@ A `ServiceWorker` object is available in the {{domxref("ServiceWorkerRegistratio
 
 The `ServiceWorker` interface is dispatched a set of lifecycle events — `install` and `activate` — and functional events including `fetch`. A `ServiceWorker` object has an associated {{domxref("ServiceWorker.state")}}, related to its lifecycle.
 
+Service workers allow static import of [ECMAScript modules](/en-US/docs/Web/JavaScript/Guide/Modules), if supported, using [`import`](/en-US/docs/Web/JavaScript/Reference/Statements/import).
+Dynamic import is disallowed by the specification — calling [`import()`](/en-US/docs/Web/JavaScript/Reference/Operators/import) will throw.
+
 {{InheritanceDiagram}}
 
 ## Instance properties
diff --git a/files/en-us/web/api/worklet/index.md b/files/en-us/web/api/worklet/index.md
index 7271337656208be..c15162de46969aa 100644
--- a/files/en-us/web/api/worklet/index.md
+++ b/files/en-us/web/api/worklet/index.md
@@ -11,6 +11,9 @@ The **`Worklet`** interface is a lightweight version of {{domxref("Worker", "Web
 
 With Worklets, you can run JavaScript and [WebAssembly](/en-US/docs/WebAssembly) code to do graphics rendering or audio processing where high performance is required.
 
+Worklets allow static import of [ECMAScript modules](/en-US/docs/Web/JavaScript/Guide/Modules), if supported, using [`import`](/en-US/docs/Web/JavaScript/Reference/Statements/import).
+Dynamic import is disallowed by the specification — calling [`import()`](/en-US/docs/Web/JavaScript/Reference/Operators/import) will throw.
+
 ## Worklet types
 
 Worklets are restricted to specific use cases; they cannot be used for arbitrary computations like Web Workers. The `Worklet` interface abstracts properties and methods common to all kind of worklets, and cannot be created directly. Instead, you can use one of the following classes:

From 25b12ef8da856416af63a9c443e13d8f0adbca0a Mon Sep 17 00:00:00 2001
From: MohitMaheshwari1711
 <39165319+MohitMaheshwari1711@users.noreply.github.com>
Date: Mon, 15 May 2023 11:48:39 +0530
Subject: [PATCH 34/86] removed while loop from the example (#26588)

Co-authored-by: Mohit Maheshwari 
---
 .../using_readable_streams/index.md           | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/files/en-us/web/api/streams_api/using_readable_streams/index.md b/files/en-us/web/api/streams_api/using_readable_streams/index.md
index 7f0ec212880048b..12bad46d9265038 100644
--- a/files/en-us/web/api/streams_api/using_readable_streams/index.md
+++ b/files/en-us/web/api/streams_api/using_readable_streams/index.md
@@ -152,19 +152,17 @@ fetch("http://example.com/somefile.txt")
   // Retrieve its body as ReadableStream
   .then((response) => {
     const reader = response.body.getReader();
-    while (true) {
-      // read() returns a promise that resolves when a value has been received
-      reader.read().then(function pump({ done, value }) {
-        if (done) {
-          // Do something with last chunk of data then exit reader
-          return;
-        }
-        // Otherwise do something here to process current chunk
+    // read() returns a promise that resolves when a value has been received
+    reader.read().then(function pump({ done, value }) {
+      if (done) {
+        // Do something with last chunk of data then exit reader
+        return;
+      }
+      // Otherwise do something here to process current chunk
 
-        // Read some more, and call this function again
-        return reader.read().then(pump);
-      });
-    }
+      // Read some more, and call this function again
+      return reader.read().then(pump);
+    });
   })
   .catch((err) => console.error(err));
 ```

From b5483182ad187248fc673fb3439ff465892a2721 Mon Sep 17 00:00:00 2001
From: Chris Mills 
Date: Mon, 15 May 2023 15:53:33 +0100
Subject: [PATCH 35/86] Add mention and links for passkeys (#26699)

* Add mention and links for passkeys

* Couple of minor formatting imporovements

* Update files/en-us/web/api/web_authentication_api/index.md

Co-authored-by: wbamberg 

* update provided passkey links

---------

Co-authored-by: wbamberg 
---
 files/en-us/web/api/web_authentication_api/index.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/files/en-us/web/api/web_authentication_api/index.md b/files/en-us/web/api/web_authentication_api/index.md
index a36f59f5b7bbc3b..74d6c4425f77bf6 100644
--- a/files/en-us/web/api/web_authentication_api/index.md
+++ b/files/en-us/web/api/web_authentication_api/index.md
@@ -7,7 +7,9 @@ browser-compat: api.PublicKeyCredential
 
 {{securecontext_header}}{{DefaultAPISidebar("Web Authentication API")}}
 
-The Web Authentication API (WebAuthn) is an extension of the [Credential Management API](/en-US/docs/Web/API/Credential_Management_API) that enables strong authentication with public key cryptography, enabling passwordless authentication and/or secure multi-authentication (MFA) without SMS texts.
+The Web Authentication API (WebAuthn) is an extension of the [Credential Management API](/en-US/docs/Web/API/Credential_Management_API) that enables strong authentication with public key cryptography, enabling passwordless authentication and secure multi-factor authentication (MFA) without SMS texts.
+
+> **Note:** [Passkeys](https://passkeys.dev/) are a significant use case for web authentication; see [Create a passkey for passwordless logins](https://web.dev/passkey-registration/) and [Sign in with a passkey through form autofill](https://web.dev/passkey-form-autofill/) for implementation details. See also [Google Identity > Passwordless login with passkeys](https://developers.google.com/identity/passkeys).
 
 ## WebAuthn concepts and usage
 
@@ -24,7 +26,7 @@ Many websites already have pages that allow users to register new accounts or si
   - The asymmetric key pair is stored in the authenticator, which can then be used to authenticate a user with a relying party for example during MFA. The authenticator may be embedded into the user agent, into an operating system, such as Windows Hello, or it may be a physical token, such as a USB or Bluetooth Security Key.
 - When {{domxref("CredentialsContainer.get()", "navigator.credentials.get()")}} is used with the `publicKey` option, the user agent uses an existing set of credentials to authenticate to a relying party (either as the primary login or to provide an additional factor during MFA as described above).
 
-In their most basic forms, both `create()` and `get()` receive a very large random number called the "challenge" from the server and return the challenge signed by the private key back to the server. This proves to the server that a user is in possession of the private key required for authentication without revealing any secrets over the network.
+In their most basic forms, both `create()` and `get()` receive a very large random number called the "challenge" from the server and return the challenge signed by the private key back to the server. This proves to the server that a user has the private key required for authentication without revealing any secrets over the network.
 
 > **Note:** The "challenge" must be a buffer of random information at least 16 bytes in size.
 

From a4b9c0f1eda60fa023157f3cdc5634593cc88365 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 15 May 2023 15:05:00 +0000
Subject: [PATCH 36/86] Bump @mdn/yari from 2.20.3 to 2.21.0 (#26788)

---
 package.json |   2 +-
 yarn.lock    | 131 ++++++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 115 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index a28395152480c3c..7476771f0f86e96 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
   "dependencies": {
     "@apideck/better-ajv-errors": "^0.3.6",
     "@caporal/core": "^2.0.2",
-    "@mdn/yari": "2.20.3",
+    "@mdn/yari": "2.21.0",
     "ajv": "^8.12.0",
     "ajv-formats": "^2.1.1",
     "async": "^3.2.4",
diff --git a/yarn.lock b/yarn.lock
index 887b2c113240dcb..a0aa248325d493a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -595,16 +595,18 @@
   resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-5.2.57.tgz#8aa713ed5bdf2686b72775623ef14ffb58c2c0f4"
   integrity sha512-ED1+lSPglyGjBVPubg44h7nIzZK/Oc3lUI/rEZ+xDWmSY/LRKFINdJKYdGnViy/R7LXa3EGDKFSC9jXG6mfaiQ==
 
-"@mdn/yari@2.20.3":
-  version "2.20.3"
-  resolved "https://registry.yarnpkg.com/@mdn/yari/-/yari-2.20.3.tgz#1e9b35680535f0c73cd4c039f9a3979c36bf518a"
-  integrity sha512-BD30P75neRNl/8LWDUoo078piMbSyVhRYjfXze/7i3ZoPdVxwlQB2/wGQlMyQMFi+cJ+anCr480i084h8ReuJA==
+"@mdn/yari@2.21.0":
+  version "2.21.0"
+  resolved "https://registry.yarnpkg.com/@mdn/yari/-/yari-2.21.0.tgz#8472b5bc630cb56e25a8230928939bd702281a3e"
+  integrity sha512-fE16zZe5sLGxeEgcvVMp2LXre8lxsM/snII7QgZtVbN9zV1R+DhKi2x+7TJZ7amgJzQqdk1vQOTWRx8Dg6T0+Q==
   dependencies:
     "@caporal/core" "^2.0.2"
     "@fast-csv/parse" "^4.3.6"
     "@mdn/bcd-utils-api" "^0.0.4"
     "@mdn/browser-compat-data" "^5.2.57"
     "@mozilla/glean" "1.4.0"
+    "@sentry/integrations" "^7.51.2"
+    "@sentry/node" "^7.51.2"
     "@use-it/interval" "^1.0.0"
     "@vscode/ripgrep" "^1.15.2"
     "@webref/css" "^5.4.4"
@@ -637,7 +639,7 @@
     imagemin-mozjpeg "^10.0.0"
     imagemin-pngquant "^9.0.2"
     imagemin-svgo "^10.0.1"
-    inquirer "^9.2.2"
+    inquirer "^9.2.3"
     is-svg "^5.0.0"
     js-yaml "^4.1.0"
     loglevel "^1.8.1"
@@ -645,7 +647,7 @@
     md5-file "^5.0.0"
     mdast-util-from-markdown "^1.3.0"
     mdast-util-phrasing "^3.0.1"
-    mdn-data "^2.0.31"
+    mdn-data "^2.0.32"
     open "^9.1.0"
     open-editor "^4.0.0"
     prism-svelte "^0.5.0"
@@ -699,6 +701,62 @@
     "@nodelib/fs.scandir" "2.1.3"
     fastq "^1.6.0"
 
+"@sentry-internal/tracing@7.52.0":
+  version "7.52.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.52.0.tgz#c4e0750ad0c3949c5bb4b59cbb708b0fef274080"
+  integrity sha512-o1YPcRGtC9tjeFCvWRJsbgK94zpExhzfxWaldAKvi3PuWEmPeewSdO/Q5pBIY1QonvSI+Q3gysLRcVlLYHhO5A==
+  dependencies:
+    "@sentry/core" "7.52.0"
+    "@sentry/types" "7.52.0"
+    "@sentry/utils" "7.52.0"
+    tslib "^1.9.3"
+
+"@sentry/core@7.52.0":
+  version "7.52.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.52.0.tgz#6c820ca48fe2f06bfd6b290044c96de2375f2ad4"
+  integrity sha512-BWdG6vCMeUeMhF4ILpxXTmw70JJvT1MGJcnv09oSupWHTmqy6I19YP6YcEyFuBL4jXPN51eCl7luIdLGJrPbOg==
+  dependencies:
+    "@sentry/types" "7.52.0"
+    "@sentry/utils" "7.52.0"
+    tslib "^1.9.3"
+
+"@sentry/integrations@^7.51.2":
+  version "7.52.0"
+  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.52.0.tgz#632aa5e54bdfdab910a24057c2072634a2670409"
+  integrity sha512-tqxYzgc71XdFD8MTCsVMCPef08lPY9jULE5Zi7TzjyV2AItDRJPkixG0qjwjOGwCtN/6KKz0lGPGYU8ZDxvsbg==
+  dependencies:
+    "@sentry/types" "7.52.0"
+    "@sentry/utils" "7.52.0"
+    localforage "^1.8.1"
+    tslib "^1.9.3"
+
+"@sentry/node@^7.51.2":
+  version "7.52.0"
+  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.52.0.tgz#de3ce99eaf21ad439174960ce28b7a951c07a0ae"
+  integrity sha512-RNmlLTbJVHx9Yhg4D8+K1j9IiBtQ7bG3SfbJCB2V7mjxNeugejEESH5aL1xaQ9+/oFl91Yzu+H5gkRX2TsZlcg==
+  dependencies:
+    "@sentry-internal/tracing" "7.52.0"
+    "@sentry/core" "7.52.0"
+    "@sentry/types" "7.52.0"
+    "@sentry/utils" "7.52.0"
+    cookie "^0.4.1"
+    https-proxy-agent "^5.0.0"
+    lru_map "^0.3.3"
+    tslib "^1.9.3"
+
+"@sentry/types@7.52.0":
+  version "7.52.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.52.0.tgz#b7d5372f17355e3991cbe818ad567f3fe277cc6b"
+  integrity sha512-XnEWpS6P6UdP1FqbmeqhI96Iowqd2jM5R7zJ97txTdAd5NmdHHH0pODTR9NiQViA1WlsXDut7ZLxgPzC9vIcMA==
+
+"@sentry/utils@7.52.0":
+  version "7.52.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.52.0.tgz#cacc36d905036ba7084c14965e964fc44239d7f0"
+  integrity sha512-X1NHYuqW0qpZfP731YcVe+cn36wJdAeBHPYPIkXCl4o4GePCJfH/CM/+9V9cZykNjyLrs2Xy/TavSAHNCj8j7w==
+  dependencies:
+    "@sentry/types" "7.52.0"
+    tslib "^1.9.3"
+
 "@sinclair/typebox@^0.25.16":
   version "0.25.24"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.24.tgz#8c7688559979f7079aacaf31aa881c3aa410b718"
@@ -1973,6 +2031,11 @@ cookie@0.5.0, cookie@^0.5.0:
   resolved "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
+cookie@^0.4.1:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
+  integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
+
 core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz"
@@ -3701,6 +3764,11 @@ imagemin@^8.0.1:
     replace-ext "^2.0.0"
     slash "^3.0.0"
 
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
+
 import-lazy@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/import-lazy/-/import-lazy-3.1.0.tgz"
@@ -3793,10 +3861,10 @@ inquirer@^6.0.0:
     strip-ansi "^5.1.0"
     through "^2.3.6"
 
-inquirer@^9.2.2:
-  version "9.2.2"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-9.2.2.tgz#fe0befdab64801c66c436a1190d3011af2a22341"
-  integrity sha512-VV2ZOZe4ilLlOgEo7drIdzbi+EYJcNty0leF2vJq49zOW8+IoK1miJ+V5FjZY/X21Io29j66T/AiqHvS4tPIrw==
+inquirer@^9.2.3:
+  version "9.2.3"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-9.2.3.tgz#48993a6cf832b581a0df0ba0445c435e3d76a69c"
+  integrity sha512-/Et0+d28D7hnTYaqeCQkp3FYuD/X5cc2qbM6BzFdC5zs30oByoU5W/pmLc493FVVMwYmAILKjPBEmwRKTtknSQ==
   dependencies:
     ansi-escapes "^4.3.2"
     chalk "^5.2.0"
@@ -3807,10 +3875,10 @@ inquirer@^9.2.2:
     lodash "^4.17.21"
     mute-stream "1.0.0"
     ora "^5.4.1"
-    run-async "^2.4.0"
+    run-async "^3.0.0"
     rxjs "^7.8.1"
     string-width "^4.2.3"
-    strip-ansi "^7.0.1"
+    strip-ansi "^6.0.1"
     through "^2.3.6"
     wrap-ansi "^6.0.1"
 
@@ -4584,6 +4652,13 @@ leven@^3.1.0:
   resolved "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz"
   integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
 
+lie@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  integrity sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==
+  dependencies:
+    immediate "~3.0.5"
+
 lilconfig@2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz"
@@ -4652,6 +4727,13 @@ load-json-file@^1.0.0:
     pinkie-promise "^2.0.0"
     strip-bom "^2.0.0"
 
+localforage@^1.8.1:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.10.0.tgz#5c465dc5f62b2807c3a84c0c6a1b1b3212781dd4"
+  integrity sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==
+  dependencies:
+    lie "3.1.1"
+
 locate-path@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
@@ -4843,6 +4925,11 @@ lru-cache@^9.1.1:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-9.1.1.tgz#c58a93de58630b688de39ad04ef02ef26f1902f1"
   integrity sha512-65/Jky17UwSb0BuB9V+MyDpsOtXKmYwzhyl+cOa9XUiI4uV2Ouy/2voFP3+al0BjZbJgMBD8FojMpAf+Z+qn4A==
 
+lru_map@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/lru_map/-/lru_map-0.3.3.tgz#b5c8351b9464cbd750335a79650a0ec0e56118dd"
+  integrity sha512-Pn9cox5CsMYngeDbmChANltQl+5pi6XmTrraMSzhPmMBbmgcxmqWry0U3PGapCU1yB4/LqCcom7qhHZiF/jGfQ==
+
 make-dir@^1.0.0, make-dir@^1.2.0:
   version "1.3.0"
   resolved "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz"
@@ -5082,10 +5169,10 @@ mdn-data@2.0.30:
   resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz"
   integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==
 
-mdn-data@^2.0.31:
-  version "2.0.31"
-  resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.31.tgz"
-  integrity sha512-BoMtKzFjk2+b5QDi1QtS4XBZtwd1WIBVQSVe9Q6iIgQP+m6KhlbukWM8bp7rYgWXOXzp/cBqgHWU7az4hGV1WA==
+mdn-data@^2.0.32:
+  version "2.0.32"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.32.tgz#1afc0f08143093709204c46661b6025c561f204e"
+  integrity sha512-dGzrfhOPm47P8qlChU77TGlCEcFNOCDAhCbHP53LST3FR5jSB5JSHaPjyYW2uFd2CV6D6z4tzCGW09pTxSn0aA==
 
 mdurl@^1.0.1:
   version "1.0.1"
@@ -6530,11 +6617,16 @@ run-applescript@^5.0.0:
   dependencies:
     execa "^5.0.0"
 
-run-async@^2.2.0, run-async@^2.4.0:
+run-async@^2.2.0:
   version "2.4.1"
   resolved "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz"
   integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
 
+run-async@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-3.0.0.tgz#42a432f6d76c689522058984384df28be379daad"
+  integrity sha512-540WwVDOMxA6dN6We19EcT9sc3hkXPw5mzRNGM3FkdN/vtE9NFvj5lFAPNwUDmJjXidm3v7TC1cTE7t17Ulm1Q==
+
 run-parallel@^1.1.9:
   version "1.1.9"
   resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.9.tgz"
@@ -7379,6 +7471,11 @@ tslib@^1.9.0:
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.0.tgz"
   integrity sha512-+Zw5lu0D9tvBMjGP8LpvMb0u2WW2QV3y+D8mO6J+cNzCYIN4sVy43Bf9vl92nqFahutN0I8zHa7cc4vihIshnw==
 
+tslib@^1.9.3:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
 tslib@^2.1.0:
   version "2.3.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz"

From 26a4b252b196202c9923eeb11cca0cad2663005d Mon Sep 17 00:00:00 2001
From: alattalatta 
Date: Tue, 16 May 2023 00:41:52 +0900
Subject: [PATCH 37/86] Remove old contents from AnimationEvent.pseudoElement
 (#26787)

* Remove Summary heading

* Remove old compat issue
---
 files/en-us/web/api/animationevent/pseudoelement/index.md | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/files/en-us/web/api/animationevent/pseudoelement/index.md b/files/en-us/web/api/animationevent/pseudoelement/index.md
index a201fb96dcf03e8..0623c47fa956f85 100644
--- a/files/en-us/web/api/animationevent/pseudoelement/index.md
+++ b/files/en-us/web/api/animationevent/pseudoelement/index.md
@@ -8,8 +8,6 @@ browser-compat: api.AnimationEvent.pseudoElement
 
 {{APIRef("Web Animations")}}
 
-## Summary
-
 The **`AnimationEvent.pseudoElement`** read-only property is a
 string, starting with `'::'`, containing the name of the [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) the animation runs on.
 If the animation doesn't run on a pseudo-element but on the element, an empty string: `''`.
@@ -28,7 +26,6 @@ A string, starting with `'::'`, containing the name of the [pseudo-element](/en-
 
 ## See also
 
-- [Chromium Issue 437132](https://crbug.com/437132)
 - [Using CSS animations](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
 - Animation-related CSS properties and at-rules: {{cssxref("animation")}},
   {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}},

From 1e553a15c315767d8def69fe71733922696e9b79 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith 
Date: Mon, 15 May 2023 18:14:05 +0200
Subject: [PATCH 38/86] fix(learn): Prism key for syntax highlighting apache
 code is 'apacheconf' (#26786)

---
 .../apache_configuration_htaccess/index.md    | 62 +++++++++----------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/files/en-us/learn/server-side/apache_configuration_htaccess/index.md b/files/en-us/learn/server-side/apache_configuration_htaccess/index.md
index cd39f9705664472..0a28c07b56da01a 100644
--- a/files/en-us/learn/server-side/apache_configuration_htaccess/index.md
+++ b/files/en-us/learn/server-side/apache_configuration_htaccess/index.md
@@ -19,7 +19,7 @@ Most of the following blocks use the [IfModule](https://httpd.apache.org/docs/2.
 
 There are times when we need to tell users that a resource has moved, either temporarily or permanently. This is what we use `Redirect` and `RedirectMatch` for.
 
-```apache
+```apacheconf
 
   # Redirect to a URL on a different host
   Redirect "/service" "http://foo2.example.com/service"
@@ -60,7 +60,7 @@ For security reasons, browsers restrict cross-origin HTTP requests initiated fro
 
 This directive will add the CORS header for all resources in the directory from any website.
 
-```apache
+```apacheconf
 
   Header set Access-Control-Allow-Origin "*"
 
@@ -70,7 +70,7 @@ Unless you override the directive later in the configuration or in the configura
 
 One alternative is to explicitly state what domains have access to the content of your site. In the example below, we restrict access to a subdomain of our main site (example.com). This is more secure and, likely, what you intended to do.
 
-```apache
+```apacheconf
 
   Header set Access-Control-Allow-Origin "subdomain.example.com"
 
@@ -82,7 +82,7 @@ As reported in the [Chromium Blog](https://blog.chromium.org/2011/07/using-cross
 
 To mitigate the possibility of these attacks, you should use the `crossorigin` attribute in the images you request and the code snippet below in your `.htaccess` to set the CORS header from the server.
 
-```apache
+```apacheconf
 
   
     
@@ -95,7 +95,7 @@ To mitigate the possibility of these attacks, you should use the `crossorigin` a
 
 Google Chrome's [Google Fonts troubleshooting guide](https://developers.google.com/fonts/docs/troubleshooting) tells us that, while Google Fonts may send the CORS header with every response, some proxy servers may strip it before the browser can use it to render the font.
 
-```apache
+```apacheconf
 
   
     Header set Access-Control-Allow-Origin "*"
@@ -111,7 +111,7 @@ The [Timing-Allow-Origin](/en-US/docs/Web/HTTP/Headers/Timing-Allow-Origin) resp
 
 If a resource isn't served with a `Timing-Allow-Origin` or if the header does not include the origin, after making the request some attributes of the `PerformanceResourceTiming` object will be set to zero.
 
-```apache
+```apacheconf
 
   Header set Timing-Allow-Origin: "*"
 
@@ -125,7 +125,7 @@ The error pages are presented as URLs. These URLs can begin with a slash (/) for
 
 See the [ErrorDocument Directive](https://httpd.apache.org/docs/current/mod/core.html#errordocument) documentation on the HTTPD documentation site for more information.
 
-```apache
+```apacheconf
 ErrorDocument 500 /errors/500.html
 ErrorDocument 404 /errors/400.html
 ErrorDocument 401 https://example.com/subscription_info.html
@@ -140,7 +140,7 @@ The effect of `MultiViews` is as follows: if the server receives a request for /
 
 The setting disables `MultiViews` for the directory this configuration applies to and prevents Apache from returning a 404 error as the result of a rewrite when the directory with the same name does not exist
 
-```apache
+```apacheconf
 Options -MultiViews
 ```
 
@@ -158,7 +158,7 @@ Associates media types with one or more extensions to make sure the resources wi
 
 Servers should use text/javascript for JavaScript resources as indicated in the [HTML specification](https://html.spec.whatwg.org/multipage/scripting.html#scriptingLanguages)
 
-```apache
+```apacheconf
 
   # Data interchange
     AddType application/atom+xml      atom
@@ -224,7 +224,7 @@ Every piece of content on the web has a character set. Most, if not all, the con
 
 Use [AddDefaultCharset](https://httpd.apache.org/docs/current/mod/core.html#adddefaultcharset) to serve all resources labeled as `text/html` or `text/plain` with the `UTF-8` charset.
 
-```apache
+```apacheconf
 
   AddDefaultCharset utf-8
 
@@ -234,7 +234,7 @@ Use [AddDefaultCharset](https://httpd.apache.org/docs/current/mod/core.html#addd
 
 Serve the following file types with the `charset` parameter set to `UTF-8` using the [AddCharset](https://httpd.apache.org/docs/current/mod/mod_mime.html#addcharset) directive available in `mod_mime`.
 
-```apache
+```apacheconf
 
   AddCharset utf-8 .appcache \
     .bbaw \
@@ -277,7 +277,7 @@ The required steps are:
    - See [Rackspace FAQ](https://web.archive.org/web/20151223141222/http://www.rackspace.com/knowledge_center/frequently-asked-question/why-is-modrewrite-not-working-on-my-site) and the [HTTPD documentation](https://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewritebase)
    - Depending on how your server is set up, you may also need to use the [`RewriteOptions`](https://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewriteoptions) directive to enable some options for the rewrite engine
 
-```apache
+```apacheconf
 
   RewriteEngine On
   Options +FollowSymlinks
@@ -291,7 +291,7 @@ The required steps are:
 
 These Rewrite rules will redirect from the `http://` insecure version to the `https://` secure version of the URL as described in the [Apache HTTPD wiki](https://cwiki.apache.org/confluence/display/httpd/RewriteHTTPToHTTPS).
 
-```apache
+```apacheconf
 
   RewriteEngine On
   RewriteCond %{HTTPS} !=on
@@ -301,7 +301,7 @@ These Rewrite rules will redirect from the `http://` insecure version to the `ht
 
 If you're using cPanel AutoSSL or the Let's Encrypt webroot method to create your SSL certificates, it will fail to validate the certificate if validation requests are redirected to HTTPS. Turn on the condition(s) you need.
 
-```apache
+```apacheconf
 
   RewriteEngine On
   RewriteCond %{HTTPS} !=on
@@ -322,7 +322,7 @@ Set `%{ENV:PROTO}` variable, to allow rewrites to redirect with the appropriate
 
 The rule assumes by default that both HTTP and HTTPS environments are available for redirection.
 
-```apache
+```apacheconf
 
   RewriteEngine On
   RewriteCond %{HTTPS} =on
@@ -347,7 +347,7 @@ The rule assumes by default that both HTTP and HTTPS environments are available
 
 The following might not be a good idea if you use "real" subdomains for certain parts of your website.
 
-```apache
+```apacheconf
 
   RewriteEngine On
   RewriteCond %{HTTPS} =on
@@ -374,7 +374,7 @@ While you could send the `X-Frame-Options` header for all of your website's page
 
 Nonetheless, you should ensure that you send the `X-Frame-Options` header for all pages that allow a user to make a state-changing operation (e.g., pages that contain one-click purchase links, checkout, or bank-transfer confirmation pages, pages that make permanent configuration changes, etc.).
 
-```apache
+```apacheconf
 
   Header always set X-Frame-Options "DENY" "expr=%{CONTENT_TYPE} =~ m#text/html#i"
 
@@ -390,7 +390,7 @@ The example policy below:
 
 To make your CSP implementation easier, you can use an online [CSP header generator](https://report-uri.com/home/generate/). You should also use a [validator](https://csp-evaluator.withgoogle.com) to make sure your header does what you want it to do.
 
-```apache
+```apacheconf
 
   Content-Security-Policy "default-src 'self'; base-uri 'none'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests" "expr=%{CONTENT_TYPE} =~ m#text\/(html|javascript)|application\/pdf|xml#i"
 
@@ -400,7 +400,7 @@ To make your CSP implementation easier, you can use an online [CSP header genera
 
 This directive will prevent access to directories that don't have an index file present in whatever format the server is configured to use, like `index.html`, or `index.php`.
 
-```apache
+```apacheconf
 
     Options -Indexes
 
@@ -412,7 +412,7 @@ In Macintosh and Linux systems, files that begin with a period are hidden from v
 
 The `.well-known/` directory represents [the standard (RFC 5785)](https://datatracker.ietf.org/doc/html/rfc5785) path prefix for "well-known locations" (e.g.: `/.well-known/manifest.json`, `/.well-known/keybase.txt`), and therefore, access to its visible content should not be blocked.
 
-```apache
+```apacheconf
 
     RewriteEngine On
     RewriteCond %{REQUEST_URI} "!(^|/)\.well-known/([^./]+./?)+$" [NC]
@@ -428,7 +428,7 @@ Block access to backup and source files that may be left by some text editors an
 
 Update the `` regular expression in the following example to include any files that might end up on your production server and can expose sensitive information about your website. These files may include: configuration files or files that contain metadata about the project among others.
 
-```apache
+```apacheconf
 
   
     Require all denied
@@ -444,7 +444,7 @@ The following header ensures that a browser only connects to your server via HTT
 
 Be aware that Strict Transport Security is not revokable, and you must ensure being able to serve the site over HTTPS for as long as you've specified in the `max-age` directive. If you don't have a valid TLS connection anymore (e.g. due to an expired TLS certificate) your visitors will see an error message even when attempting to connect over HTTP.
 
-```apache
+```apacheconf
 
   # Header always set
   Strict-Transport-Security "max-age=16070400; includeSubDomains" "expr=%{HTTPS} == 'on'"
@@ -479,7 +479,7 @@ Be aware that Strict Transport Security is not revokable, and you must ensure be
 
 Some older browsers would try and guess the content type of a resource, even when it isn't properly set up on the server configuration. This reduces exposure to drive-by download attacks and cross-origin data leaks.
 
-```apache
+```apacheconf
 
     Header always set X-Content-Type-Options "nosniff"
 
@@ -498,7 +498,7 @@ Use services like the ones below to check your Referrer Policy:
 - [securityheaders.com](https://securityheaders.com/)
 - [Mozilla Observatory](https://observatory.mozilla.org/)
 
-```apache
+```apacheconf
 
   Header always set Referrer-Policy "strict-origin-when-cross-origin" "expr=%{CONTENT_TYPE} =~ m#text\/(css|html|javascript)|application\/pdf|xml#i"
 
@@ -512,7 +512,7 @@ Modern browsers now prevent TRACE requests made via JavaScript, however, other w
 
 If you have access to the main server configuration file, use the [`TraceEnable`](https://httpd.apache.org/docs/current/mod/core.html#traceenable) directive instead.
 
-```apache
+```apacheconf
 
   RewriteEngine On
   RewriteCond %{REQUEST_METHOD} ^TRACE [NC]
@@ -526,7 +526,7 @@ Some frameworks like PHP and ASP.NET set an `X-Powered-By` header that contains
 
 This header doesn't provide any value, and in some cases, the information it provides can expose vulnerabilities
 
-```apache
+```apacheconf
 
   Header unset X-Powered-By
   Header always unset X-Powered-By
@@ -543,7 +543,7 @@ expose_php = off;
 
 Prevent Apache from adding a trailing footer line containing information about the server to the server-generated documents (e.g.: error messages, directory listings, etc.). See [ServerSignature Directive](https://httpd.apache.org/docs/current/mod/core.html#serversignature) for more information on what the server signature provides and the [ServerTokens Directive](https://httpd.apache.org/docs/current/mod/core.html#servertokens) for information about configuring the information provided in the signature.
 
-```apache
+```apacheconf
 ServerSignature Off
 ```
 
@@ -551,7 +551,7 @@ ServerSignature Off
 
 Some proxies and security software mangle or strip the `Accept-Encoding` HTTP header. See [Pushing Beyond Gzipping](https://calendar.perfplanet.com/2010/pushing-beyond-gzipping/) for a more detailed explanation.
 
-```apache
+```apacheconf
 
   
     
@@ -566,7 +566,7 @@ Some proxies and security software mangle or strip the `Accept-Encoding` HTTP he
 
 Compress all output labeled with one of the following media types using the [AddOutputFilterByType Directive](https://httpd.apache.org/docs/current/mod/mod_filter.html#addoutputfilterbytype).
 
-```apache
+```apacheconf
 
   
     AddOutputFilterByType DEFLATE "application/atom+xml" \
@@ -613,7 +613,7 @@ Compress all output labeled with one of the following media types using the [Add
 
 Map the following filename extensions to the specified encoding type using [AddEncoding](https://httpd.apache.org/docs/current/mod/mod_mime.html#addencoding) so Apache can serve the file types with the appropriate `Content-Encoding` response header (this will NOT make Apache compress them!). If these files types were served without an appropriate `Content-Encoding` response header, client applications (e.g.: browsers) wouldn't know that they first need to uncompress the response, and thus, wouldn't be able to understand the content.
 
-```apache
+```apacheconf
 
   
     AddEncoding gzip svgz
@@ -625,7 +625,7 @@ Map the following filename extensions to the specified encoding type using [AddE
 
 Serve resources with a far-future expiration date using the [mod_expires](https://httpd.apache.org/docs/current/mod/mod_expires.html) module, and [Cache-Control](/en-US/docs/Web/HTTP/Headers/Cache-Control) and [Expires](/en-US/docs/Web/HTTP/Headers/Expires) headers.
 
-```apache
+```apacheconf
 
     ExpiresActive on
     ExpiresDefault                                      "access plus 1 month"

From 44d490f2fd2d04452797c210ca1cc5e9d4090396 Mon Sep 17 00:00:00 2001
From: Nick Schonning 
Date: Mon, 15 May 2023 16:10:05 -0400
Subject: [PATCH 39/86] fix: various typos (#26791)

---
 files/en-us/glossary/block-level_content/index.md             | 2 +-
 files/en-us/web/api/credentialscontainer/create/index.md      | 2 +-
 files/en-us/web/api/credentialscontainer/get/index.md         | 2 +-
 .../api/web_authentication_api/webauthn_extensions/index.md   | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/files/en-us/glossary/block-level_content/index.md b/files/en-us/glossary/block-level_content/index.md
index 77643b1d182e300..8cda2cfc4d54f9f 100644
--- a/files/en-us/glossary/block-level_content/index.md
+++ b/files/en-us/glossary/block-level_content/index.md
@@ -9,7 +9,7 @@ In CSS, content that participates in block layout is called **block-level conten
 In a block layout, boxes are laid out one after the other, vertically, beginning at the top of a containing block. Each box's left outer edge touches the left edge of the containing block.\
 A block-level element always starts on a new line. In horizontal writing modes, like English or Arabic, it occupies the entire horizontal space of its parent element (container) and vertical space equal to the height of its contents, thereby creating a "block".
 
-> **Note:** The above behaviour of block layout changes if the containing block's [`writing-mode`](/en-US/docs/Web/CSS/writing-mode) is set to value other than [the default value](/en-US/docs/Web/CSS/writing-mode#formal_definition).
+> **Note:** The above behavior of block layout changes if the containing block's [`writing-mode`](/en-US/docs/Web/CSS/writing-mode) is set to value other than [the default value](/en-US/docs/Web/CSS/writing-mode#formal_definition).
 
 > **Note:** HTML (_HyperText Markup Language_) elements historically were categorized as either "block-level" elements or "inline" elements. As a presentational characteristic, this is now specified by CSS.
 
diff --git a/files/en-us/web/api/credentialscontainer/create/index.md b/files/en-us/web/api/credentialscontainer/create/index.md
index 770f3de4ce967da..13545300686bbfb 100644
--- a/files/en-us/web/api/credentialscontainer/create/index.md
+++ b/files/en-us/web/api/credentialscontainer/create/index.md
@@ -36,7 +36,7 @@ create(options)
 
       - : An object defining the type of credential being requested — this can be one of one of:
 
-        - `federated`: An object containing requirements for creating a federated identify provider credential. Bear in mind that the [Federated Credential Management API (FedCM)](/en-US/docs/Web/API/FedCM_API) supercedes this credential type. See the [Credential Management API](#credential_management_api) section below for more details.
+        - `federated`: An object containing requirements for creating a federated identify provider credential. Bear in mind that the [Federated Credential Management API (FedCM)](/en-US/docs/Web/API/FedCM_API) supersedes this credential type. See the [Credential Management API](#credential_management_api) section below for more details.
         - `password`: An object containing requirements for creating a password credential. See the [Credential Management API](#credential_management_api) section below for more details.
         - `publicKey`: An object containing requirements for creating a public key credential. Causes the `create()` call to request that the user agent creates new credentials via an authenticator — either for registering a new account or for associating a new asymmetric key pair with an existing account. See the [Web Authentication API](#web_authentication_api) section below for more details.
 
diff --git a/files/en-us/web/api/credentialscontainer/get/index.md b/files/en-us/web/api/credentialscontainer/get/index.md
index 33bd64cc6a96211..c71a1c0acde33f5 100644
--- a/files/en-us/web/api/credentialscontainer/get/index.md
+++ b/files/en-us/web/api/credentialscontainer/get/index.md
@@ -33,7 +33,7 @@ get(options)
 
       - : An object or boolean defining the type of credential being requested — this can be one of one of:
 
-        - `federated`: An object containing requirements for a requested credential from a federated identify provider. Bear in mind that the Federated Credential Management API (the `identity` credential type) supercedes this credential type. See the [Credential Management API](#credential_management_api) section below for more details.
+        - `federated`: An object containing requirements for a requested credential from a federated identify provider. Bear in mind that the Federated Credential Management API (the `identity` credential type) supersedes this credential type. See the [Credential Management API](#credential_management_api) section below for more details.
         - `password`: A boolean value indicating that a password credential is being requested. See the [Credential Management API](#credential_management_api) section below for more details.
         - `identity`: An object containing details of federated identity providers (IdPs) that a relying party (RP) website can use to sign users in. Causes the `get()` call to initiate a request for a user to sign in to a relying party with an IdP. See the [Federated Credential Management API](#federated_credential_management_api) section below for more details.
         - `publicKey`: An object containing requirements for returned public key credentials. Causes the `get()` call to use an existing set of public key credentials to authenticate to a relying party. See the [Web Authentication API](#web_authentication_api) section below for more details.
diff --git a/files/en-us/web/api/web_authentication_api/webauthn_extensions/index.md b/files/en-us/web/api/web_authentication_api/webauthn_extensions/index.md
index 08d69c89f7b6467..af1bf2e95c5cd9a 100644
--- a/files/en-us/web/api/web_authentication_api/webauthn_extensions/index.md
+++ b/files/en-us/web/api/web_authentication_api/webauthn_extensions/index.md
@@ -126,7 +126,7 @@ Outputs `appid: true` if the `appid` was successfully used for the assertion, or
 - Processed by: User agent
 - Specification: [FIDO AppID Exclusion Extension (appidExclude)](https://w3c.github.io/webauthn/#sctn-appid-exclude-extension)
 
-Allows a relying party to exclude authenticators containing specified credentials previously registered using the legacy FIDO U2F JavaScript API during regiatration. This is required because by default the contents of the `excludeCredentials` field are assumed to be WebAuthn credentials. When using this extension, you can include legacy FIDO U2F credentials inside `excludeCredentials`, and they will be recognized as such.
+Allows a relying party to exclude authenticators containing specified credentials previously registered using the legacy FIDO U2F JavaScript API during registration. This is required because by default the contents of the `excludeCredentials` field are assumed to be WebAuthn credentials. When using this extension, you can include legacy FIDO U2F credentials inside `excludeCredentials`, and they will be recognized as such.
 
 #### Input
 
@@ -353,6 +353,6 @@ Places where extensions are specified:
 
 ## Browser compatibility
 
-The compatibility data for WebAuthn extensions has been brooken down into two tables — extensions that can be used during credential registration ({{domxref("CredentialsContainer.create()","create()")}}), and extensions that can be used during authentication ({{domxref("CredentialsContainer.get()","get()")}}). Some extensions are usable during both operations.
+The compatibility data for WebAuthn extensions has been broken down into two tables — extensions that can be used during credential registration ({{domxref("CredentialsContainer.create()","create()")}}), and extensions that can be used during authentication ({{domxref("CredentialsContainer.get()","get()")}}). Some extensions are usable during both operations.
 
 {{Compat}}

From 1724e23bc76b136266b75afa6b45bfd708ee69a5 Mon Sep 17 00:00:00 2001
From: Shiung 
Date: Tue, 16 May 2023 04:29:40 +0700
Subject: [PATCH 40/86] [#22377] Amend to be aligned with recommendation
 (#26670)

* Amend to be aligned with recommendation

* Update files/en-us/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md

It's a good correction

Co-authored-by: wbamberg 

* Update files/en-us/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md

Co-authored-by: Estelle Weyl 

---------

Co-authored-by: wbamberg 
Co-authored-by: Estelle Weyl 
---
 .../what_will_your_website_look_like/index.md       | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/files/en-us/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md b/files/en-us/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
index 49dec5043a94518..4cfac3f6075bbc9 100644
--- a/files/en-us/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
+++ b/files/en-us/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
@@ -60,10 +60,15 @@ Note that most images on the web, including in Google Images, are copyrighted. T
 
 ### Font
 
-To choose a font:
+As with images, many fonts are protected by licenses, meaning you cannot freely use them in your site. [Google Fonts](https://developers.google.com/fonts) is a web service owned by Google that provides access to many fonts.
 
-1. Go to [Google Fonts](https://fonts.google.com/) and find one you like.
-2. Copy the lines of code Google gives you into your text editor to save for later.
-3. For more details about using Google Fonts, see [this page](https://developers.google.com/fonts/docs/getting_started)
+Once you have found a font, there are two main ways of using it:
+
+1. Add a reference in your code to load the font from Google's servers.
+2. Download the font file to your own system, host the font yourself, and use your hosted copy in your website's code.
+
+> **Note:** Serving fonts hosted on Google Fonts may be incompatible with the European Union's data privacy regulation [GDPR](https://gdpr.eu/what-is-gdpr/) as the font service exposes the user's IP address. If this is a potential problem for you, choose the second option.
+
+Alternatively you can use [safe web fonts](https://web.mit.edu/jmorzins/www/fonts.html) such as Arial, Times New Roman, or Courier New.
 
 {{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

From 0e41c501d7b6caf0272c314faaf4a3017e961d46 Mon Sep 17 00:00:00 2001
From: Estelle Weyl 
Date: Mon, 15 May 2023 14:32:49 -0700
Subject: [PATCH 41/86] CSS: scroll snap module (#26735)

* Make scroll snap like other landing pages

* additions

* edit to related

* Remove excess content and words

* Apply suggestions from code review

Co-authored-by: Dipika Bhattacharya 

* remove glossary section

* extra line space

* add white space

* edits after review

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

Co-authored-by: Dipika Bhattacharya 

---------

Co-authored-by: Dipika Bhattacharya 
---
 .../css_scroll_snap/basic_concepts/index.md   | 40 +++++++++-------
 files/en-us/web/css/css_scroll_snap/index.md  | 47 +++++++++++++------
 2 files changed, 57 insertions(+), 30 deletions(-)

diff --git a/files/en-us/web/css/css_scroll_snap/basic_concepts/index.md b/files/en-us/web/css/css_scroll_snap/basic_concepts/index.md
index 5a8d9c32b2fcb1c..3afc92d493c5112 100644
--- a/files/en-us/web/css/css_scroll_snap/basic_concepts/index.md
+++ b/files/en-us/web/css/css_scroll_snap/basic_concepts/index.md
@@ -6,36 +6,43 @@ page-type: guide
 
 {{CSSRef}}
 
-The [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap) feature provides a way to snap the scrolling to certain points as the user scrolls through a document. This can be helpful in creating a more app-like experience on mobile or even on the desktop for some types of applications.
+The properties in the [CSS scroll snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap) module enable you to define how scrolling snaps to specific points as a user scrolls through a document.
 
-## Key properties for CSS Scroll Snap
+The scroll snap feature lets you define the snap positions where a [scroll container](/en-US/docs/Glossary/Scroll_container)'s scrollport may end or "snap to" after a scrolling operation has completed.
 
-The key properties for the scroll snap feature are:
+## Key properties for CSS scroll snap
 
-- {{CSSxRef("scroll-snap-type")}}: This property is used on the [scroll container](/en-US/docs/Glossary/Scroll_container) to specify the type, direction, and optionality of scrolling.
-- {{CSSxRef("scroll-snap-align")}}: This property is used on child elements to specify the scroll snap position.
+Before you can define scroll snapping, you need to enable scrolling on a scroll container. You can do this by ensuring that the scroll container has a defined size and that it has {{cssxref("overflow")}} enabled.
 
-The example below demonstrates scroll snapping along the vertical axis, which is defined by `scroll-snap-type`. Additionally, `scroll-snap-align` is used on all the `
    ` element children dictating the point where the scrolling of each child should stop.
+You can then define scroll snapping on the scroll container by using the following two key properties:
+
+- {{cssxref("scroll-snap-type")}}: Using this property, you can define whether or not the scrollable viewport can be snapped to, whether snapping is required or optional, and the axis on which the snapping should occur.
+- {{cssxref("scroll-snap-align")}}: This property is set on every child of the scroll container and you can use it to define each child's snap position or lack thereof. (Using the {{cssxref("scroll-snap-stop")}} property, you can ensure that a child is snapped to during scrolling and not passed over. You can also set several {{cssxref("scroll-margin")}} properties on child elements that are snapped to during scrolling to create an outset from the defined box.)
+Optional {{cssxref("scroll-padding")}} properties can be set on the scroll container to create a snapping offset.
+
+The example below demonstrates scroll snapping along the vertical axis, which is defined by `scroll-snap-type`. Additionally, `scroll-snap-align` applies on all the children of the `
    ` element, dictating the point where the scrolling of each child should stop.
 
 {{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", '100%', 700)}}
 
 ## Using scroll-snap-type
 
-The {{CSSxRef("scroll-snap-type")}} property needs to know the direction in which scroll snapping happens. This could be `x`, `y`, or the logical mappings `block` or `inline`. You can also use the keyword `both` to have scroll snapping work along both axes.
+The {{CSSxRef("scroll-snap-type")}} property needs to know the direction in which scroll snapping happens. This can be `x`, `y`, or the logical mappings `block` or `inline`. You can also use the keyword `both` to have scroll snapping work along both axes.
 
 You can also pass in the keywords `mandatory` or `proximity`. The `mandatory` keyword tells the browser whether the content _has_ to snap to a certain point, no matter where the scroll is. The `proximity` keyword means that the content may snap to the point, but does not have to.
 
-Using `mandatory` creates a very consistent scrolling experience — you know that the browser will always snap to each defined point. This means that you can be confident that something you expect to be at the top of the screen will be when scrolling finishes. However, it can cause problems if the content is larger than you expect — users may find themselves in the frustrating position of never being able to scroll and view a certain point in the content. Therefore, use of `mandatory` should be carefully considered and only used in situations where you know how much content is on the screen at any time.
+Using `mandatory` creates a very consistent scrolling experience — you know the browser will always snap to each defined point. This means that you can be confident that something you expect to be at the top of the screen will be there when scrolling finishes. However, it can cause problems if the content is larger than you expect — users may find themselves in the frustrating position of never being able to scroll and view a certain point in the content. Therefore, the use of `mandatory` should be carefully considered and only used in situations where you know how much content is on the screen or scrollable section at any time.
 
-> **Note:** Never use `mandatory` if the content inside one of your child elements will overflow the parent container because the overflowing content will not be visible.
+> **Note:** Never use `mandatory` if the content inside one of your child elements will overflow the parent container because user will not be able to scroll the overflowing content into view.
 
-The `proximity` value will only snap to a position when it is close by, the exact distance being left to the browser to decide.
+The `proximity` value only snaps child elements to a position when it is close by, with the browsers determining the exact distance.
 
 In the example below, you can change the value between `mandatory` and `proximity` to see the effect this has on the scroll experience.
 
 {{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", '100%', 700)}}
 
-In the above example, both {{cssxref("height", "height: 300px;")}} and {{cssxref("overflow-y", "overflow-y: scroll;")}} are set on the scroll container. If the contents don't overflow their container, there is nothing to scroll.
+In the above example, both {{cssxref("height", "height: 300px;")}} and {{cssxref("overflow-y", "overflow-y: scroll;")}} are set on the scroll container.
+
+If the content doesn't overflow its container, there is nothing to scroll.
 
 ## Using scroll-snap-align
 
@@ -47,30 +54,31 @@ If `scroll-snap-type` is `mandatory` and `scroll-snap-align` on a child is eithe
 
 ## Using scroll-padding
 
-If you do not want the content to snap right to the edge of the scroll container, you can use the {{CSSxRef("scroll-padding")}} property or its equivalent longhand values to add some padding.
+When using `start` or `end`, if you do not want the content to snap right to the edge of the scroll container, or if you want the snap position to be slightly offset from center when using `center`, use the {{CSSxRef("scroll-padding")}} property or its equivalent longhand values to add some padding.
 
 In the example below, `scroll-padding` is set to `40px`. When the content snaps to the start of the second and third sections, scrolling stops 40 pixels away from the start of the section. Try changing the `scroll-padding` value to see how this changes the distance.
 
 {{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}}
 
-This is potentially useful if you have a [fixed](/en-US/docs/Web/CSS/position#fixed_positioning) element, for example a navigation bar, which could end up overlapping scrolled content. By using `scroll-padding`, you can reserve a space for the fixed element, as shown in the example below, where the `
    ` element remains on screen as the content scrolls beneath it. Without padding, the heading would overlap some of the content when snapping happens.
+This is potentially useful if you have a [fixed](/en-US/docs/Web/CSS/position#fixed_positioning) element such as a navigation bar, which could end up overlapping scrolled content. By using `scroll-padding`, you can reserve space for the fixed element, as shown in the example below, where the `
    ` element remains on screen as the content scrolls beneath it. Without padding, the heading would overlap some of the content when snapping happens.
 
 {{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}}
 
 ## Using scroll-margin
 
-The {{CSSxRef("scroll-margin")}} property or the longhand scroll margin values can be set on child elements, essentially defining an outset from the defined box. This allows for different amounts of space for different child elements and can be used in conjunction with `scroll-padding` on the parent. Try this in the example below.
+The {{CSSxRef("scroll-margin")}} property or the longhand scroll margin values can be set on child elements, defining an outset from the defined box. This allows for different amounts of space for different child elements and can be used in conjunction with `scroll-padding` on the parent. Try this in the example below.
 
 {{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}
 
 ## Using scroll-snap-stop
 
-The {{CSSxRef("scroll-snap-stop")}} property tells the browser whether it should snap to each defined snap point — meaning that in our examples above we would stop at the start of each section — or be able to skip past sections.
+Using the {{CSSxRef("scroll-snap-stop")}} property, you can specify whether the scrolling must snap to the defined snap points. In the above examples, this would mean that the scrolling would stop at the start of each section or be able to skip past sections.
 
-It could be helpful in ensuring users see each section of the scroller and don't accidentally zip past them. However, it could be problematic in making the scrolling experience slower if the user is looking for a particular section.
+With this property definition, you can ensure that users see each section of the scroller and don't accidentally scroll past them. However, this setting can also negatively affect user experience by preventing the user from quickly scrolling to their desired content.
 
 ## See also
 
+- [CSS scroll snap module](/en-US/docs/Web/CSS/CSS_Scroll_Snap/)
 - [Well-controlled scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)
 - [Practical CSS scroll snapping/](https://css-tricks.com/practical-css-scroll-snapping/)
 - [CSS Scroll Snap](https://12daysofweb.dev/2022/css-scroll-snap/)
diff --git a/files/en-us/web/css/css_scroll_snap/index.md b/files/en-us/web/css/css_scroll_snap/index.md
index cc15fd953ee6312..81caaaa1246af82 100644
--- a/files/en-us/web/css/css_scroll_snap/index.md
+++ b/files/en-us/web/css/css_scroll_snap/index.md
@@ -7,15 +7,23 @@ spec-urls: https://drafts.csswg.org/css-scroll-snap/
 
 {{CSSRef}}
 
-**CSS Scroll Snap** is a module of CSS that contains features to control panning and scrolling behavior with snap positions.
+The **CSS scroll snap** module provides properties that let you control the panning and scrolling behavior by defining snap positions. Content can be snapped into position as the user scrolls overflowing content within a {{Glossary("scroll container")}}, providing paging and scroll positioning.
 
-## Key concepts
+This module includes the scroll container scroll-padding properties to adjust the optimal viewing region of paging during scroll-into-view operations. It also includes scroll-margin and scroll-alignment, set on the scroll container's children, to adjust the children's visual area when that child is scrolled into view, as well as a property to force scrolling to stop on individual children.
 
-CSS scroll snap enables snapping content as the user scrolls overflowing content within a {{Glossary("scroll container")}}. Scroll snap introduces scroll snap positions, which enforce the scroll positions that a scroll container's {{Glossary("scrollport")}} may end at after a scrolling operation has completed.
+## Scroll snap in action
 
-To enable scroll snapping, the scrolling behavior is defined on the scroll container. The container's {{cssxref("scroll-snap-type")}} property defines whether the scrollable viewport can be snapped to, the axis upon which the snapping occurs, and whether snapping is required or optional. To enable scrolling, the container should have a defined size and {{cssxref("overflow")}} must be enabled. There are optional {{cssxref("scroll-padding")}} properties that can be set on the scroll container to create a snapping offset.
+To view scroll snapping in the box below, scroll up-and-down and left-and-right through the grid of 45 numbered boxes in the scrollable viewport.
 
-The {{cssxref("scroll-snap-align")}} property is set on every child of the scroll container, defining each child's snap position or lack thereof. The {{cssxref("scroll-snap-stop")}} property enables requiring that child is snapped to during scrolling and not passed over. There are several {{cssxref("scroll-margin")}} properties that can be set on the snapped-to child elements to create an outset from the defined box.
+{{EmbedGHLiveSample("css-examples/modules/scroll_snap.html", '100%', 250)}}
+
+With scroll snap, one of the numbered boxes that you scroll to will snap into place. The initial CSS makes the numbered box snap into the center of the viewport. Use the sliders to change the block and inline snap positions.
+
+Using snap properties, you can allow or block the scrolling past an element, a numbered box in this case. Select the "Prevent scrolling past boxes" checkbox to force all scrolling actions to be limited to scrolling to an adjacent box.
+
+To compare scroll snapping to regular scrolling, check the "disable snapping" checkbox and try scrolling again.
+
+To see the code for this example, [view the source on Github](https://github.com/mdn/css-examples/blob/main/modules/scroll_snap.html).
 
 ## Reference
 
@@ -50,14 +58,22 @@ The {{cssxref("scroll-snap-align")}} property is set on every child of the scrol
   - {{cssxref("scroll-margin-block-end")}}
 - {{cssxref("scroll-snap-stop")}}
 
-### Glossary terms
+## Guides
 
-- {{Glossary("scroll container")}}
-- {{Glossary("scrollport")}}
+- [Basic concepts of CSS scroll snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts)
+  - : An overview and examples of CSS scroll snap features.
 
-## Guides
+## Related concepts
 
-- [Basic concepts of CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts)
+- {{cssxref(":target")}} pseudo-class
+- {{cssxref("overflow")}} CSS property
+- Element {{domxref("Element.scroll", "scroll()")}} method
+- Element {{domxref("Element.scrollBy", "scrollBy()")}} method
+- Element {{domxref("Element.scrollIntoView", "scrollIntoView()")}} method
+- Element {{domxref("Element.scrollTo", "scrollTo()")}} method
+- Document {{domxref("Document.scroll_event", "scroll")}} event
+- [`scrollbar`](/en-US/docs/Web/Accessibility/ARIA/Roles/scrollbar_role) ARIA role
+- {{Glossary("Scroll container")}} glossary term
 
 ## Specifications
 
@@ -65,7 +81,10 @@ The {{cssxref("scroll-snap-align")}} property is set on every child of the scrol
 
 ## See also
 
-- [Well-controlled scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)
-- [Practical CSS scroll snapping/](https://css-tricks.com/practical-css-scroll-snapping/)
-- [CSS Scroll Snap](https://12daysofweb.dev/2022/css-scroll-snap/)
-- [Scroll snap examples on Codepen](https://codepen.io/collection/KpqBGW)
+- [CSS overflow](/en-US/docs/Web/CSS/CSS_Overflow) module
+- [CSS scrollbars style](/en-US/docs/Web/CSS/CSS_Scrollbars) module
+- [Keyboard-only scrolling areas](https://adrianroselli.com/2022/06/keyboard-only-scrolling-areas.html) on adrianroselli.com (November 28, 2022)
+- [Scroll snap examples](https://codepen.io/collection/KpqBGW) on Codepen (September 7, 2022)
+- [Well-controlled scrolling with CSS scroll snap](https://web.dev/css-scroll-snap/) on web.dev (August 13, 2021)
+- [Practical CSS scroll snapping/](https://css-tricks.com/practical-css-scroll-snapping/) on CSS-Tricks (June 18, 2020)
+- [CSS scroll snap](https://12daysofweb.dev/2022/css-scroll-snap/) on 12 Days of Web (December 7, 2019)

From 8a6425d1489986cf7b187f484abbecad130f23a9 Mon Sep 17 00:00:00 2001
From: Lucas Genzelis 
Date: Tue, 16 May 2023 00:28:45 -0300
Subject: [PATCH 42/86] Update index.md (#26789)

Fix grammar
---
 files/en-us/web/html/global_attributes/hidden/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/html/global_attributes/hidden/index.md b/files/en-us/web/html/global_attributes/hidden/index.md
index 6a7fad6094d34af..2e64327aa672eaa 100644
--- a/files/en-us/web/html/global_attributes/hidden/index.md
+++ b/files/en-us/web/html/global_attributes/hidden/index.md
@@ -53,7 +53,7 @@ Elements that are descendants of a hidden element are still active, which means
 
 The _hidden_ state indicates that the element is not currently relevant to the page, or that it is being used to declare content for reuse by other parts of the page and should not be directly presented to the user. The browser will not render elements that are in the _hidden_ state.
 
-Web browsers may implement the _hidden_ state using `display: none`, in which case the element will not participate in page layout. This also means that changing the value of the CSS {{cssxref("display")}} property on an element in the _hidden_ state will overrides the state. For instance, elements styled `display: block` will be displayed despite the `hidden` attribute's presence.
+Web browsers may implement the _hidden_ state using `display: none`, in which case the element will not participate in page layout. This also means that changing the value of the CSS {{cssxref("display")}} property on an element in the _hidden_ state will override the state. For instance, elements styled `display: block` will be displayed despite the `hidden` attribute's presence.
 
 ### The hidden until found state
 

From d26dda0bfcab0366fc3ef49ce9e3b241afb9c39e Mon Sep 17 00:00:00 2001
From: SphinxKnight 
Date: Tue, 16 May 2023 05:29:54 +0200
Subject: [PATCH 43/86] Remove unnecessary heading in popover global attr page
 (#26780)

Remove unnecessary heading
---
 files/en-us/web/html/global_attributes/popover/index.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/files/en-us/web/html/global_attributes/popover/index.md b/files/en-us/web/html/global_attributes/popover/index.md
index e82fb330899f9ee..c954b58b3ebbe44 100644
--- a/files/en-us/web/html/global_attributes/popover/index.md
+++ b/files/en-us/web/html/global_attributes/popover/index.md
@@ -19,8 +19,6 @@ For detailed information on usage, see the {{domxref("Popover API", "Popover API
 
 ## Examples
 
-## Basic example
-
 The following will render a button which will open a popover element.
 
 ```html

From 3e8ffb9b38d39d1ef4e74828543fb43fc4c92e8c Mon Sep 17 00:00:00 2001
From: Nick Blackwell 
Date: Mon, 15 May 2023 20:32:29 -0700
Subject: [PATCH 44/86] fix space in permission name (#26794)

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

diff --git a/files/en-us/web/api/permissions/index.md b/files/en-us/web/api/permissions/index.md
index 45543a6b53809f8..4502fdc6f96d2ed 100644
--- a/files/en-us/web/api/permissions/index.md
+++ b/files/en-us/web/api/permissions/index.md
@@ -23,7 +23,7 @@ The Permissions interface of the [Permissions API](/en-US/docs/Web/API/Permissio
 ## Example
 
 ```js
-navigator.permissions.query({ name: " geolocation" }).then((result) => {
+navigator.permissions.query({ name: "geolocation" }).then((result) => {
   if (result.state === "granted") {
     showLocalNewsWithGeolocation();
   } else if (result.state === "prompt") {

From b18b0ea6e71c1178cbdffbe096b4d3ac3947c583 Mon Sep 17 00:00:00 2001
From: Chris Mills 
Date: Tue, 16 May 2023 09:52:06 +0100
Subject: [PATCH 45/86] Update Storage Access API content (#26558)

* Update Storage Access API content

* Making fixes for cfredric review comments

* updates made according to cfredric review comments

* 2nd round of fixes for cfredric comments

* Update files/en-us/web/api/storage_access_api/using/index.md

Co-authored-by: Brian Thomas Smith 

* Update files/en-us/web/api/document/hasstorageaccess/index.md

Co-authored-by: Brian Thomas Smith 

* Update files/en-us/web/api/document/requeststorageaccess/index.md

Co-authored-by: Brian Thomas Smith 

* Update files/en-us/web/api/storage_access_api/index.md

Co-authored-by: Brian Thomas Smith 

* Update files/en-us/web/api/storage_access_api/index.md

Co-authored-by: Brian Thomas Smith 

* Update files/en-us/web/api/document/hasstorageaccess/index.md

Co-authored-by: Brian Thomas Smith 

* Update files/en-us/web/api/document/requeststorageaccess/index.md

Co-authored-by: Brian Thomas Smith 

---------

Co-authored-by: Brian Thomas Smith 
---
 .../api/document/hasstorageaccess/index.md    |  18 ++-
 files/en-us/web/api/document/index.md         |   4 +-
 .../document/requeststorageaccess/index.md    |  37 +++---
 .../en-us/web/api/storage_access_api/index.md | 110 ++++++++++++------
 .../web/api/storage_access_api/using/index.md |  91 +++++++++------
 files/en-us/web/html/element/iframe/index.md  |   4 +-
 .../http/headers/permissions-policy/index.md  |   4 +
 .../storage-access/index.md                   |  43 +++++++
 8 files changed, 216 insertions(+), 95 deletions(-)
 create mode 100644 files/en-us/web/http/headers/permissions-policy/storage-access/index.md

diff --git a/files/en-us/web/api/document/hasstorageaccess/index.md b/files/en-us/web/api/document/hasstorageaccess/index.md
index 57b15f9da0cdbb8..3ac71359508e0c3 100644
--- a/files/en-us/web/api/document/hasstorageaccess/index.md
+++ b/files/en-us/web/api/document/hasstorageaccess/index.md
@@ -8,7 +8,7 @@ browser-compat: api.Document.hasStorageAccess
 
 {{APIRef("Storage Access API")}}
 
-The **`hasStorageAccess()`** method of the {{domxref("Document")}} interface returns a {{jsxref("Promise")}} that resolves with a boolean value indicating whether the document has access to its first-party storage.
+The **`hasStorageAccess()`** method of the {{domxref("Document")}} interface returns a {{jsxref("Promise")}} that resolves with a boolean value indicating whether the document has access to unpartitioned cookies.
 
 This method is part of the [Storage Access API](/en-US/docs/Web/API/Storage_Access_API).
 
@@ -24,9 +24,19 @@ None.
 
 ### Return value
 
-A {{jsxref("Promise")}} that resolves with a boolean value indicating whether the document has access to its first-party storage.
+A {{jsxref("Promise")}} that resolves with a boolean value indicating whether the document has access to unpartitioned cookies — `true` if it does, and `false` if not.
 
-If the promise gets resolved and a user gesture event was being processed when the function was originally called, the resolve handler will run as if a user gesture was being processed, so it will be able to call APIs that require user activation.
+The result returned by this method can be inaccurate in a couple of circumstances:
+
+1. The user may have browser settings active that block unpartitioned cookies entirely — in this case `true` may be returned even though unpartitioned cookies are still inaccessible. To handle such a situation, you should gracefully handle any errors resulting in cookie values being unretrievable; for example, inform the user that access to their personalized settings is blocked and invite them to sign in again to use them.
+2. The browser might not block third-party cookie access by default — in this case `false` may be returned even though unpartitioned cookies are accessible, and storage access wouldn't need to be requested (i.e. via {{domxref("Document.requestStorageAccess()")}}). To get around this issue, you could query {{domxref("Document.cookie")}} to find out whether your cookies are accessible, and call {{domxref("Document.requestStorageAccess()")}} if they are not.
+
+> **Note:** If the promise gets resolved and a user gesture event was being processed when the function was originally called, the resolve handler will run as if a user gesture was being processed, so it will be able to call APIs that require user activation.
+
+### Exceptions
+
+- `InvalidStateError` {{domxref("DOMException")}}
+  - : Thrown if the current {{domxref("Document")}} is not yet active.
 
 ## Examples
 
@@ -41,6 +51,8 @@ document.hasStorageAccess().then((hasAccess) => {
 });
 ```
 
+> **Note:** See [Using the Storage Access API](/en-US/docs/Web/API/Storage_Access_API/Using) for a more complete example.
+
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/api/document/index.md b/files/en-us/web/api/document/index.md
index 0bdb3d029d7efe5..f6f41acbadbcfb0 100644
--- a/files/en-us/web/api/document/index.md
+++ b/files/en-us/web/api/document/index.md
@@ -241,7 +241,7 @@ _This interface also inherits from the {{DOMxRef("Node")}} and {{DOMxRef("EventT
 - {{DOMxRef("Document.getSelection()")}}
   - : Returns a {{DOMxRef('Selection')}} object representing the range of text selected by the user, or the current position of the caret.
 - {{DOMxRef("Document.hasStorageAccess()")}}
-  - : Returns a {{jsxref("Promise")}} that resolves with a boolean value indicating whether the document has access to its first-party storage.
+  - : Returns a {{jsxref("Promise")}} that resolves with a boolean value indicating whether the document has access to unpartitioned cookies.
 - {{DOMxRef("Document.importNode()")}}
   - : Returns a clone of a node from an external document.
 - {{DOMxRef("Document.prepend()")}}
@@ -257,7 +257,7 @@ _This interface also inherits from the {{DOMxRef("Node")}} and {{DOMxRef("EventT
 - {{DOMxRef("Document.replaceChildren()")}}
   - : Replaces the existing children of a document with a specified new set of children.
 - {{DOMxRef("Document.requestStorageAccess()")}}
-  - : Returns a {{jsxref("Promise")}} that resolves if the access to first-party storage was granted, and rejects if access was denied.
+  - : Allows a document loaded in a third-party context (i.e. embedded in an {{htmlelement("iframe")}}) to request access to unpartitioned cookies, in cases where user agents by default block access to unpartitioned cookies by sites loaded in a third-party context to improve privacy.
 - {{domxref("Document.startViewTransition()")}} {{Experimental_Inline}}
   - : Starts a new {{domxref("View Transitions API", "view transition", "", "nocode")}} and returns a {{domxref("ViewTransition")}} object to represent it.
 - {{DOMxRef("Document.mozSetImageElement()")}} {{Non-standard_Inline}}
diff --git a/files/en-us/web/api/document/requeststorageaccess/index.md b/files/en-us/web/api/document/requeststorageaccess/index.md
index 7f13972b8fb79f2..ac8b11e4db5dc69 100644
--- a/files/en-us/web/api/document/requeststorageaccess/index.md
+++ b/files/en-us/web/api/document/requeststorageaccess/index.md
@@ -6,11 +6,13 @@ page-type: web-api-instance-method
 browser-compat: api.Document.requestStorageAccess
 ---
 
-{{APIRef("Storage Access API")}}
+{{APIRef("DOM")}}
 
-The **`requestStorageAccess()`** method of the {{domxref("Document")}} interface returns a {{jsxref("Promise")}} that resolves if the access to first-party storage was granted, and rejects if access was denied.
+The **`requestStorageAccess()`** method of the {{domxref("Document")}} interface allows a document loaded in a third-party context (i.e. embedded in an {{htmlelement("iframe")}}) to request access to unpartitioned cookies.
 
-This is part of the [Storage Access API](/en-US/docs/Web/API/Storage_Access_API).
+This is relevant to user agents that by default block access to unpartitioned cookies by sites loaded in a third-party context to improve privacy (e.g. to prevent tracking), and is part of the [Storage Access API](/en-US/docs/Web/API/Storage_Access_API).
+
+> **Note:** Usage of this feature may be blocked by a {{httpheader("Permissions-Policy/storage-access", "storage-access")}} [Permissions Policy](/en-US/docs/Web/HTTP/Permissions_Policy) set on your server. In addition, the document must pass additional browser-specific checks such as allowlists, blocklists, on-device classification, user settings, anti-[clickjacking](/en-US/docs/Glossary/Clickjacking) heuristics, or prompting the user for explicit permission.
 
 ## Syntax
 
@@ -24,12 +26,23 @@ None.
 
 ### Return value
 
-A {{jsxref("Promise")}} that fulfills with `undefined` if the access to first-party storage was granted, and rejects if access was denied.
+A {{jsxref("Promise")}} that fulfills with `undefined` if the access to unpartitioned cookies was granted, and rejects if access was denied.
+
+`requestStorageAccess()` requests are automatically denied unless the embedded content is currently processing a user gesture such as a tap or click ({{Glossary("transient activation")}}), or unless permission was already granted previously. If permission was not previously granted, they need to be run inside a user gesture-based event handler. The user gesture behavior depends on the state of the promise:
+
+- If the promise resolves (i.e. if permission was granted), then the user gesture has not been consumed, so the script can subsequently call APIs that require a user gesture.
+- If the promise rejects (i.e. permission was not granted), then the user gesture has been consumed, so the script can't do anything that requires a gesture. This is intentional protection against abuse — it prevents scripts from calling `requestStorageAccess()` in a loop until the user accepts the prompt.
 
-When the promise gets resolved, the resolve handler will run as if a user gesture is being processed, whether the promise was fulfilled or rejected:
+### Exceptions
 
-- In the former case, code can then start to call APIs that require user activation and things can move forward.
-- In the latter case, code can run to inform the user of why the request failed and what they can do to continue (for example asking them to log in, if that is a requirement).
+- `InvalidStateError` {{domxref("DOMException")}}
+  - : Thrown if the current {{domxref("Document")}} is not yet active.
+- `NotAllowedError` {{domxref("DOMException")}}
+  - : Thrown if:
+    - The document's window is not a [secure context](/en-US/docs/Web/Security/Secure_Contexts).
+    - Usage is blocked by a {{httpheader("Permissions-Policy/storage-access", "storage-access")}} [Permissions Policy](/en-US/docs/Web/HTTP/Permissions_Policy).
+    - The document or the top-level document has a `null` origin.
+    - The embedding {{htmlelement("iframe")}} is sandboxed, and the `allow-storage-access-by-user-activation` token is not set.
 
 ## Examples
 
@@ -44,15 +57,7 @@ document.requestStorageAccess().then(
 );
 ```
 
-## Security
-
-Access to cross-site cookies is granted to iframes based on a number of prerequisites:
-
-1. The browser must be processing a user gesture ({{Glossary("transient activation")}}).
-2. The document or the top-level document must not have a null origin.
-3. The document's window must be a [secure context](/en-US/docs/Web/Security/Secure_Contexts).
-4. If the document is sandboxed, it must have the `allow-storage-access-by-user-activation` token.
-5. The document must pass additional browser-specific checks. Examples: allowlists, blocklists, on-device classification, user settings, anti-[clickjacking](/en-US/docs/Glossary/Clickjacking) heuristics, or prompting the user for explicit permission.
+> **Note:** See [Using the Storage Access API](/en-US/docs/Web/API/Storage_Access_API/Using) for a more complete example.
 
 ## Specifications
 
diff --git a/files/en-us/web/api/storage_access_api/index.md b/files/en-us/web/api/storage_access_api/index.md
index c8b7d84ef5ad811..05e2ec6ad01586a 100644
--- a/files/en-us/web/api/storage_access_api/index.md
+++ b/files/en-us/web/api/storage_access_api/index.md
@@ -9,67 +9,109 @@ browser-compat:
 
 {{DefaultAPISidebar("Storage Access API")}}
 
-The Storage Access API provides a way for embedded, cross-origin content to gain unrestricted access to storage that it would normally only have access to in a first-party context (we refer to this as an origin's _first-party_ storage).
+The Storage Access API provides a way for cross-site content loaded in a third-party context (i.e. embedded in an {{htmlelement("iframe")}}) to gain access to _unpartitioned cookies_ that it would normally only have access to in a first-party context (i.e. when loaded directly in a browser tab).
 
-The API provides methods that allow embedded resources to check whether they currently have access to their first-party storage, and to request access to their first-party storage from the user agent.
+> **Note:** When we say _unpartitioned cookies_, we are talking about cookies stored in the traditional way they have historically been stored since the early web — all cookies set on the same site are stored in the same cookie jar. This is in contrast to _partitioned cookies_, where embedded resources under each top-level origin are given a unique cookie storage space (see for example [Cookies Having Independent Partitioned State (CHIPS)](/en-US/docs/Web/Privacy/Partitioned_cookies)).
+
+The Storage Access API is relevant to user agents that by default block access to unpartitioned cookies by sites loaded in a third-party context to improve privacy (for example, to prevent tracking). There are legitimate uses for unpartitioned cookie access by third-party content that we still want to enable, even with these default restrictions in place. Examples include SSO with federated IdPs, or persisting user details such as location data or viewing preferences across different sites.
+
+The API provides methods that allow embedded resources to check whether they currently have access to unpartitioned cookies and, if not, to request access from the user agent.
+
+> **Note:** The _Storage Access API_ name may seem like somewhat of a misnomer, given that it only provides access to cookies, and not other client-side storage mechanisms such as {{domxref("Web_Storage_API", "Web Storage", "", "nocode")}} or {{domxref("IndexedDB_API", "IndexedDB", "", "nocode")}}. The name has been kept generic because it may provide access to other forms of client-side storage in the future.
 
 ## Concepts and usage
 
-Most browsers implement a number of storage access policies that restrict access to cookies and site data for embedded, cross-origin resources. These restrictions range from giving embedded resources under each top-level origin a unique storage space to outright blocking of storage access when resources are loaded in a third-party context.
+Browsers implement several storage access features and policies that restrict access to unpartitioned cookies by embedded, cross-site resources. These range from giving embedded resources under each top-level origin a unique cookie storage space (_partitioned cookies_), to outright blocking of cookie access when resources are loaded in a third-party context.
+
+The semantics around unpartitioned cookie blocking features/policies differ from browser to browser, but the core functionality is similar: cross-site resources embedded in a third-party context are not given access to the same cookies that they would have access to when loaded in a first-party context. This is done with good intent — browser vendors want to take steps to better protect their user's privacy and security, for example leaving them less open to having their activity tracked across different sites, and less vulnerable to exploits such as cross-site request forgery ({{glossary("CSRF")}}).
+
+However, there are legitimate uses for embedded cross-site content accessing unpartitioned cookies, which the above features/policies are known to break. As an example, federated logins often require access to authentication cookies, and will require the user to sign in on each site separately (or completely break) if those cookies are not available. As a result, site owners often encourage users to add their site as an exception or to disable such policies entirely. Users who wish to continue to interact with embedded content are forced to greatly relax their blocking policy for resources loaded from all embedded origins and possibly across all websites.
+
+The Storage Access API is intended to solve this problem; embedded cross-site content can request unrestricted access to unpartitioned cookies on a frame-by-frame basis, for a particular top-level embedding site, via the {{domxref("Document.requestStorageAccess()")}} method. It can also check whether it already has access via the {{domxref("Document.hasStorageAccess()")}} method.
 
-The semantics around third-party cookie blocking policies in particular differ from browser to browser, but the core functionality is similar: cross-origin resources embedded in a third-party context are not given access to the same cookies and site storage that they would have access to when loaded in a first-party context.
+## How it works
 
-These cookie blocking policies are known to break embedded cross-origin content that requires access to its first-party storage. As an example, federated logins often require access to authentication cookies stored in first-party storage, and will require the user to sign in on each site separately (or completely break) if those cookies are not available. In the case of breakage, site owners have often encouraged users to add their site as an exception or to disable the policy entirely. As a consequence, users who wish to continue to interact with embedded content are forced to greatly relax their blocking policy for resources loaded from all embedded origins and possibly across all websites.
+As explained above, modern browsers implement various features and policies to restrict or block access to unpartitioned cookies by embedded content. Such content that has a legitimate need for cookie access can get around this problem using the Storage Access API as follows:
 
-The Storage Access API is intended to solve this problem; embedded cross-origin content can request unrestricted access to its first-party storage on a site-by-site basis via the {{domxref("Document.requestStorageAccess()")}} method, and check whether it already has access via the {{domxref("Document.hasStorageAccess()")}} method.
+1. It can call the {{domxref("Document.hasStorageAccess()")}} method to check whether it has the access it needs already.
+2. If not, it can request access via the {{domxref("Document.requestStorageAccess()")}} method.
+3. Depending on the browser, the user will be asked whether to grant access to the requesting embed in slightly different ways.
+   - Safari shows prompts for all embedded content that has not previously received storage access.
+   - Firefox only prompts users after an origin has requested storage access on more than a threshold number of sites.
+   - At the time of writing, Chrome doesn't prompt the user. Instead, it only resolves `requestStorageAccess()` calls that come from domains within a [first-party set](https://developer.chrome.com/docs/privacy-sandbox/first-party-sets/). This behavior will change as the implementation is developed further.
+4. Access is granted or denied based on whether the content meets all the security requirements (see [Security measures](#security_measures), below). The {{jsxref("Promise")}}-based nature of `requestStorageAccess()` allows you to run code to handle success and failure cases.
+   - Modern spec behavior dictates that access is granted **per-frame** — every separate content embed has its unpartitioned cookie access blocked by default, and needs to call `requestStorageAccess()` to opt-in to access. If a content embed has received access, and same-site embeds then call `requestStorageAccess()`, their promises will fulfill automatically. But they still need to opt-in.
+   - In older versions of the spec, the access was **per-page**. As soon as one embed received unpartitioned cookie access via `requestStorageAccess()`, all other same-site embeds would automatically receive access. This was not desirable behavior from a security standpoint — for example, if `shop.example.com` embedded `locator.users.com` to allow users to use their location info while shopping, and `locator.users.com` called `requestStorageAccess()`, `shop.example.com` and any other sites it embeds would be able to access its cookies, but also access cookies from `private.users.com`, which is not intended to be embedded. [Read more about the motivations](https://github.com/privacycg/storage-access/issues/113) behind this change.
+   - Consult the [Browser compatibility information](#browser_compatibility) to see which browsers implement which behavior.
+5. Once access is granted, a permission key is stored in the browser with the structure ``. For example, if the embedding site is `embedder.com`, and the embed is `locator.example.com`, the key would be ``. Same-site embeds (`docs.example.com`, `profile.example.com`, etc.) would then be able to call `requestStorageAccess()` and the promise would fulfill automatically, as mentioned earlier.
+   - Older versions of the spec used the more specific permission key structure ``, which meant that same-site, cross-origin embeds didn't match the permission key and had to go through the whole process separately.
+   - At the time of writing, only Chromium browsers had implemented the new behavior.
 
-In addition, sandboxed {{htmlelement("iframe")}}s cannot be granted storage access by default for security reasons. The API therefore also adds the `allow-storage-access-by-user-activation` [sandbox token](/en-US/docs/Web/HTML/Element/iframe#sandbox). The embedding website needs to add this to allow storage access requests to be successful, along with `allow-scripts` and `allow-same-origin` to allow it to call the API, and execute in an origin that can have cookies:
+> **Note:** The only exception to the "blocked by default" behavior is when a content embed makes a successful `requestStorageAccess()`, but then performs a same-origin navigation (for example reloading itself). In such cases, the storage access is carried over from the previous navigation.
 
-```html
-
-```
+> **Note:** In cases where a top-level site has its cookies partitioned (for example via [CHIPS](/en-US/docs/Web/Privacy/Partitioned_cookies) or [Total Cookie Protection](https://blog.mozilla.org/en/mozilla/firefox-androids-new-privacy-feature-total-cookie-protection-stops-companies-from-keeping-tabs-on-your-moves/)), the Storage Access API isn't required, as sharing the cookies by default has no privacy risk.
 
-The API is designed to limit the potential storage exceptions to origins for which the user has shown an intent to interact. This is enforced through the following constraints:
+## Security measures
 
-- Access requests are automatically denied unless the embedded content is currently processing a user gesture such as a tap or click. This also prevents embedded content on the page from spamming the browser or user with excessive access requests.
-- Origins that have never been interacted with as a first party do not have a notion of first-party storage. From the user's perspective, they only have a third-party relationship with that origin. Access requests are automatically denied if the browser detects that the user hasn't interacted with the embedded content in a first-party context recently (in Firefox, "recently" is "within 30 days").
+Several different security measures could cause a {{domxref("Document.requestStorageAccess()")}} call to fail. Check the below list if you are having trouble getting a request to work:
 
-The browser may decide to involve the user in the decision of whether to grant an incoming storage access request. Specifics regarding the lifetime of a storage grant and the circumstances under which the browser may decide to inform the user are currently being worked through and will be announced once ready.
+1. The call must be associated with a user gesture ({{Glossary("transient activation")}}) such as a tap or click. This prevents embedded content on the page from spamming the browser or user with excessive access requests. Note that this isn't required if:
+   - Permission to use the API has already been granted, for example by another same-site resource calling `requestStorageAccess()`.
+   - The caller is a top-level document or same-site to the top-level document. In such cases, `requestStorageAccess()` probably doesn't need to be called at all.
+2. The document and top-level document must not have a `null` origin.
+3. Origins that have never been interacted with as a first party do not have a notion of first-party storage. From the user's perspective, they only have a third-party relationship with that origin. Access requests are automatically denied if the browser detects that the user hasn't interacted with the embedded content in a first-party context recently (in Firefox, "recently" means within 30 days).
+4. The document's window must be a [secure context](/en-US/docs/Web/Security/Secure_Contexts).
+5. Sandboxed {{htmlelement("iframe")}}s cannot be granted storage access by default for security reasons. The API therefore also adds the `allow-storage-access-by-user-activation` [sandbox token](/en-US/docs/Web/HTML/Element/iframe#sandbox). The embedding website needs to add this to allow storage access requests to be successful, along with `allow-scripts` and `allow-same-origin` to allow it to execute a script to call the API and execute it in an origin that can have cookies:
 
-## User prompts
+   ```html
+   
+   ```
 
-When `requestStorageAccess()` is called by an embedded, cross-origin document, the user agent may choose to involve the user in the decision of whether to grant storage access to the requesting origin. Prompting heuristics currently vary across the two implementers of the Storage Access API — Safari shows prompts for all embedded tracking content that has not previously received storage access, while Firefox only prompts users after a tracking origin has requested storage access on more than a threshold number of sites. See {{domxref("Document.requestStorageAccess()")}} for more details.
+6. Usage of this feature may be blocked by a {{httpheader("Permissions-Policy/storage-access", "storage-access")}} [Permissions Policy](/en-US/docs/Web/HTTP/Permissions_Policy) set on your server.
+7. At the time of writing, Chrome only resolves `requestStorageAccess()` calls that come from domains within a [first-party set](https://developer.chrome.com/docs/privacy-sandbox/first-party-sets/). This restriction is intended to be relaxed as the implementation is developed further.
 
-## Safari implementation differences
+> **Note:** The document may also be required to pass additional browser-specific checks. Examples: allowlists, blocklists, on-device classification, user settings, anti-[clickjacking](/en-US/docs/Glossary/Clickjacking) heuristics, or prompting the user for explicit permission.
 
-Although the API surface is the same, websites using the Storage Access API should expect differences in the level and extent of storage access they receive between Firefox and Safari. This is caused by differences in the storage access policies implemented in the two browsers. Design properties unique to Firefox are summarized here:
+## Browser storage access policy variations
 
-- If the embedded origin `tracker.example` has already obtained first-party storage access on the top-level origin `foo.example`, and the user visits a page from `foo.example` embedding a page from `tracker.example` again in less than 30 days, the embedded origin will have storage access immediately when loading.
-- If an embedded page from `tracker.example` has previously successfully obtained storage access on top-level origin `foo.example`, all embedded subresources from `tracker.example` on `foo.example` (e.g. scripts, images, stylesheets, etc.) will load with access to their first-party storage, which means they may send Cookie headers and honor incoming {{httpheader("Set-Cookie")}} headers.
-- In Firefox, when the promise returned from `requestStorageAccess()` is resolved, the embedded page will gain access to its entire first-party storage, not just cookies. This includes access to APIs such as [Web Storage](/en-US/docs/Web/API/Web_Storage_API), [IndexedDB](/en-US/docs/Web/API/IndexedDB_API), [DOM Cache](/en-US/docs/Web/API/Cache), and so on.
-- In Firefox, the storage access grants are phased out after 30 calendar days passing, whereas in Safari the storage access grants are phased out after 30 days of browser usage passed without user interaction. This is currently a limitation of the Firefox implementation, which we may address in a future version. In Safari, successful use of the storage access API resets this counter.
+Although the API surface is the same, websites using the Storage Access API should expect differences in the level and extent of unpartitioned cookie access they receive between different browsers, due to differences in their storage access policies.
+
+### Firefox
+
+Design properties unique to Firefox are summarized here:
+
+- If the embedded origin `tracker.example` has already obtained unpartitioned cookie access on the top-level origin `foo.example`, and the user visits a page from `foo.example` embedding a page from `tracker.example` again in less than 30 days, the embedded origin will have unpartitioned cookie access immediately when loading.
+- If an embedded page from `tracker.example` has previously successfully obtained unpartitioned cookie access on top-level origin `foo.example`, all embedded subresources from `tracker.example` on `foo.example` (e.g. scripts, images, stylesheets, etc.) will load with access to their cookies, which means they may send Cookie headers and honor incoming {{httpheader("Set-Cookie")}} headers.
+- In Firefox, when the promise returned from `requestStorageAccess()` is resolved, the embedded page will gain access to its entire first-party storage, not just unpartitioned cookies. This includes access to APIs such as [Web Storage](/en-US/docs/Web/API/Web_Storage_API), [IndexedDB](/en-US/docs/Web/API/IndexedDB_API), [DOM Cache](/en-US/docs/Web/API/Cache), and so on.
+- The storage access grants are phased out after 30 calendar days have passed.
 
 Documentation for Firefox's new storage access policy for blocking tracking cookies includes [a detailed description](/en-US/docs/Web/Privacy/Storage_Access_Policy#storage_access_grants) of the scope of storage access grants.
 
-## Storage Access API methods
+### Safari
+
+- The storage access grants are phased out after 30 days of browser usage passed without user interaction. Successful use of the Storage Access API resets this counter.
+
+## Examples
+
+See [Using the Storage Access API](/en-US/docs/Web/API/Storage_Access_API/Using) for an implementation guide with code examples.
 
-The storage API methods are implemented on the {{domxref("Document")}} interface:
+## API methods
 
 - {{domxref("Document.hasStorageAccess()")}}
-  - : Returns a {{jsxref("Promise")}} that resolves with a boolean value indicating whether the document has access to its first-party storage.
+  - : Returns a {{jsxref("Promise")}} that resolves with a boolean value indicating whether the document has access to unpartitioned cookies.
 - {{domxref("Document.requestStorageAccess()")}}
-  - : Returns a {{jsxref("Promise")}} that resolves if the access to first-party storage was granted, and rejects if access was denied.
+  - : Returns a {{jsxref("Promise")}} that resolves if the access to unpartitioned cookies was granted, and rejects if access was denied.
 
-> **Note:** User interaction propagates to the Promise returned by both of these methods, allowing the callers to take actions that require user interaction without requiring a second click from the user. For example, a caller could open a pop-up window from the resolved Promise without triggering Firefox's pop-up blocker.
+> **Note:** User interaction propagates to the promise returned by both of these methods, allowing the callers to take actions that require user interaction without requiring a second click from the user. For example, a caller could open a pop-up window from the resolved promise without triggering Firefox's pop-up blocker.
 
-## Extensions to \
 ```
 
-Now on to the code executed inside the embedded document. Since it does not know whether it currently has access to storage, it should first call {{domxref("Document.hasStorageAccess()")}}. If that call returns `false`, we can then call {{domxref("Document.requestStorageAccess()")}}, returning the result so that then we can chain it onto the previous promise call. In the final `then`, we'll have first-party storage access.
+## Checking and requesting storage access
+
+Now on to the code executed inside the embedded document. In this code:
+
+1. We first use feature detection (`if (document.hasStorageAccess === null) {}`) to check whether the API is supported. If not, we run our code that accesses cookies anyway, and hope that it works. It should be coded defensively to deal with such eventualities anyway.
+2. If the API is supported, we call `document.hasStorageAccess()`.
+   3. If that call returns `true`, it means this {{htmlelement("iframe")}} has already obtained access, and we can run our code that accesses cookies right away.
+   4. If that call returns `false`, we then call {{domxref("Permissions.query()")}} to check whether permission to access unpartitioned cookies has already been granted (i.e. to another same-site embed).
+      5. If the permission state is `"granted"`, we immediately call `document.requestStorageAccess()`. This call will automatically resolve, saving the user some time, then we can run our code that accesses cookies.
+      6. If the permission state is `"prompt"`, we call `document.requestStorageAccess()` after user interaction. This call may trigger a prompt to the user. If this call resolves, then we can run our code that accesses cookies.
+      7. If the permission state is `"denied"`, the user has denied our requests to access unpartitioned cookies, and our code cannot make use of them.
 
 ```js
-function doThingsWithFirstPartyStorageAccess() {
-  // Let's access some items from the first-party cookie jar
+function doThingsWithCookies() {
   document.cookie = "foo=bar"; // set a cookie
-  localStorage.setItem("username", "John"); // access a localStorage entry
 }
 
-if (document.hasStorageAccess == null) {
-  // This browser doesn't support the Storage Access API, so let's just hope we have access!
-  doThingsWithFirstPartyStorageAccess();
-} else {
-  document.hasStorageAccess().then((hasAccess) => {
+async function handleCookieAccess() {
+  if (document.hasStorageAccess === null) {
+    // This browser doesn't support the Storage Access API
+    // so let's just hope we have access!
+    doThingsWithCookies();
+  } else {
+    const hasAccess = await document.hasStorageAccess();
     if (hasAccess) {
-      // We already have access, so let's do things right away!
-      doThingsWithFirstPartyStorageAccess();
+      // We have access to unpartitioned cookies, so let's go
+      doThingsWithCookies();
     } else {
-      // As we don't have access, we need to request it. This request has to happen within
-      // an event handler for a user interaction (e.g., clicking)
-      btn.addEventListener("click", () => {
-        document
-          .requestStorageAccess()
-          .then(() => {
-            doThingsWithFirstPartyStorageAccess();
-          })
-          .catch((err) => {
+      // Check whether unpartitioned cookie access has been granted
+      // to another same-site embed
+      const permission = await navigator.permissions.query({ name: "storage-access" });
+
+      if (permission.state === "granted") {
+        // If so, you can just call requestStorageAccess() without a user interaction,
+        // and it will resolve automatically.
+        await document.requestStorageAccess();
+        doThingsWithCookies();
+      } else if (permission.state === "prompt") {
+        // Need to call requestStorageAccess() after a user interaction
+        btn.addEventListener("click", async () => {
+          try {
+            await document.requestStorageAccess();
+            doThingsWithCookies();
+          } catch(err) {
             // If there is an error obtaining storage access.
-            console.error("Error obtaining storage access", err);
-          });
-      });
+            console.error(`Error obtaining storage access: ${err}.
+                          Please sign in.`);
+          };
+        });
+      } else if (permission.state === "denied") {
+        // User has denied unpartitioned cookie access, so we'll
+        // need to do something else
+      }
     }
-  });
+  }
 }
 ```
 
-Note that access requests are automatically denied unless the embedded content is currently processing a user gesture such as a tap or click — so this code needs to be run inside some kind of user gesture-based event handler, for example:
-
-```js
-btn.addEventListener("click", () => {
-  // run code here
-});
-```
+> **Note:** `requestStorageAccess()` requests are automatically denied unless the embedded content is currently processing a user gesture such as a tap or click ({{Glossary("transient activation")}}), or if permission was already granted previously. If permission was not previously granted, they need to be run inside some kind of user gesture-based event handler, as shown above.
diff --git a/files/en-us/web/html/element/iframe/index.md b/files/en-us/web/html/element/iframe/index.md
index 2712c4e1fe91a81..4926a9de4cf7437 100644
--- a/files/en-us/web/html/element/iframe/index.md
+++ b/files/en-us/web/html/element/iframe/index.md
@@ -71,7 +71,7 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib
 
 - `sandbox`
 
-  - : Applies extra restrictions to the content in the frame. The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions:
+  - : Controls the restrictions applied to the content embedded in the `
    ```
 
diff --git a/files/en-us/web/api/storage_access_api/using/index.md b/files/en-us/web/api/storage_access_api/using/index.md
index f1161ae55bff796..bf0d21a3262dff8 100644
--- a/files/en-us/web/api/storage_access_api/using/index.md
+++ b/files/en-us/web/api/storage_access_api/using/index.md
@@ -19,7 +19,8 @@ In the example below, we show how an embedded cross-site {{htmlelement("iframe")
 First of all, if the `