[pull] main from mdn:main

.vscode/dictionaries/cultural-words.txt

@@ -70,6 +70,7 @@ Rohingya
 Romaji
 Saurashtra
 Sharada
+shippo
 Sinhala
 Sora_Sompeng
 Sunuwar

.vscode/dictionaries/proper-names.txt

@@ -65,6 +65,7 @@ Bodmin
 Boonie
 bottosson
 Boulton
+Bramus
 Brians
 Browserleaks
 Browsershots
@@ -255,6 +256,7 @@ Holzman
 Honigswald
 Hoshi
 Hoth
+Houseology
 Hyperaudio
 Hönigswald
 Ibuki
@@ -322,6 +324,7 @@ Kobabe
 Koen
 Kokoro
 Konva
+Kravets
 Kyouko
 Kütük
 Laravel

.vscode/dictionaries/terms-abbreviations.txt

@@ -63,6 +63,7 @@ Bignums
 bikeshedding
 bilevel
 bioinformatics
+biscotti
 bitfield
 bitmapped
 bitness
@@ -369,6 +370,7 @@ linkify
 livemark
 livemarks
 livestreamed
+lockdown
 lofi
 logpoints
 longhands
@@ -890,6 +892,7 @@ untriaged
 unzoomed
 uppercasing
 userbase
+Uyghur
 VDOM
 Velociraptor
 versor

files/en-us/glossary/origin/index.md

@@ -21,7 +21,7 @@ Common cases where opaque origins are used include:
 
 - A document within an iframe that has the [sandbox](/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/sandbox) attribute set, and does not include the `allow-same-origin` flag.
 - `file:` URLs are usually treated as opaque origins so that files on they file system cannot read each other.
-- Documents created programatically using APIs like {{domxref("DOMImplementation.createDocument()")}}.
+- Documents created programmatically using APIs like {{domxref("DOMImplementation.createDocument()")}}.
 
 ## Examples
 

files/en-us/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md

@@ -489,7 +489,7 @@ body {
   display: block;
   font-family: "Arial", sans-serif;
   font-size: 1.6rem;
-  font-weight: 400;
+  font-weight: normal;
   line-height: 1.25;
   min-height: 44px;
   padding-left: 40px;

files/en-us/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md

@@ -632,7 +632,7 @@ body {
   box-sizing: border-box;
   font-family: "Arial", sans-serif;
   -webkit-font-smoothing: antialiased;
-  font-weight: 400;
+  font-weight: normal;
   font-size: 1.6rem;
   line-height: 1.25;
   display: block;

files/en-us/learn_web_development/core/scripting/event_bubbling/index.md

@@ -303,7 +303,8 @@ By default almost all event handlers are registered in the bubbling phase, and t
 
 In the last section, we looked at a problem caused by event bubbling and how to fix it. Event bubbling isn't just annoying, though: it can be very useful. In particular, it enables **event delegation**. In this practice, when we want some code to run when the user interacts with any one of a large number of child elements, we set the event listener on their parent and have events that happen on them bubble up to their parent rather than having to set the event listener on every child individually.
 
-Let's go back to our first example, where we set the background color of the whole page when the user clicked a button. Suppose that instead, the page is divided into 16 tiles, and we want to set each tile to a random color when the user clicks that tile.
+Let's go back to our [first example](/en-US/docs/Learn_web_development/Core/Scripting/Events#an_example_handling_a_click_event),
+where we set the background color of the whole page when the user clicked a button. Suppose that instead, the page is divided into 16 tiles, and we want to set each tile to a random color when the user clicks that tile.
 
 Here's the HTML:
 

files/en-us/learn_web_development/core/scripting/silly_story_generator/index.md

@@ -71,7 +71,7 @@ p {
 ```
 
 ```js live-sample___silly-story-start
-// Complete variable definitions and random functio
+// Complete variable definitions and random functions
 
 const customName = document.getElementById("custom-name");
 const generateBtn = document.querySelector(".generate");

files/en-us/mdn/writing_guidelines/code_style_guide/index.md

@@ -36,6 +36,11 @@ Some more general guidelines include:
 - Don't use deprecated features for brevity (such as presentation elements like {{HTMLElement("big")}} or {{domxref("Document.write", "document.write()")}}); do it correctly.
 - In the case of API demos, if you are using multiple APIs together, point out which APIs are included and which features come from where.
 
+### Browser support
+
+When creating code examples for a technology that's not yet available in all major browsers, consider using [feature detection](/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection) to fall back to a simpler behavior or inform the user that their browser is not yet supported.
+Do not specify supported browsers and their versions in code comments or prose, as this information quickly becomes outdated.
+
 ## MDN code style and formatting
 
 Opinions on correct indentation, whitespace, and line lengths have always been controversial. Discussions on these topics are a distraction from creating and maintaining content.

files/en-us/mdn/writing_guidelines/howto/markdown_in_mdn/index.md

@@ -20,21 +20,27 @@ The GFM specification defines two basic types of links:
 - [inline links](https://github.github.com/gfm/#inline-link), in which the destination is given immediately after the link text.
 - [reference links](https://github.github.com/gfm/#reference-link), in which the destination is defined elsewhere in the document.
 
-On MDN we allow only inline links.
-This is the correct way to write GFM links on MDN:
+On MDN we prefer to use inline links because they are easier to read and maintain without loosing context. This is the preferred way to write links on MDN:
 
-```md example-good
+```md
 [Macarons](https://en.wikipedia.org/wiki/Macaron) are delicious but tricky to make.
 ```
 
-This is an incorrect way to write links on MDN:
+In certain situations, however, reference links are more appropriate for their compactness.
+For example, shrinking wide tables can make them easier to review and edit.
 
-```md example-bad
-[Macarons][macaron] are delicious but tricky to make.
+```md
+| Name                 | Features                                                                                         |
+| -------------------- | ------------------------------------------------------------------------------------------------ |
+| [Macarons][macarons] | Delicious but tricky to make. Add more class to a tea party than almost any other confectionary. |
+| [Biscotti][biscotti] | Crisp and easier to make.                                                                        |
 
-[macaron]: https://en.wikipedia.org/wiki/Macaron
+[macarons]: https://en.wikipedia.org/wiki/Macaron
+[biscotti]: https://en.wikipedia.org/wiki/Biscotti
 ```
 
+In rare cases when it's necessary to use reference links, please make sure they immediately follow the context where they are used.
+
 ## Example code blocks
 
 In GFM and CommonMark, authors can use "code fences" to demarcate `<pre>` blocks. The opening code fence may be followed by some text that is called the "info string". The language of the code sample must be specified using the first word of the info string, and this will be used to provide syntax highlighting for the block. The following words are supported:

files/en-us/web/api/cssfunctiondeclarations/index.md

@@ -2,10 +2,12 @@
 title: CSSFunctionDeclarations
 slug: Web/API/CSSFunctionDeclarations
 page-type: web-api-interface
+status:
+  - experimental
 browser-compat: api.CSSFunctionDeclarations
 ---
 
-{{ APIRef("CSSOM") }}
+{{ APIRef("CSSOM") }}{{SeeCompatTable}}
 
 The **`CSSFunctionDeclarations`** interface of the [CSS Object Model](/en-US/docs/Web/API/CSS_Object_Model) represents a consecutive run of CSS declarations included within a {{cssxref("@function")}} body.
 
@@ -17,7 +19,7 @@ This can include [CSS custom properties](/en-US/docs/Web/CSS/CSS_cascading_varia
 
 _This interface also inherits properties from {{domxref("CSSRule")}}._
 
-- {{domxref("CSSFunctionDeclarations.style")}} {{ReadOnlyInline}}
+- {{domxref("CSSFunctionDeclarations.style")}} {{ReadOnlyInline}} {{experimental_inline}}
   - : Returns a {{domxref("CSSFunctionDescriptors")}} object representing the descriptors available in a {{cssxref("@function")}} body.
 
 ## Examples

files/en-us/web/api/cssfunctiondeclarations/style/index.md

@@ -3,10 +3,12 @@ title: "CSSFunctionDeclarations: style property"
 short-title: style
 slug: Web/API/CSSFunctionDeclarations/style
 page-type: web-api-instance-property
+status:
+  - experimental
 browser-compat: api.CSSFunctionDeclarations.style
 ---
 
-{{ APIRef("CSSOM") }}
+{{ APIRef("CSSOM") }}{{SeeCompatTable}}
 
 The **`style`** property of the {{domxref("CSSFunctionDeclarations")}} interface returns a {{domxref("CSSFunctionDescriptors")}} object representing the descriptors available in a {{cssxref("@function")}} body.
 

files/en-us/web/api/cssfunctiondescriptors/index.md

@@ -2,10 +2,12 @@
 title: CSSFunctionDescriptors
 slug: Web/API/CSSFunctionDescriptors
 page-type: web-api-interface
+status:
+  - experimental
 browser-compat: api.CSSFunctionDescriptors
 ---
 
-{{ APIRef("CSSOM") }}
+{{ APIRef("CSSOM") }}{{SeeCompatTable}}
 
 The **`CSSFunctionDescriptors`** interface of the [CSS Object Model](/en-US/docs/Web/API/CSS_Object_Model) represents the descriptors contained within a set of CSS declarations represented by a {{domxref("CSSFunctionDeclarations")}} object.
 
@@ -17,7 +19,7 @@ A `CSSFunctionDescriptors` object is accessed via the {{domxref("CSSFunctionDecl
 
 _This interface also inherits properties from {{domxref("CSSRule")}}._
 
-- {{domxref("CSSFunctionDescriptors.result")}} {{ReadOnlyInline}}
+- {{domxref("CSSFunctionDescriptors.result")}} {{ReadOnlyInline}} {{experimental_inline}}
   - : Returns a string representing a `result` descriptor, if one exists in the associated set of declarations.
 
 ## Examples

files/en-us/web/api/cssfunctiondescriptors/result/index.md

@@ -3,10 +3,12 @@ title: "CSSFunctionDescriptors: result property"
 short-title: result
 slug: Web/API/CSSFunctionDescriptors/result
 page-type: web-api-instance-property
+status:
+  - experimental
 browser-compat: api.CSSFunctionDescriptors.result
 ---
 
-{{ APIRef("CSSOM") }}
+{{ APIRef("CSSOM") }}{{SeeCompatTable}}
 
 The **`result`** property of the {{domxref("CSSFunctionDescriptors")}} interface returns a string representing a `result` descriptor, if one exists in the associated set of declarations.
 

files/en-us/web/api/cssfunctionrule/getparameters/index.md

@@ -3,10 +3,12 @@ title: "CSSFunctionRule: getParameters() method"
 short-title: getParameters()
 slug: Web/API/CSSFunctionRule/getParameters
 page-type: web-api-instance-method
+status:
+  - experimental
 browser-compat: api.CSSFunctionRule.getParameters
 ---
 
-{{ APIRef("CSSOM") }}
+{{ APIRef("CSSOM") }}{{SeeCompatTable}}
 
 The **`getParameters()`** method of the {{domxref("CSSFunctionRule")}} interface returns an array of objects representing the custom function's parameters.
 

files/en-us/web/api/cssfunctionrule/index.md

@@ -2,10 +2,12 @@
 title: CSSFunctionRule
 slug: Web/API/CSSFunctionRule
 page-type: web-api-interface
+status:
+  - experimental
 browser-compat: api.CSSFunctionRule
 ---
 
-{{ APIRef("CSSOM") }}
+{{ APIRef("CSSOM") }}{{SeeCompatTable}}
 
 The **`CSSFunctionRule`** interface of the [CSS Object Model](/en-US/docs/Web/API/CSS_Object_Model) represents CSS {{cssxref("@function")}} (custom function) [at-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule).
 
@@ -15,16 +17,16 @@ The **`CSSFunctionRule`** interface of the [CSS Object Model](/en-US/docs/Web/AP
 
 _This interface also inherits properties from {{domxref("CSSGroupingRule")}}._
 
-- {{domxref("CSSFunctionRule.name")}} {{ReadOnlyInline}}
+- {{domxref("CSSFunctionRule.name")}} {{ReadOnlyInline}} {{experimental_inline}}
   - : Returns a string representing the custom function's name.
-- {{domxref("CSSFunctionRule.returnType")}} {{ReadOnlyInline}}
+- {{domxref("CSSFunctionRule.returnType")}} {{ReadOnlyInline}} {{experimental_inline}}
   - : Returns a string representing the custom function's return type.
 
 ## Instance methods
 
 _This interface also inherits methods from {{domxref("CSSGroupingRule")}}._
 
-- {{domxref("CSSFunctionRule.getParameters()")}}
+- {{domxref("CSSFunctionRule.getParameters()")}} {{experimental_inline}}
   - : Returns an array of objects representing the custom function's parameters.
 
 ## Examples

files/en-us/web/api/cssfunctionrule/name/index.md

@@ -3,10 +3,12 @@ title: "CSSFunctionRule: name property"
 short-title: name
 slug: Web/API/CSSFunctionRule/name
 page-type: web-api-instance-property
+status:
+  - experimental
 browser-compat: api.CSSFunctionRule.name
 ---
 
-{{ APIRef("CSSOM") }}
+{{ APIRef("CSSOM") }}{{SeeCompatTable}}
 
 The **`name`** property of the {{domxref("CSSFunctionRule")}} interface returns a string representing the custom function's name.
 

files/en-us/web/api/cssfunctionrule/returntype/index.md

@@ -3,10 +3,12 @@ title: "CSSFunctionRule: returnType property"
 short-title: returnType
 slug: Web/API/CSSFunctionRule/returnType
 page-type: web-api-instance-property
+status:
+  - experimental
 browser-compat: api.CSSFunctionRule.returnType
 ---
 
-{{ APIRef("CSSOM") }}
+{{ APIRef("CSSOM") }}{{SeeCompatTable}}
 
 The **`returnType`** property of the {{domxref("CSSFunctionRule")}} interface returns a string representing the custom function's return type.
 

files/en-us/web/api/domparser/parsefromstring/index.md

@@ -63,7 +63,7 @@ This `Document` contains a complete in-memory DOM that is separate from the main
 
 If the `mimeType` is `text/html` the input is parsed as HTML and {{htmlelement("script")}} elements are marked as non-executable, events are not fired, and event handlers aren't called to run inline scripts.
 While the document can download resources specified in {{htmlelement("iframe")}} and {{htmlelement("img")}} elements, it is essentially inert.
-This is ueful because you can parse HTML inputs that include {{glossary("Shadow tree","declarative shadow roots")}}, and perform operations on the document without affecting the visible page.
+This is useful because you can parse HTML inputs that include {{glossary("Shadow tree","declarative shadow roots")}}, and perform operations on the document without affecting the visible page.
 For example, you can use this to sanitize the input tree, and inject parts of the input into the visible DOM when needed.
 
 For the other allowed values (`text/xml`, `application/xml`, `application/xhtml+xml`, and `image/svg+xml`) the input is parsed as XML.
@@ -76,7 +76,7 @@ Disallowed `mimeType` values cause a [`TypeError`](/en-US/docs/Web/JavaScript/Re
 
 This method parses its input into a separate in-memory DOM, disabling any {{htmlelement("script")}} elements and stopping event handlers from running.
 While the returned document is effectively inert, event handlers and scripts in its DOM will be able to run if they are inserted into the visible DOM.
-The method is therefore a possible vector for [Cross-site-scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, where potentially unsafe input is first parsed into a `Document` without being sanitizied, and then injected into the visible/active DOM where code is able to run.
+The method is therefore a possible vector for [Cross-site-scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, where potentially unsafe input is first parsed into a `Document` without being sanitized, and then injected into the visible/active DOM where code is able to run.
 
 You should mitigate this risk by always passing {{domxref("TrustedHTML")}} objects instead of strings, and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) using the [`require-trusted-types-for`](/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for) CSP directive.
 This ensures that the input is passed through a transformation function, which has the chance to [sanitize](/en-US/docs/Web/Security/Attacks/XSS#sanitization) the input to remove potentially dangerous markup (such as {{htmlelement("script")}} elements and event handler attributes), before it is injected.