diff --git a/.github/labeler.yml b/.github/labeler.yml index 0627f70b2cfc4f0..87dfcef8f6e546e 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -174,7 +174,7 @@ Content:Other: - files/en-us/web/exslt/** - files/en-us/web/opensearch/** - files/en-us/web/privacy/** - - files/en-us/web/text_fragments/** + - files/en-us/web/uri/** - files/en-us/web/xml/** - files/en-us/web/xpath/** - files/en-us/web/xslt/** diff --git a/.github/workflows/pr-check-lint_content.yml b/.github/workflows/pr-check-lint_content.yml index f11f450a8b97a82..6ba2a4950251e8d 100644 --- a/.github/workflows/pr-check-lint_content.yml +++ b/.github/workflows/pr-check-lint_content.yml @@ -82,7 +82,7 @@ jobs: # https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#multiline-strings EOF="$(openssl rand -hex 8)" - files_to_lint="${{ env.DIFF_DOCUMENTS }}" + files_to_lint="$DIFF_DOCUMENTS" echo "Running markdownlint --fix" MD_LINT_FAILED=false @@ -138,7 +138,7 @@ jobs: env: REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }} run: | - echo "${{ env.MD_LINT_LOG }}" | \ + echo "${MD_LINT_LOG}" | \ reviewdog \ -efm="%f:%l:%c %m" \ -efm="%f:%l %m" \ @@ -150,8 +150,8 @@ jobs: if: env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true' || env.FM_LINT_FAILED == 'true' run: | echo -e "\nLogs from markdownlint:" - echo "${{ env.MD_LINT_LOG }}" + echo "${MD_LINT_LOG}" echo -e "\nLogs from front-matter linter:" - echo "${{ env.FM_LINT_LOG }}" + echo "${FM_LINT_LOG}" echo -e "\nPlease fix all the linting issues mentioned in above logs and in the review comments." exit 1 diff --git a/.github/workflows/pr-review-companion.yml b/.github/workflows/pr-review-companion.yml index 7e24866c7bba14a..ac3ea325f57e526 100644 --- a/.github/workflows/pr-review-companion.yml +++ b/.github/workflows/pr-review-companion.yml @@ -55,7 +55,7 @@ jobs: - name: Install Python poetry if: ${{ env.HAS_ARTIFACT }} - uses: snok/install-poetry@v1.3 + uses: snok/install-poetry@v1.4 with: virtualenvs-create: true virtualenvs-in-project: true diff --git a/.github/workflows/spelling-check-bot.yml b/.github/workflows/spelling-check-bot.yml new file mode 100644 index 000000000000000..9c1fd7b8fe64ff8 --- /dev/null +++ b/.github/workflows/spelling-check-bot.yml @@ -0,0 +1,48 @@ +name: Create an issue to report typos + +on: + schedule: + - cron: "0 0 * * mon" + workflow_dispatch: + +jobs: + sync: + if: github.repository == 'mdn/content' + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v4 + + - name: Setup Node.js environment + uses: actions/setup-node@v4 + with: + node-version-file: ".nvmrc" + cache: yarn + + - name: Run scripts + run: | + npm install + echo Running spelling check... + output=$(npx cspell --no-progress --gitignore --config .vscode/cspell.json "**/*.md" || exit 0) + echo "$output" + echo "OUTPUT<> $GITHUB_ENV + echo "$output" >> $GITHUB_ENV + echo "EOF" >> $GITHUB_ENV + + - name: Create an issue + if: env.OUTPUT != '' + uses: dacbd/create-issue-action@main + with: + token: ${{ secrets.GITHUB_TOKEN }} + title: Weekly spelling check + body: | + Typos and unknown words: + + ``` + ${{ env.OUTPUT }} + ``` + + > [!TIP] + > To exclude words from the spellchecker, you can add valid words (web technology terms or abbreviations) to the [terms-abbreviations.txt](https://github.com/mdn/content/blob/main/.vscode/terms-abbreviations.txt) dictionary for IDE autocompletion. To ignore strings that are not words (`AABBCC` in code, for instance), you can add them to [ignore-list.txt](https://github.com/mdn/content/blob/main/.vscode/ignore-list.txt). + env: + OUTPUT: ${{ env.OUTPUT }} diff --git a/.markdownlint.jsonc b/.markdownlint.jsonc index 5f669e8d6cc4ecc..9d25f924cbc63f8 100644 --- a/.markdownlint.jsonc +++ b/.markdownlint.jsonc @@ -4,8 +4,7 @@ { "default": true, - // Disabled, as some callouts include headings. - "heading-increment": false, + "heading-increment": true, "ul-style": { "style": "dash", }, @@ -220,11 +219,18 @@ "searchScope": "text", }, { - "name": "gfm-blockquote", + "name": "gfm-alert", "message": "Use the GFM syntax: https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Howto/Markdown_in_MDN#notes_warnings_and_callouts", "searchPattern": "/^ *> \\*\\*(Note|Warning|Callout):\\*\\*(?! [[{`_*])/gm", "searchScope": "text", }, + { + "name": "bad-gfm-alert", + "message": "Use the correct GFM syntax: `> [!NOTE]`", + // TODO this should use the modifier syntax; until it has better Node support + "searchPattern": "/^ *> !?\\[!?((?!NOTE)[Nn][Oo][Tt][Ee]|(?!WARNING)[Ww][Aa][Rr][Nn][Ii][Nn][Gg]|(?!CALLOUT)[Cc][Aa][Ll][Ll][Oo][Uu][Tt])\\]\\n|^ *> (?!\\[!)!?\\[!?(NOTE|WARNING|CALLOUT)\\]\\n/gm", + "searchScope": "text", + }, ], }, } diff --git a/.vscode/cspell.json b/.vscode/cspell.json index 0e7391244b949f4..6d39a7623bd6a12 100644 --- a/.vscode/cspell.json +++ b/.vscode/cspell.json @@ -3,7 +3,10 @@ "version": "0.2", "language": "en-US", "languageId": "*", + "useGitignore": true, "dictionaries": [ + "terms-abbreviations", + "ignore-list", "bash", "css", "cpp", @@ -17,7 +20,6 @@ "markdown", "node", "npm", - "project-words", "python", "softwareTerms", "svelte", @@ -37,10 +39,9 @@ // TODO - add some details what these match "\\(#\\w*\\)", "\\]\\(\\S*\\)", - "\\]\\(\\S*\\)", "\\*\\*\\w\\*\\*\\w*", "\\*\\w\\*\\w*", - "#[\\w-]*", + "#[À-ž\\w-]*", "aria-activedescendant=\"(?:[^\\\"]+|\\.)*\"", "aria-controls=\"(?:[^\\\"]+|\\.)*\"", "aria-describedby=\"(?:[^\\\"]+|\\.)*\"", @@ -55,18 +56,26 @@ "for=\"(?:[^\\\"]+|\\.)*\"", "HexValues", "href=\"(?:[^\\\"]+|\\.)*\"", - "id=\"(?:[^\\\"]+|\\.)*\"", + "(?<=id)=\"(?:[^\\\"]+|\\.)*\"", "lang=\".*\">.* [!NOTE] > You probably noticed the `BABYLON.Vector3()` method in use here — this defines a 3D position on the scene. Babylon.js is bundled with a complete math library for handling vectors, colors, matrices etc. ## Let there be light -There are various [light sources](https://doc.babylonjs.com/divingDeeper/lights/lights_introduction#types-of-lights) available in Babylon.js. The most basic one is the `PointLight`, which works like a flashlight — shining a spotlight in a given direction. Add the following line below your camera definition: +There are various [light sources](https://doc.babylonjs.com/features/featuresDeepDive/lights/lights_introduction#types-of-lights) available in Babylon.js. The most basic one is the `PointLight`, which works like a flashlight — shining a spotlight in a given direction. Add the following line below your camera definition: ```js const light = new BABYLON.PointLight( @@ -123,7 +123,7 @@ The parameters are very similar to the previously defined camera: the name of th ## Geometry -Now the scene is properly rendering we can start adding 3D shapes to it. To speed up development Babylon.js provides a bunch of [predefined primitives](https://doc.babylonjs.com/divingDeeper/mesh/creation/set) that you can use to create shapes instantly in a single line of code. There are cubes, spheres, cylinders and more complicated shapes available. Let's start by defining the geometry for a box shape — add the following new code below your previous additions: +Now the scene is properly rendering we can start adding 3D shapes to it. To speed up development Babylon.js provides a bunch of [predefined primitives](https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/set) that you can use to create shapes instantly in a single line of code. There are cubes, spheres, cylinders and more complicated shapes available. Let's start by defining the geometry for a box shape — add the following new code below your previous additions: ```js const box = BABYLON.Mesh.CreateBox("box", 2, scene); diff --git a/files/en-us/games/techniques/3d_on_the_web/index.md b/files/en-us/games/techniques/3d_on_the_web/index.md index 7b5c26aac080207..d38488ae2f450ca 100644 --- a/files/en-us/games/techniques/3d_on_the_web/index.md +++ b/files/en-us/games/techniques/3d_on_the_web/index.md @@ -43,7 +43,7 @@ There's also the [Building up a basic demo with A-Frame](/en-US/docs/Games/Techn Coding raw WebGL is fairly complex, but you'll want to get to grips with it in the long run, as your projects get more advanced (see our [WebGL documentation](/en-US/docs/Web/API/WebGL_API) to get started.) For real-world projects you'll probably also make use of a framework to speed up development and help you manage the project you're working on. Using a framework for 3D games also helps optimize the performance as a lot is taken care of by the tools you use, so you can focus on building the game itself. -The most popular JavaScript 3D library is [Three.js](https://threejs.org/), a multipurpose tool that makes common 3D techniques simpler to implement. There are other popular game development libraries and frameworks worth checking too; [A-Frame](https://aframe.io), [PlayCanvas](https://playcanvas.com/) and [Babylon.js](https://www.babylonjs.com/) are among the most recognizable ones with rich documentation, online editors and active communities. +The most popular JavaScript 3D library is [Three.js](https://threejs.org/), a multipurpose tool that makes common 3D techniques simpler to implement. There are other popular game development libraries and frameworks worth checking too; [A-Frame](https://aframe.io/), [PlayCanvas](https://playcanvas.com/) and [Babylon.js](https://www.babylonjs.com/) are among the most recognizable ones with rich documentation, online editors and active communities. ### Building up a basic demo with A-Frame @@ -63,7 +63,7 @@ Three.js, like any other library, gives you a huge advantage: instead of writing ### Other tools -Both [Unity](https://unity.com/) and [Unreal](https://www.unrealengine.com/) can export your game to [WebGL](/en-US/docs/Web/API/WebGL_API) with [asm.js](/en-US/docs/Games/Tools/asm.js), so you're free to use their tools and techniques to build games that will be exported to the web. +Both [Unity](https://unity.com/) and [Unreal](https://www.unrealengine.com/en-US) can export your game to [WebGL](/en-US/docs/Web/API/WebGL_API) with [asm.js](/en-US/docs/Games/Tools/asm.js), so you're free to use their tools and techniques to build games that will be exported to the web. ![Illustration of three 3D geometry shapes: a grey torus, a blue cube, and a yellow cylinder.](shapes.png) diff --git a/files/en-us/games/techniques/async_scripts/index.md b/files/en-us/games/techniques/async_scripts/index.md index 878158e97444d15..df6346cf8a2ea41 100644 --- a/files/en-us/games/techniques/async_scripts/index.md +++ b/files/en-us/games/techniques/async_scripts/index.md @@ -28,7 +28,7 @@ document.body.appendChild(script); ## When is async not async? -Two common situations in which a script is \*not\* async (as [defined by the HTML spec](https://html.spec.whatwg.org/multipage/scripting.html)) are: +Two common situations in which a script is _not_ async (as [defined by the HTML spec](https://html.spec.whatwg.org/multipage/scripting.html)) are: ```html ` instead of ``. See [Script loading strategies](#script_loading_strategies) below for more information. But note that features we use in other parts of the tutorial may require a local HTTP server anyway. +5. Now the website works just the same as before, but now we've got our JavaScript in an external file. This is generally a good thing in terms of organizing your code and making it reusable across multiple HTML files. Plus, the HTML is easier to read without huge chunks of script dumped in it. @@ -343,7 +345,7 @@ There are a few different strategies to make sure your JavaScript only runs afte - In the external JavaScript example above, the script element is placed in the head of the document, before the HTML body is parsed. But because we're using ` +``` + +The violation report will then be sent to the indicated endpoint as a JSON file. +As you can see from the example below, the `type` is `"csp-violation"` and the `body` property is a serialization of the `CSPViolationReportBody` object: + +```json +[ + { + "age": 53531, + "body": { + "blockedURL": "inline", + "columnNumber": 59, + "disposition": "enforce", + "documentURL": "https://example.com/csp-report-to", + "effectiveDirective": "script-src-elem", + "lineNumber": 1441, + "originalPolicy": "default-src 'self'; report-to csp-endpoint", + "referrer": "https://www.google.com/", + "sample": "console.log(\"lo\")", + "sourceFile": "https://example.com/csp-report-to", + "statusCode": 200 + }, + "type": "csp-violation", + "url": "https://example.com/csp-report-to", + "user_agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36" + } +] +``` + ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/css_object_model/determining_the_dimensions_of_elements/index.md b/files/en-us/web/api/css_object_model/determining_the_dimensions_of_elements/index.md index 5e210a5db0f2870..27a4c5ecf8a8618 100644 --- a/files/en-us/web/api/css_object_model/determining_the_dimensions_of_elements/index.md +++ b/files/en-us/web/api/css_object_model/determining_the_dimensions_of_elements/index.md @@ -10,7 +10,7 @@ There are several properties you can look at in order to determine the width and ## How much room does it use up? -If you need to know the total amount of space an element occupies, including the width of the visible content, scrollbars (if any), padding, and border, you want to use the {{DOMxRef("HTMLElement.offsetWidth")}} and {{DOMxRef("HTMLElement.offsetHeight")}} properties. Most of the time these are the same as width and height of {{DOMxRef("Element.getBoundingClientRect()")}}, when there aren't any transforms applied to the element. In case of transforms, the `offsetWidth` and `offsetHeight` returns the element's layout width and height, while `getBoundingClientRect()` returns the rendering width and height. As an example, if the element has `width: 100px;` and `transform: scale(0.5);` the `getBoundingClientRect()` will return 50 as the width, while `offsetWidth` will return 100. +If you need to know the total amount of space an element occupies, including the width of the visible content, scrollbars (if any), padding, and border, you want to use the {{DOMxRef("HTMLElement.offsetWidth")}} and {{DOMxRef("HTMLElement.offsetHeight")}} properties. Most of the time these are the same as width and height of {{DOMxRef("Element.getBoundingClientRect()")}}, when there aren't any transforms applied to the element. In case of transforms, the `offsetWidth` and `offsetHeight` returns the element's layout width and height, while `getBoundingClientRect()` returns the rendering width and height. As an example, if the element has `width: 100px;` and `transform: scale(0.5);` the `getBoundingClientRect()` will return 50 as the width, while `offsetWidth` will return 100. Another difference is that `offsetWidth` and `offsetHeight` round the values to integers, while `getBoundingClientRect()` provides more precise decimal point values. ![How the offsetWidth and offsetHeight properties are determined, considering padding, borders, and margin sizes](dimensions-offset.png) diff --git a/files/en-us/web/api/cssfontfeaturevaluesrule/fontfamily/index.md b/files/en-us/web/api/cssfontfeaturevaluesrule/fontfamily/index.md index 3dcab3a5afd2c09..372daad6ad9f268 100644 --- a/files/en-us/web/api/cssfontfeaturevaluesrule/fontfamily/index.md +++ b/files/en-us/web/api/cssfontfeaturevaluesrule/fontfamily/index.md @@ -69,7 +69,3 @@ log.textContent += `The 2nd '@font-feature-values' family: "${fontTwo.fontFamily ## Browser compatibility {{Compat}} - -## See also - -- diff --git a/files/en-us/web/api/cssimportrule/stylesheet/index.md b/files/en-us/web/api/cssimportrule/stylesheet/index.md index 755dad8204cbd60..64705bbf77d46e6 100644 --- a/files/en-us/web/api/cssimportrule/stylesheet/index.md +++ b/files/en-us/web/api/cssimportrule/stylesheet/index.md @@ -1,7 +1,7 @@ --- -title: "CSSImportRule: stylesheet property" -short-title: stylesheet -slug: Web/API/CSSImportRule/stylesheet +title: "CSSImportRule: styleSheet property" +short-title: styleSheet +slug: Web/API/CSSImportRule/styleSheet page-type: web-api-instance-property browser-compat: api.CSSImportRule.styleSheet --- diff --git a/files/en-us/web/api/csskeyframesrule/cssrules/index.md b/files/en-us/web/api/csskeyframesrule/cssrules/index.md index ce29fdb08f10bb4..e150bc3e8da7ea7 100644 --- a/files/en-us/web/api/csskeyframesrule/cssrules/index.md +++ b/files/en-us/web/api/csskeyframesrule/cssrules/index.md @@ -10,6 +10,9 @@ browser-compat: api.CSSKeyframesRule.cssRules The read-only **`cssRules`** property of the {{domxref("CSSKeyframeRule")}} interface returns a {{domxref("CSSRuleList")}} containing the rules in the keyframes [at-rule](/en-US/docs/Web/CSS/At-rule). +> [!NOTE] +> The `CSSKeyframeRule` itself is indexable like an array, and functions similarly to its `cssRules` property. + ## Value A {{domxref('CSSRuleList')}}. diff --git a/files/en-us/web/api/csskeyframesrule/index.md b/files/en-us/web/api/csskeyframesrule/index.md index 58b5c207582249a..8c8384acdc77cc1 100644 --- a/files/en-us/web/api/csskeyframesrule/index.md +++ b/files/en-us/web/api/csskeyframesrule/index.md @@ -19,6 +19,8 @@ _Inherits properties from its ancestor {{domxref("CSSRule")}}._ - : Represents the name of the keyframes, used by the {{cssxref("animation-name")}} property. - {{domxref("CSSKeyframesRule.cssRules")}} {{ReadOnlyInline}} - : Returns a {{domxref("CSSRuleList")}} of the keyframes in the list. +- {{domxref("CSSKeyframesRule.length")}} {{ReadOnlyInline}} + - : Returns the number of keyframes in the list. ## Instance methods @@ -33,6 +35,8 @@ _Inherits methods from its ancestor {{domxref("CSSRule")}}._ ## Example +### Using CSSKeyframesRule + The CSS includes a keyframes at-rule. This will be the first {{domxref("CSSRule")}} returned by `document.styleSheets[0].cssRules`. `myRules[0]` returns a `CSSKeyframesRule` object. @@ -49,8 +53,24 @@ The CSS includes a keyframes at-rule. This will be the first {{domxref("CSSRule" ``` ```js -let myRules = document.styleSheets[0].cssRules; -let keyframes = myRules[0]; // a CSSKeyframesRule +const myRules = document.styleSheets[0].cssRules; +const keyframes = myRules[0]; // a CSSKeyframesRule +``` + +### Accessing indexes + +`CSSKeyframesRule` can be indexed like an array, and functions similar to its {{domxref("CSSKeyframesRule.cssRules", "cssRules")}} property. + +```js +const keyframes = document.styleSheets[0].cssRules[0]; + +for (let i = 0; i < keyframes.length; i++) { + console.log(keyframes[i].keyText); +} + +// Output: +// 0% +// 100% ``` ## Specifications diff --git a/files/en-us/web/api/csskeyframesrule/length/index.md b/files/en-us/web/api/csskeyframesrule/length/index.md new file mode 100644 index 000000000000000..3f436b8fd368395 --- /dev/null +++ b/files/en-us/web/api/csskeyframesrule/length/index.md @@ -0,0 +1,46 @@ +--- +title: "CSSKeyframesRule: length property" +short-title: length +slug: Web/API/CSSKeyframesRule/length +page-type: web-api-instance-property +browser-compat: api.CSSKeyframesRule.length +--- + +{{APIRef("CSSOM") }} + +The read-only **`length`** property of the {{domxref("CSSKeyframeRule")}} interface returns the number of {{domxref("CSSKeyframeRule")}} objects in its list. You can then access each keyframe rule by its index directly on the `CSSKeyframeRule` object. + +## Value + +A non-negative integer. It should have the same value as the `length` of the {{domxref("CSSKeyframesRule.cssRules", "cssRules")}} property. + +## Examples + +The CSS includes a keyframes at-rule. This will be the first {{domxref("CSSRule")}} returned by `document.styleSheets[0].cssRules`. +`myRules[0]` returns a {{domxref("CSSKeyframesRule")}} object. The `cssRules` property returns a {{domxref("CSSRuleList")}} containing two rules. + +```css +@keyframes slidein { + from { + transform: translateX(0%); + } + + to { + transform: translateX(100%); + } +} +``` + +```js +const myRules = document.styleSheets[0].cssRules; +const keyframes = myRules[0]; // a CSSKeyframesRule +console.log(keyframes.length); // 2 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/csspagedescriptors/index.md b/files/en-us/web/api/csspagedescriptors/index.md new file mode 100644 index 000000000000000..7a9b5ee88f8238e --- /dev/null +++ b/files/en-us/web/api/csspagedescriptors/index.md @@ -0,0 +1,156 @@ +--- +title: CSSPageDescriptors +slug: Web/API/CSSPageDescriptors +page-type: web-api-interface +status: + - experimental +browser-compat: api.CSSPageDescriptors +--- + +{{APIRef("CSSOM")}}{{SeeCompatTable}} + +The **`CSSPageDescriptors`** interface represents a CSS declaration block for an {{cssxref("@page")}} [at-rule](/en-US/docs/Web/CSS/At-rule). + +The interface exposes style information and various style-related methods and properties for the page. +Each multi-word property has versions in camel- and snake-case. +This means, for example, that you can access the `margin-top` CSS property using the syntax `style["margin-top"]` or `style.marginTop` (where `style` is a `CSSPageDescriptor`). + +A `CSSPageDescriptors` object is accessed through the {{DOMxRef("CSSPageRule.style", "style")}} property of the `CSSPageRule` interface, which can in turn be found using the {{DOMxRef("CSSStyleSheet")}} API. + +{{InheritanceDiagram}} + +## Attributes + +_This interface also inherits properties of its parent, {{domxref("CSSStyleDeclaration")}}._ + +- `margin` {{experimental_inline}} + - : A string representing the `margin` property of the corresponding `@page` at-rule. +- `margin-top` {{experimental_inline}} + - : A string representing the `margin-top` property of the corresponding `@page` at-rule. +- `marginTop` {{experimental_inline}} + - : A string representing the `margin-top` property of the corresponding `@page` at-rule. +- `margin-right` {{experimental_inline}} + - : A string representing the `margin-right` property of the corresponding `@page` at-rule. +- `marginRight` {{experimental_inline}} + - : A string representing the `margin-right` property of the corresponding `@page` at-rule. +- `margin-bottom` {{experimental_inline}} + - : A string representing the `margin-bottom` property of the corresponding `@page` at-rule. +- `marginBottom` {{experimental_inline}} + - : A string representing the `margin-bottom` property of the corresponding `@page` at-rule. +- `margin-left` {{experimental_inline}} + - : A string representing the `margin-left` property of the corresponding `@page` at-rule. +- `marginLeft` {{experimental_inline}} + - : A string representing the `margin-left` property of the corresponding `@page` at-rule. +- `page-orientation` {{experimental_inline}} + - : A string representing the `page-orientation` property of the corresponding `@page` at-rule. +- `pageOrientation` {{experimental_inline}} + - : A string representing the `page-orientation` property of the corresponding `@page` at-rule. +- `size` {{experimental_inline}} + - : A string representing the `size` property of the corresponding `@page` at-rule. + +## Instance methods + +_This interface inherits the methods of its parent, {{domxref("CSSStyleDeclaration")}}._ + +## Examples + +### Inspecting a page at-rule + +This example gets the `CSSPageDescriptors` for a {{cssxref("@page")}} at-rule, if the object is supported on the browser, and then logs its properties. + +```html hidden +

+```
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
+}
+```
+
+```css hidden
+#log {
+  height: 280px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+#### CSS
+
+Below we define styles for the page using a {{cssxref("@page")}} at-rule.
+We assign different values for each margin property using the `margin` shorthand, and also specify the `size`.
+We don't set the `page-orientation`.
+This allows us to see how the properties map in the Web API object.
+
+```css
+@page {
+  margin: 1cm 2px 3px 4px;
+  /* page-orientation: upright; */
+  size: A4;
+}
+```
+
+#### JavaScript
+
+First we check if `CSSPageDescriptors` is defined on the global window object, and if not we log that the interface is not supported.
+
+If `CSSPageDescriptors` is supported, we get the document stylesheet at index `1`, and then gets the `cssRules` defined in that stylesheet.
+We need to get this stylesheet because the example is embedded in a separate frame with its own sheet (index `0` is the CSS for this page).
+
+We then iterate through the rules defined for the live example and match any that are of type `CSSPageRule`, as these correspond to `@page` rules.
+For the matching objects we then log the `style` and all its values.
+
+```js
+if (typeof window.CSSPageDescriptors === "undefined") {
+  log("CSSPageDescriptors is not supported on this browser.");
+} else {
+  // Get stylesheets for example and then get its cssRules
+  const myRules = document.styleSheets[1].cssRules;
+  for (let i = 0; i < myRules.length; i++) {
+    if (myRules[i] instanceof CSSPageRule) {
+      log(`${myRules[i].style}`);
+      log(`margin: ${myRules[i].style.margin}`);
+
+      // Access properties using CamelCase syntax
+      log(`marginTop: ${myRules[i].style.marginTop}`);
+      log(`marginRight: ${myRules[i].style.marginRight}`);
+      log(`marginBottom: ${myRules[i].style.marginBottom}`);
+      log(`marginLeft: ${myRules[i].style.marginLeft}`);
+      log(`pageOrientation: ${myRules[i].style.pageOrientation}`);
+
+      // Access properties using snake-case syntax
+      log(`margin-top: ${myRules[i].style["margin-top"]}`);
+      log(`margin-right: ${myRules[i].style["margin-right"]}`);
+      log(`margin-left: ${myRules[i].style["margin-left"]}`);
+      log(`margin-bottom: ${myRules[i].style["margin-bottom"]}`);
+      log(`page-orientation: ${myRules[i].style["page-orientation"]}`);
+
+      log(`size: ${myRules[i].style.size}`);
+
+      // Log the original CSS text using inherited property: cssText
+      log(`cssText: ${myRules[i].style.cssText}`);
+      log("\n");
+    }
+  }
+}
+```
+
+#### Results
+
+The results are shown below.
+Note that the `style` object displayed at the top of the log should be a `CSSPageDescriptors` to match the current specification, but may be a `CSSStyleDeclaration` in some browsers.
+Note also that the corresponding values for properties in camel- and snake-case match each other and the `@page` declaration, and that `page-orientation` is the empty string `""` because it is not defined in `@page`.
+
+{{EmbedLiveSample("Inspecting a page at-rule", "100%", "350px")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
diff --git a/files/en-us/web/api/csspagerule/index.md b/files/en-us/web/api/csspagerule/index.md
index 0ad4d4338204748..d44ab303887e2da 100644
--- a/files/en-us/web/api/csspagerule/index.md
+++ b/files/en-us/web/api/csspagerule/index.md
@@ -26,7 +26,34 @@ _Inherits methods from its ancestors {{domxref("CSSGroupingRule")}} and {{domxre
 
 ## Examples
 
-The stylesheet includes a single {{cssxref("@page")}} rule, therefore the first (and only) rule returned will be a `CSSPageRule`.
+### Filtering for page rules
+
+This example shows how you can find `CSSPageRule` objects for {{cssxref("@page")}} rules loaded by the document.
+
+```html hidden
+

+```
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
+}
+```
+
+```css hidden
+#log {
+  height: 220px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+#### CSS
+
+Below we define styles for the page using a {{cssxref("@page")}} rule.
 
 ```css
 @page {
@@ -34,11 +61,38 @@ The stylesheet includes a single {{cssxref("@page")}} rule, therefore the first
 }
 ```
 
+#### JavaScript
+
+The code iterates through all the sheets in the document, and through all the `cssRules` in each sheet, logging the sheet index, the number of rules, and the type of each rule object.
+We then detect `CSSPageRule` objects using their type (doing nothing with the information).
+
 ```js
-let myRules = document.styleSheets[0].cssRules;
-console.log(myRules[0]); // a CSSPageRule
+for (
+  let sheetCount = 0;
+  sheetCount < document.styleSheets.length;
+  sheetCount++
+) {
+  const sheet = document.styleSheets[sheetCount].cssRules;
+  log(`styleSheet: ${sheetCount}`);
+
+  const myRules = document.styleSheets[sheetCount].cssRules;
+  log(`rules: ${myRules.length}`);
+  for (let i = 0; i < myRules.length; i++) {
+    log(`rule: ${myRules[i]}`);
+    if (myRules[i] instanceof CSSPageRule) {
+      //... Do something with CSSPageRule
+    }
+  }
+}
 ```
 
+#### Results
+
+The results are shown below.
+As you can see there are a two sheets, corresponding to this main document and the example code frame, and each have a number of rules, only one of which is our `CSSPageRule`.
+
+{{EmbedLiveSample("Filtering for page rules", "100%", "300px")}}
+
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/api/csspagerule/style/index.md b/files/en-us/web/api/csspagerule/style/index.md
index d4463b04daa32d2..21292ee97622069 100644
--- a/files/en-us/web/api/csspagerule/style/index.md
+++ b/files/en-us/web/api/csspagerule/style/index.md
@@ -8,36 +8,105 @@ browser-compat: api.CSSPageRule.style
 
 {{APIRef("CSSOM")}}
 
-The **`style`** read-only property of the {{domxref("CSSPageRule")}} interface returns a {{domxref("CSSStyleDeclaration")}} object. This represents an object that is a [CSS declaration block](/en-US/docs/Web/API/CSS_Object_Model/CSS_Declaration_Block), and exposes style information and various style-related methods and properties.
+The **`style`** read-only property of the {{domxref("CSSPageRule")}} interface returns a {{domxref("CSSPageDescriptors")}} object.
+This represents a [CSS declaration block](/en-US/docs/Web/API/CSS_Object_Model/CSS_Declaration_Block) for a CSS {{cssxref("@page")}} [at-rule](/en-US/docs/Web/CSS/At-rule), and exposes style information and various style-related methods and properties for the page.
 
 ## Value
 
-A {{domxref("CSSStyleDeclaration")}} object, which represents a [CSS declaration block](/en-US/docs/Web/API/CSS_Object_Model/CSS_Declaration_Block) with the following properties:
+A {{domxref("CSSPageDescriptors")}} object with properties that match the associated {{cssxref("@page")}} [at-rule](/en-US/docs/Web/CSS/At-rule).
 
-- computed flag
-  - : Unset.
-- declarations
-  - : The declared declarations in the rule, in the order they were specified, shorthand properties expanded to longhands.
-- parent CSS rule
-  - : The context object, which is an alias for [this](https://heycam.github.io/webidl/#this).
-- owner node
-  - : Null.
+> [!NOTE]
+> Earlier versions of the specification defined this property as a {{domxref("CSSStyleDeclaration")}}.
+> Check the compatibility data below for your browser.
 
 ## Examples
 
-The stylesheet includes a {{cssxref("@page")}} rule. Getting a list of rules, then returning the value of the style property will return a {{domxref("CSSStyleDeclaration")}} object.
+### Inspecting a page rule
+
+This example uses the Web API to inspect the content of a {{cssxref("@page")}} rule.
+
+```html hidden
+

+```
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
+}
+```
+
+```css hidden
+#log {
+  height: 230px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+#### CSS
+
+Below we define styles for the page using a {{cssxref("@page")}} rule.
+We assign different values for each margin property using the `margin` shorthand, and also specify the `size`.
+We don't set the `page-orientation`.
+This allows us to see how the properties map in the Web API object.
 
 ```css
 @page {
-  margin: 1cm;
+  margin: 1cm 2px 3px 4px;
+  /* page-orientation: upright; */
+  size: A4;
 }
 ```
 
+#### JavaScript
+
+The code first gets the document stylesheet at index `1`, and then gets the `cssRules` defined in that stylesheet.
+We need to get this stylesheet because the example is embedded in a separate frame with its own sheet (index `0` is the CSS for this page).
+
+```js
+const myRules = document.styleSheets[1].cssRules;
+```
+
+We then iterate through the rules defined for the live example and match any that are of type `CSSPageRule`, as these correspond to `@page` rules.
+For the matching objects we then log the `style` and all its values.
+
 ```js
-let myRules = document.styleSheets[0].cssRules;
-console.log(myRules[0].style); // returns a CSSStyleDeclaration object
+for (let i = 0; i < myRules.length; i++) {
+  if (myRules[i] instanceof CSSPageRule) {
+    log(`${myRules[i].style}`);
+    log(`margin: ${myRules[i].style.margin}`);
+
+    // Access properties using CamelCase properties
+    log(`marginTop: ${myRules[i].style.marginTop}`);
+    log(`marginRight: ${myRules[i].style.marginRight}`);
+    log(`marginBottom: ${myRules[i].style.marginBottom}`);
+    log(`marginLeft: ${myRules[i].style.marginLeft}`);
+    log(`pageOrientation: ${myRules[i].style.pageOrientation}`);
+
+    // Access properties using snake-case properties
+    log(`margin-top: ${myRules[i].style["margin-top"]}`);
+    log(`margin-right: ${myRules[i].style["margin-right"]}`);
+    log(`margin-left: ${myRules[i].style["margin-left"]}`);
+    log(`margin-bottom: ${myRules[i].style["margin-bottom"]}`);
+    log(`page-orientation: ${myRules[i].style["page-orientation"]}`);
+
+    log(`size: ${myRules[i].style.size}`);
+    log("\n");
+  }
+}
 ```
 
+#### Results
+
+The results are shown below.
+Note that the object should be a `CSSPageDescriptors` to match the current specification, but may be a `CSSStyleDeclaration` in some browsers.
+Note also that the corresponding values for properties in camel- and snake-case match each other and the `@page` declaration, and that `page-orientation` is the empty string `""` because it is not defined in `@page`.
+
+{{EmbedLiveSample("Inspecting a page rule", "100%", "300px")}}
+
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/api/csspositiontrydescriptors/index.md b/files/en-us/web/api/csspositiontrydescriptors/index.md
index 7e2737d819c9562..30f3c21faf4e106 100644
--- a/files/en-us/web/api/csspositiontrydescriptors/index.md
+++ b/files/en-us/web/api/csspositiontrydescriptors/index.md
@@ -36,7 +36,7 @@ The instance properties are listed below:
 | {{cssxref("height")}}              | `CSSPositionTryDescriptors.height`            | `CSSPositionTryDescriptors["height"]`              |
 | {{cssxref("inline-size")}}         | `CSSPositionTryDescriptors.inlineSize`        | `CSSPositionTryDescriptors["inline-size"]`         |
 | {{cssxref("inset")}}               | `CSSPositionTryDescriptors.inset`             | `CSSPositionTryDescriptors["inset"]`               |
-| {{cssxref("inset-area")}}          | `CSSPositionTryDescriptors.insetArea`         | `CSSPositionTryDescriptors["inset-area"]`          |
+| {{cssxref("position-area")}}       | `CSSPositionTryDescriptors.positionArea`      | `CSSPositionTryDescriptors["position-area"]`       |
 | {{cssxref("inset-block")}}         | `CSSPositionTryDescriptors.insetBlock`        | `CSSPositionTryDescriptors["inset-block"]`         |
 | {{cssxref("inset-block-end")}}     | `CSSPositionTryDescriptors.insetBlockEnd`     | `CSSPositionTryDescriptors["inset-block-end"]`     |
 | {{cssxref("inset-block-start")}}   | `CSSPositionTryDescriptors.insetBlockStart`   | `CSSPositionTryDescriptors["inset-block-start"]`   |
@@ -80,7 +80,7 @@ The CSS includes a `@position-try` at-rule with a name of `--custom-right` and t
 
 ```css
 @position-try --custom-right {
-  inset-area: right;
+  position-area: right;
   width: 100px;
   margin: 0 0 0 10px;
 }
@@ -91,7 +91,7 @@ const myRules = document.styleSheets[0].cssRules;
 const tryOption = myRules[0]; // a CSSPositionTryRule
 console.log(tryOption.style); // "[object CSSPositionTryDescriptors]"
 console.log(tryOption.style.margin); // "0 0 0 10px"
-console.log(tryOption.style["inset-area"]); // "right"
+console.log(tryOption.style["position-area"]); // "right"
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/csspositiontryrule/index.md b/files/en-us/web/api/csspositiontryrule/index.md
index dfa41f8db41b581..3b063f37db6d783 100644
--- a/files/en-us/web/api/csspositiontryrule/index.md
+++ b/files/en-us/web/api/csspositiontryrule/index.md
@@ -32,7 +32,7 @@ The CSS includes a `@position-try` at-rule with a name of `--custom-left` and th
 
 ```css
 @position-try --custom-left {
-  inset-area: left;
+  position-area: left;
   width: 20%;
   max-width: 200px;
   margin: 0 10px 0 0;
diff --git a/files/en-us/web/api/csspositiontryrule/style/index.md b/files/en-us/web/api/csspositiontryrule/style/index.md
index 3c7954a9e5e948b..9278791f5bfc8fb 100644
--- a/files/en-us/web/api/csspositiontryrule/style/index.md
+++ b/files/en-us/web/api/csspositiontryrule/style/index.md
@@ -33,7 +33,7 @@ const myRules = document.styleSheets[0].cssRules;
 const tryOption = myRules[0]; // a CSSPositionTryRule
 console.log(tryOption.style.top); // "anchor(bottom)"
 console.log(tryOption.style["min-width"]); // "100px"
-console.log(tryOption.style.insetArea); // ""; no inset-area specified
+console.log(tryOption.style.positionArea); // ""; no position-area specified
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/csspropertyrule/index.md b/files/en-us/web/api/csspropertyrule/index.md
index 716639577bf2732..d5d342585461d3d 100644
--- a/files/en-us/web/api/csspropertyrule/index.md
+++ b/files/en-us/web/api/csspropertyrule/index.md
@@ -17,7 +17,7 @@ _Inherits properties from its ancestor {{domxref("CSSRule")}}._
 
 - {{domxref("CSSPropertyRule.inherits")}} {{ReadOnlyInline}}
   - : Returns the inherit flag of the custom property.
-- {{domxref("CSSPropertyRule.initialvalue")}} {{ReadOnlyInline}}
+- {{domxref("CSSPropertyRule.initialValue")}} {{ReadOnlyInline}}
   - : Returns the initial value of the custom property.
 - {{domxref("CSSPropertyRule.name")}} {{ReadOnlyInline}}
   - : Returns the name of the custom property.
diff --git a/files/en-us/web/api/csspropertyrule/initialvalue/index.md b/files/en-us/web/api/csspropertyrule/initialvalue/index.md
index e7a6bc342211a18..9895955244f5505 100644
--- a/files/en-us/web/api/csspropertyrule/initialvalue/index.md
+++ b/files/en-us/web/api/csspropertyrule/initialvalue/index.md
@@ -1,7 +1,7 @@
 ---
 title: "CSSPropertyRule: initialValue property"
 short-title: initialValue
-slug: Web/API/CSSPropertyRule/initialvalue
+slug: Web/API/CSSPropertyRule/initialValue
 page-type: web-api-instance-property
 browser-compat: api.CSSPropertyRule.initialValue
 ---
diff --git a/files/en-us/web/api/cssrule/csstext/index.md b/files/en-us/web/api/cssrule/csstext/index.md
index 006393d309ae49e..f6c7d419524a5f4 100644
--- a/files/en-us/web/api/cssrule/csstext/index.md
+++ b/files/en-us/web/api/cssrule/csstext/index.md
@@ -19,7 +19,7 @@ Be aware that this property can no longer be set directly, as it is [now specifi
 to be _functionally_ modify-only, and silently so. In other words, attempting to
 set it _does absolutely nothing_, and doesn't even emit a warning or error.
 Furthermore, it has no settable sub-properties. Therefore, to modify it, use the
-stylesheet's {{domxref("CSSRuleList", "cssRules")}}`[index]` properties
+stylesheet's {{domxref("CSSRuleList", "cssRules[index]")}} properties
 {{domxref("CSSStyleRule.selectorText", ".selectorText")}} and
 {{domxref("CSSStyleRule.style", ".style")}} (or its sub-properties). See [Using dynamic styling information](/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information) for details.
 
diff --git a/files/en-us/web/api/cssstyledeclaration/index.md b/files/en-us/web/api/cssstyledeclaration/index.md
index 04e1c6eba967be6..833e70d81b4e42c 100644
--- a/files/en-us/web/api/cssstyledeclaration/index.md
+++ b/files/en-us/web/api/cssstyledeclaration/index.md
@@ -28,7 +28,7 @@ A `CSSStyleDeclaration` object can be exposed using three different APIs:
 
 - {{DOMxRef("CSSStyleDeclaration.cssFloat", "CSSStyleDeclaration.cssFloat")}}
   - : Special alias for the {{CSSxRef("float")}} CSS property.
-- {{DOMxRef("CSSStyleDeclaration.named_properties", 'CSSStyleDeclaration named properties', "", 1)}}
+- `CSSStyleDeclaration` named properties
   - : Dashed and camel-cased attributes for all supported CSS properties.
 
 ## Instance methods
diff --git a/files/en-us/web/api/cssstylesheet/index.md b/files/en-us/web/api/cssstylesheet/index.md
index a273150014e28e7..a5a5adae1c7a700 100644
--- a/files/en-us/web/api/cssstylesheet/index.md
+++ b/files/en-us/web/api/cssstylesheet/index.md
@@ -145,6 +145,15 @@ A (possibly incomplete) list of ways a stylesheet can be associated with a docum
         {{domxref("ProcessingInstruction.sheet", ".sheet")}}
       
     
+    
+      
+        JavaScript import ... with { type: "css" }
+      
+      No
+      N/A
+      N/A
+      N/A
+    
     
       HTTP Link Header
       Yes
diff --git a/files/en-us/web/api/csstransformvalue/index.md b/files/en-us/web/api/csstransformvalue/index.md
index d8c3a546fee3d72..6e6e62f6eb679c0 100644
--- a/files/en-us/web/api/csstransformvalue/index.md
+++ b/files/en-us/web/api/csstransformvalue/index.md
@@ -42,13 +42,13 @@ _Inherits methods from its ancestor {{domxref('CSSStyleValue')}}._
 
 - {{domxref("CSSTransformValue.toMatrix()")}}
   - : Returns a new {{domxref('DOMMatrix')}} object.
-- {{domxref('CSSUnparsedValue.entries()')}}
+- {{domxref('CSSTransformValue.entries()')}}
   - : Returns an array of a given object's own enumerable property `[key, value]` pairs in the same order as that provided by a {{jsxref("Statements/for...in", "for...in")}} loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
-- {{domxref('CSSUnparsedValue.forEach()')}}
+- {{domxref('CSSTransformValue.forEach()')}}
   - : Executes a provided function once for each element of the `CSSTransformValue` object.
-- {{domxref('CSSUnparsedValue.keys()')}}
+- {{domxref('CSSTransformValue.keys()')}}
   - : Returns a new _array iterator_ object that contains the keys for each index in the `CSSTransformValue` object.
-- {{domxref('CSSUnparsedValue.values()')}}
+- {{domxref('CSSTransformValue.values()')}}
   - : Returns a new _array iterator_ object that contains the values for each index in the `CSSTransformValue` object.
 
 ## Examples
diff --git a/files/en-us/web/api/cssvalue/csstext/index.md b/files/en-us/web/api/cssvalue/csstext/index.md
index bc6ef5187db1777..504015de8f594aa 100644
--- a/files/en-us/web/api/cssvalue/csstext/index.md
+++ b/files/en-us/web/api/cssvalue/csstext/index.md
@@ -43,10 +43,7 @@ It has been superseded by a modern, but incompatible, [CSS Typed Object Model AP
 
 ## Browser compatibility
 
-This feature was originally defined in the [DOM Style Level 2](https://www.w3.org/TR/DOM-Level-2-Style/) specification, but has been dropped from any
-standardization effort since then.
-
-It has been superseded by a modern, but incompatible, [CSS Typed Object Model API](/en-US/docs/Web/API/CSS_Typed_OM_API) that is now on the standard track.
+{{Compat}}
 
 ## See also
 
diff --git a/files/en-us/web/api/datatransfer/index.md b/files/en-us/web/api/datatransfer/index.md
index 8c60b80ac10555b..0185dc1cae6054d 100644
--- a/files/en-us/web/api/datatransfer/index.md
+++ b/files/en-us/web/api/datatransfer/index.md
@@ -31,6 +31,8 @@ The **`DataTransfer`** object is used to hold any data transferred between conte
 
 ## Instance methods
 
+- {{domxref("DataTransfer.addElement()")}} {{experimental_inline}} {{non-standard_inline}}
+  - : Sets the drag source for the given element. This will be the element on which {{domxref("HTMLElement/drag_event", "drag")}} and {{domxref("HTMLElement/dragend_event", "dragend")}} events are fired, and not the default target (the node that was dragged). Firefox-specific.
 - {{domxref("DataTransfer.clearData()")}}
   - : Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.
 - {{domxref("DataTransfer.getData()")}}
diff --git a/files/en-us/web/api/dedicatedworkerglobalscope/requestanimationframe/index.md b/files/en-us/web/api/dedicatedworkerglobalscope/requestanimationframe/index.md
index 83f71bbeb902de6..76c4230ed1de8f8 100644
--- a/files/en-us/web/api/dedicatedworkerglobalscope/requestanimationframe/index.md
+++ b/files/en-us/web/api/dedicatedworkerglobalscope/requestanimationframe/index.md
@@ -28,9 +28,14 @@ requestAnimationFrame(callback)
 ### Parameters
 
 - `callback`
-  - The function to call when it's time to update your animation for the next repaint. This callback function is passed a single argument: a {{domxref("DOMHighResTimeStamp")}} indicating the end time of the previous frame's rendering (based on the number of milliseconds since [time origin](/en-US/docs/Web/API/Performance/timeOrigin)).
-  - The timestamp is a decimal number, in milliseconds, but with a minimal precision of 1 millisecond. The timestamp value is also similar to calling {{domxref('performance.now()')}} at the start of the callback function, but it is never the same value.
-  - When multiple callbacks queued by `requestAnimationFrame()` begin to fire in a single frame, each receives the same timestamp even though time has passed during the computation of every previous callback's workload.
+
+  - : The function to call when it's time to update your animation for the next repaint. This callback function is passed a single argument:
+
+    - `timestamp`
+
+      - : A {{domxref("DOMHighResTimeStamp")}} indicating the end time of the previous frame's rendering (based on the number of milliseconds since [time origin](/en-US/docs/Web/API/Performance/timeOrigin)). The timestamp is a decimal number, in milliseconds, but with a minimal precision of 1 millisecond. The timestamp value is also similar to calling {{domxref('performance.now()')}} at the start of the callback function, but it is never the same value.
+
+        When multiple callbacks queued by `requestAnimationFrame()` begin to fire in a single frame, each receives the same timestamp even though time has passed during the computation of every previous callback's workload.
 
 ### Return value
 
diff --git a/files/en-us/web/api/document/domain/index.md b/files/en-us/web/api/document/domain/index.md
index c06d012847a9c0d..f20a93cf202a61a 100644
--- a/files/en-us/web/api/document/domain/index.md
+++ b/files/en-us/web/api/document/domain/index.md
@@ -39,7 +39,7 @@ The getter for this property returns the domain portion of the current document'
 origin. In most cases, this will be the hostname portion of the document's URL. However,
 there are some exceptions:
 
-- If the page has an opaque {{glossary("origin")}}, e.g. for a page with a [data URL](/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs), then it will
+- If the page has an opaque {{glossary("origin")}}, e.g. for a page with a [data URL](/en-US/docs/Web/URI/Schemes/data), then it will
   return the empty string.
 - If the `document.domain` [setter](#setting_the_domain) has been used, then
   it will return the value that was set.
@@ -141,7 +141,7 @@ modern isolation features:
 Finally, setting `document.domain` does not change the origin used for
 origin-checks by some Web APIs, preventing sub-domain access via this mechanism.
 Affected APIs include (but are not limited to):
-{{domxref("Window.localStorage")}}, [IndexDB API](/en-US/docs/Web/API/IndexedDB_API), {{domxref("BroadcastChannel")}}, {{domxref("SharedWorker")}} .
+{{domxref("Window.localStorage")}}, [IndexDB API](/en-US/docs/Web/API/IndexedDB_API), {{domxref("BroadcastChannel")}}, {{domxref("SharedWorker")}}.
 
 ## Specifications
 
diff --git a/files/en-us/web/api/document/execcommand/index.md b/files/en-us/web/api/document/execcommand/index.md
index 7c4e0626a3dc441..1e10bad751ae477 100644
--- a/files/en-us/web/api/document/execcommand/index.md
+++ b/files/en-us/web/api/document/execcommand/index.md
@@ -220,7 +220,7 @@ function insertText(newText, selector) {
 
 ## Specifications
 
-This feature is not part of any current specification, but there is an [unofficial draft](https://w3c.github.io/editing/docs/execCommand/) attempting to specify it.
+{{Specifications}}
 
 ## Browser compatibility
 
diff --git a/files/en-us/web/api/document/fgcolor/index.md b/files/en-us/web/api/document/fgcolor/index.md
index 602bd4dbb7e9ee6..5ff403646ed97d7 100644
--- a/files/en-us/web/api/document/fgcolor/index.md
+++ b/files/en-us/web/api/document/fgcolor/index.md
@@ -34,6 +34,10 @@ in hexadecimal).
 
 Another alternative is `document.body.text`, although this is [deprecated in HTML 4.01](https://www.w3.org/TR/html401/struct/global.html#adef-text) in favor of the CSS alternative above.
 
+## Specifications
+
+{{Specifications}}
+
 ## Browser compatibility
 
 {{Compat}}
diff --git a/files/en-us/web/api/document/fragmentdirective/index.md b/files/en-us/web/api/document/fragmentdirective/index.md
index ed6be72230b97d0..b439f1594e639f8 100644
--- a/files/en-us/web/api/document/fragmentdirective/index.md
+++ b/files/en-us/web/api/document/fragmentdirective/index.md
@@ -8,7 +8,7 @@ status:
 browser-compat: api.Document.fragmentDirective
 ---
 
-{{APIRef}}{{SeeCompatTable}}
+{{APIRef("URL Fragment Text Directives")}}{{SeeCompatTable}}
 
 The **`fragmentDirective`** read-only property of the {{domxref("Document")}} interface returns the {{domxref("FragmentDirective")}} for the current document.
 
@@ -38,5 +38,5 @@ This functionality is mainly intended for feature detection at present. In the f
 
 ## See also
 
-- [Text fragments](/en-US/docs/Web/Text_fragments)
+- [Text fragments](/en-US/docs/Web/URI/Fragment/Text_fragments)
 - {{cssxref("::target-text")}}
diff --git a/files/en-us/web/api/document/getelementsbytagname/index.md b/files/en-us/web/api/document/getelementsbytagname/index.md
index b2fbd14005af2d1..b2d49d7f4b82be3 100644
--- a/files/en-us/web/api/document/getelementsbytagname/index.md
+++ b/files/en-us/web/api/document/getelementsbytagname/index.md
@@ -52,7 +52,7 @@ paragraph elements of a particular parent (either the document itself or one of
 nested {{HTMLElement("div")}} elements).
 
 ```html-nolint
-
+
 
   
     
diff --git a/files/en-us/web/api/document/head/index.md b/files/en-us/web/api/document/head/index.md
index a606174459c8a09..56fd5c8c5b847aa 100644
--- a/files/en-us/web/api/document/head/index.md
+++ b/files/en-us/web/api/document/head/index.md
@@ -36,7 +36,7 @@ An {{domxref("HTMLHeadElement")}}.
 ## Notes
 
 `document.head` is read-only. Trying to assign a value to this property will
-fail silently or, in [Strict Mode](/en-US/docs/Web/JavaScript/Reference/Strict_mode), throws a {{jsxref("TypeError")}} .
+fail silently or, in [Strict Mode](/en-US/docs/Web/JavaScript/Reference/Strict_mode), throws a {{jsxref("TypeError")}}.
 
 ## Specifications
 
diff --git a/files/en-us/web/api/document/linkcolor/index.md b/files/en-us/web/api/document/linkcolor/index.md
index 4d98565962fe534..7a70a6e8bca8c15 100644
--- a/files/en-us/web/api/document/linkcolor/index.md
+++ b/files/en-us/web/api/document/linkcolor/index.md
@@ -32,9 +32,7 @@ document.linkColor = "blue";
 
 ## Specifications
 
-HTML5
-
-`Document.linkColor` is [deprecated in DOM Level 2 HTML](https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268).
+{{Specifications}}
 
 ## Browser compatibility
 
diff --git a/files/en-us/web/api/document/querycommandenabled/index.md b/files/en-us/web/api/document/querycommandenabled/index.md
index e12659eed92518c..6ce3989dca97070 100644
--- a/files/en-us/web/api/document/querycommandenabled/index.md
+++ b/files/en-us/web/api/document/querycommandenabled/index.md
@@ -28,7 +28,7 @@ document.queryCommandEnabled(command)
 ### Return value
 
 Returns a boolean value which is `true` if the command is enabled
-and `false` if the command isn't`.`
+and `false` if the command isn't.
 
 ## Notes
 
diff --git a/files/en-us/web/api/document/queryselector/index.md b/files/en-us/web/api/document/queryselector/index.md
index 1789277433b544b..240fa78e90f1cd9 100644
--- a/files/en-us/web/api/document/queryselector/index.md
+++ b/files/en-us/web/api/document/queryselector/index.md
@@ -34,7 +34,7 @@ querySelector(selectors)
     must be a valid CSS selector string; if it isn't, a `SyntaxError` exception
     is thrown.
 
-    Note that the HTML specification does not require attribute values to be valid CSS identifiers. If a [`class`](/en-US/docs/Web/HTML/Global_attributes/class) or [`id`](/en-US/docs/Web/HTML/Global_attributes/id) attribute value is not a valid CSS identifier, than you must escape it before using it in a selector, either by calling {{domxref("CSS.escape_static", "CSS.escape()")}} on the value, or using one of the techniques described in [Escaping characters](/en-US/docs/Web/CSS/ident#escaping_characters). See [Escaping attribute values](#escaping_attribute_values) for an example.
+    Note that the HTML specification does not require attribute values to be valid CSS identifiers. If a [`class`](/en-US/docs/Web/HTML/Global_attributes/class) or [`id`](/en-US/docs/Web/HTML/Global_attributes/id) attribute value is not a valid CSS identifier, then you must escape it before using it in a selector, either by calling {{domxref("CSS.escape_static", "CSS.escape()")}} on the value, or using one of the techniques described in [Escaping characters](/en-US/docs/Web/CSS/ident#escaping_characters). See [Escaping attribute values](#escaping_attribute_values) for an example.
 
 ### Return value
 
diff --git a/files/en-us/web/api/document/queryselectorall/index.md b/files/en-us/web/api/document/queryselectorall/index.md
index 7d9c91b90401c3d..15c90d7c8ff01a9 100644
--- a/files/en-us/web/api/document/queryselectorall/index.md
+++ b/files/en-us/web/api/document/queryselectorall/index.md
@@ -26,13 +26,13 @@ querySelectorAll(selectors)
     must be a valid CSS selector string; if it isn't, a `SyntaxError` exception
     is thrown.
 
-    Note that the HTML specification does not require attribute values to be valid CSS identifiers. If a [`class`](/en-US/docs/Web/HTML/Global_attributes/class) or [`id`](/en-US/docs/Web/HTML/Global_attributes/id) attribute value is not a valid CSS identifier, than you must escape it before using it in a selector, either by calling {{domxref("CSS.escape_static", "CSS.escape()")}} on the value, or using one of the techniques described in [Escaping characters](/en-US/docs/Web/CSS/ident#escaping_characters). See [Escaping attribute values](#escaping_attribute_values) for an example.
+    Note that the HTML specification does not require attribute values to be valid CSS identifiers. If a [`class`](/en-US/docs/Web/HTML/Global_attributes/class) or [`id`](/en-US/docs/Web/HTML/Global_attributes/id) attribute value is not a valid CSS identifier, then you must escape it before using it in a selector, either by calling {{domxref("CSS.escape_static", "CSS.escape()")}} on the value, or using one of the techniques described in [Escaping characters](/en-US/docs/Web/CSS/ident#escaping_characters). See [Escaping attribute values](#escaping_attribute_values) for an example.
 
 ### Return value
 
 A non-live {{domxref("NodeList")}} containing one {{domxref("Element")}} object for
 each element that matches at least one of the specified selectors or an empty
-{{domxref("NodeList")}} in case of no matches.
+{{domxref("NodeList")}} in case of no matches. The elements are in document order — that is, parents before children, earlier siblings before later siblings.
 
 > [!NOTE]
 > If the specified `selectors` include a [CSS pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements), the returned list
diff --git a/files/en-us/web/api/document/scroll_event/index.md b/files/en-us/web/api/document/scroll_event/index.md
index c3d10817e7092ec..a24bf572fb9d203 100644
--- a/files/en-us/web/api/document/scroll_event/index.md
+++ b/files/en-us/web/api/document/scroll_event/index.md
@@ -30,7 +30,7 @@ A generic {{domxref("Event")}}.
 
 ### Scroll event throttling
 
-Since `scroll` events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{DOMxRef("setTimeout()")}}, or a {{DOMxRef("CustomEvent")}}, as follows.
+Since `scroll` events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to {{glossary("throttle")}} the event using {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{DOMxRef("setTimeout()")}}, or a {{DOMxRef("CustomEvent")}}, as follows.
 
 Note, however, that input events and animation frames are fired at about the same rate, and therefore the optimization below is often unnecessary. This example optimizes the `scroll` event for `requestAnimationFrame`.
 
diff --git a/files/en-us/web/api/document/scrollingelement/index.md b/files/en-us/web/api/document/scrollingelement/index.md
index faa9dadc03cc73b..9fa1b6a6a6fd383 100644
--- a/files/en-us/web/api/document/scrollingelement/index.md
+++ b/files/en-us/web/api/document/scrollingelement/index.md
@@ -14,7 +14,7 @@ scrolls the document. In standards mode, this is the root element of the
 document, {{domxref("document.documentElement")}}.
 
 When in quirks mode, the `scrollingElement` attribute returns the HTML
-`body` element if it exists and is [potentially scrollable](https://drafts.csswg.org/cssom-view/#potentially-scrollable), otherwise it returns null.
+`body` element if it exists and is _not_ [potentially scrollable](https://drafts.csswg.org/cssom-view/#potentially-scrollable), otherwise it returns `null`. This may look surprising but is true according to both the specification and browsers.
 
 ## Value
 
diff --git a/files/en-us/web/api/document/securitypolicyviolation_event/index.md b/files/en-us/web/api/document/securitypolicyviolation_event/index.md
index 03b236466808815..bd586d515e7652c 100644
--- a/files/en-us/web/api/document/securitypolicyviolation_event/index.md
+++ b/files/en-us/web/api/document/securitypolicyviolation_event/index.md
@@ -10,12 +10,13 @@ browser-compat: api.Document.securitypolicyviolation_event
 
 The **`securitypolicyviolation`** event is fired when a [Content Security Policy](/en-US/docs/Web/HTTP/CSP) is violated.
 
-The event is fired on the global scope when violates the policy and will bubble to the {{domxref("Window")}} object. The event may also bubble from {{domxref("Node", "nodes", "", "nocode")}} contained in the document tree.
+The event is fired on the document when there is a violation of the document CSP policy (and may also bubble from elements in the document).
 
-The handler can be assigned using the `onsecuritypolicyviolation` event handler property or using {{domxref("EventTarget.addEventListener()")}}.
+This event [bubbles](/en-US/docs/Learn/JavaScript/Building_blocks/Event_bubbling) to the {{domxref("Window")}} object, and is [composed](/en-US/docs/Web/API/Event/composed).
 
 > [!NOTE]
-> It is recommended to add the handler for this event to a top level object (i.e. {{domxref("Window")}} or {{domxref("Document")}}). While the property exists in HTML elements, you can't assign a handler to the property until the elements have been loaded, by which time this event will already have fired.
+> You should add the handler for this event to a top level object (i.e. {{domxref("Window")}} or {{domxref("Document")}}).
+> While the property exists in HTML elements, you can't assign a handler to the property until the elements have been loaded, by which time this event will already have fired.
 
 ## Syntax
 
diff --git a/files/en-us/web/api/document/xmlencoding/index.md b/files/en-us/web/api/document/xmlencoding/index.md
index 577fe6702af38a0..9f825ecde81531d 100644
--- a/files/en-us/web/api/document/xmlencoding/index.md
+++ b/files/en-us/web/api/document/xmlencoding/index.md
@@ -25,7 +25,7 @@ Then, the result should be "UTF-16".
 
 ## Specifications
 
-This feature is not part of any specification anymore. It is no more on track to become a standard.
+{{Specifications}}
 
 ## Browser compatibility
 
diff --git a/files/en-us/web/api/document/xmlversion/index.md b/files/en-us/web/api/document/xmlversion/index.md
index c5cd79d86084395..fc06dbb3e46ff80 100644
--- a/files/en-us/web/api/document/xmlversion/index.md
+++ b/files/en-us/web/api/document/xmlversion/index.md
@@ -22,7 +22,7 @@ if (document.createElement("foo").tagName === "FOO") {
 
 ## Specifications
 
-This feature is not part of any specification anymore. It is no more on track to become a standard.
+{{Specifications}}
 
 ## Browser compatibility
 
diff --git a/files/en-us/web/api/document_object_model/examples/index.md b/files/en-us/web/api/document_object_model/examples/index.md
index 3c2690d26ee44d0..e4d4f548e7fbc67 100644
--- a/files/en-us/web/api/document_object_model/examples/index.md
+++ b/files/en-us/web/api/document_object_model/examples/index.md
@@ -308,7 +308,7 @@ This example demonstrates how the {{domxref("window.getComputedStyle")}} method
 
 This example uses DOM methods to display all the properties of the {{domxref("Window.load_event", "onload")}} {{domxref("event")}} object and their values in a table. It also shows a useful technique of using a [`for...in`](/en-US/docs/Web/JavaScript/Reference/Statements/for...in) loop to iterate over the properties of an object to get their values.
 
-The properties of event objects differs greatly between browsers, the [WHATWG DOM Standard](https://dom.spec.whatwg.org) lists the standard properties, however many browsers have extended these greatly.
+The properties of event objects differs greatly between browsers, the [WHATWG DOM Standard](https://dom.spec.whatwg.org/) lists the standard properties, however many browsers have extended these greatly.
 
 Put the following code into a blank text file and load it into a variety of browsers, you'll be surprised at the different number and names of properties. You might also like to add some elements in the page and call this function from different event handlers.
 
diff --git a/files/en-us/web/api/document_object_model/whitespace/index.md b/files/en-us/web/api/document_object_model/whitespace/index.md
index 6024d6a5b43b496..656ccfe786371fb 100644
--- a/files/en-us/web/api/document_object_model/whitespace/index.md
+++ b/files/en-us/web/api/document_object_model/whitespace/index.md
@@ -17,12 +17,12 @@ Whitespace is any string of text composed only of spaces, tabs or line breaks (t
 In the case of HTML, whitespace is largely ignored — whitespace in between words is treated as a single character, and whitespace at the start and end of elements and outside elements is ignored. Take the following minimal example:
 
 ```html-nolint
-
+
 
   
      Hello      World!     

 ```
 
-This source code contains a couple of line feeds after the `DOCTYPE` and a bunch of space characters before, after, and inside the `
` element, but the browser doesn't seem to care at all and just shows the words "Hello World!" as if these characters didn't exist at all:
+This source code contains a couple of line feeds after the `doctype` and a bunch of space characters before, after, and inside the `
` element, but the browser doesn't seem to care at all and just shows the words "Hello World!" as if these characters didn't exist at all:
 
 {{EmbedLiveSample('HTML_largely_ignores_whitespace')}}
 
diff --git a/files/en-us/web/api/documenttype/name/index.md b/files/en-us/web/api/documenttype/name/index.md
index 51c79a280549c97..c29d5a253df437c 100644
--- a/files/en-us/web/api/documenttype/name/index.md
+++ b/files/en-us/web/api/documenttype/name/index.md
@@ -12,7 +12,7 @@ The read-only **`name`** property of the {{domxref("DocumentType")}} returns the
 
 For synthetic `DocumentType`, this property reflects the value given in parameter to {{domxref("DOMImplementation.createDocumentType()")}}.
 
-For HTML documents, browsers always set it up to `html`, whatever the actual `DOCTYPE` in the source code is.
+For HTML documents, browsers always set it up to `html`, whatever the actual `doctype` in the source code is.
 
 ## Value
 
diff --git a/files/en-us/web/api/documenttype/publicid/index.md b/files/en-us/web/api/documenttype/publicid/index.md
index af09418bca02bc4..c9dc479823ab3a9 100644
--- a/files/en-us/web/api/documenttype/publicid/index.md
+++ b/files/en-us/web/api/documenttype/publicid/index.md
@@ -12,7 +12,7 @@ The read-only **`publicId`** property of the {{domxref("DocumentType")}} returns
 
 For synthetic `DocumentType`, this property reflects the value given in parameter to {{domxref("DOMImplementation.createDocumentType()")}}.
 
-For HTML documents, browsers always set it up to `html`, whatever the actual `DOCTYPE` in the source code is. For SVG documents, for example, it can be `"-//W3C//DTD SVG 1.1//EN"`.
+For HTML documents, browsers always set it up to `html`, whatever the actual `doctype` in the source code is. For SVG documents, for example, it can be `"-//W3C//DTD SVG 1.1//EN"`.
 
 ## Value
 
diff --git a/files/en-us/web/api/documenttype/remove/index.md b/files/en-us/web/api/documenttype/remove/index.md
index 8a0330a27d7084d..b90e312923eae8d 100644
--- a/files/en-us/web/api/documenttype/remove/index.md
+++ b/files/en-us/web/api/documenttype/remove/index.md
@@ -29,7 +29,7 @@ None ({{jsxref("undefined")}}).
 ### Using `remove()`
 
 ```js
-document.doctype; // "'
+document.doctype; // "'
 document.doctype.remove();
 document.doctype; // null
 ```
diff --git a/files/en-us/web/api/documenttype/systemid/index.md b/files/en-us/web/api/documenttype/systemid/index.md
index 3675c308492e997..c58f61cd03f93b6 100644
--- a/files/en-us/web/api/documenttype/systemid/index.md
+++ b/files/en-us/web/api/documenttype/systemid/index.md
@@ -12,7 +12,7 @@ The read-only **`systemId`** property of the {{domxref("DocumentType")}} returns
 
 For synthetic `DocumentType`, this property reflects the value given in parameter to {{domxref("DOMImplementation.createDocumentType()")}}.
 
-For HTML documents, browsers always set it up to `html`, whatever the actual `DOCTYPE` in the source code is. For SVG documents, for example, it can be `"http://www.w3.org/2000/svg"`.
+For HTML documents, browsers always set it up to `html`, whatever the actual `doctype` in the source code is. For SVG documents, for example, it can be `"http://www.w3.org/2000/svg"`.
 
 ## Value
 
diff --git a/files/en-us/web/api/domhighrestimestamp/index.md b/files/en-us/web/api/domhighrestimestamp/index.md
index a25f19687794096..d9b192f815e3cb7 100644
--- a/files/en-us/web/api/domhighrestimestamp/index.md
+++ b/files/en-us/web/api/domhighrestimestamp/index.md
@@ -2,7 +2,7 @@
 title: DOMHighResTimeStamp
 slug: Web/API/DOMHighResTimeStamp
 page-type: web-api-interface
-browser-compat: api.DOMHighResTimestamp
+spec-urls: https://w3c.github.io/hr-time/#dom-domhighrestimestamp
 ---
 
 {{APIRef("Performance API")}}
@@ -35,6 +35,10 @@ cross-origin documents. COOP process-isolates your document and potential attack
 can't access to your global object if they were opening it in a popup, preventing a set
 of cross-origin attacks dubbed [XS-Leaks](https://github.com/xsleaks/xsleaks).
 
+## Specifications
+
+{{Specifications}}
+
 ## See also
 
 - [`performance.now()`](/en-US/docs/Web/API/Performance/now)
diff --git a/files/en-us/web/api/domtokenlist/remove/index.md b/files/en-us/web/api/domtokenlist/remove/index.md
index 311c780cd024354..144f3d10497bec6 100644
--- a/files/en-us/web/api/domtokenlist/remove/index.md
+++ b/files/en-us/web/api/domtokenlist/remove/index.md
@@ -39,8 +39,7 @@ list into the ``'s {{domxref("Node.textContent")}}.
 First, the HTML:
 
 ```html
-

-

+ 
 ```
 
 Now the JavaScript:
diff --git a/files/en-us/web/api/ecdhkeyderiveparams/index.md b/files/en-us/web/api/ecdhkeyderiveparams/index.md
index 7e80534bbbb2e83..ec499a7dcdbd662 100644
--- a/files/en-us/web/api/ecdhkeyderiveparams/index.md
+++ b/files/en-us/web/api/ecdhkeyderiveparams/index.md
@@ -7,7 +7,7 @@ spec-urls: https://w3c.github.io/webcrypto/#dfn-EcdhKeyDeriveParams
 
 {{ APIRef("Web Crypto API") }}
 
-The **`EcdhKeyDeriveParams`** dictionary of the [Web Crypto API](/en-US/docs/Web/API/Web_Crypto_API) represents the object that should be passed as the `algorithm` parameter into {{domxref("SubtleCrypto.deriveKey()")}}, when using the [ECDH](/en-US/docs/Web/API/SubtleCrypto/deriveKey#ecdh) algorithm.
+The **`EcdhKeyDeriveParams`** dictionary of the [Web Crypto API](/en-US/docs/Web/API/Web_Crypto_API) represents the object that should be passed as the `algorithm` parameter into {{domxref("SubtleCrypto.deriveKey()")}} and {{domxref("SubtleCrypto.deriveBits()")}}, when using the [ECDH](/en-US/docs/Web/API/SubtleCrypto/deriveKey#ecdh) or [X25519](/en-US/docs/Web/API/SubtleCrypto/deriveKey#x25519) algorithms.
 
 ECDH enables two people who each have a key pair consisting of a public and a private key to derive a shared secret. They exchange public keys and use the combination of their private key and the other entity's public key to derive a secret key that they — and no one else — share.
 
@@ -16,13 +16,14 @@ The parameters for ECDH `deriveKey()` therefore include the other entity's publi
 ## Instance properties
 
 - `name`
-  - : A string. This should be set to `ECDH`.
+  - : A string.
+    This should be set to `ECDH` or `X25519`, depending on the algorithm used.
 - `public`
   - : A {{domxref("CryptoKey")}} object representing the public key of the other entity.
 
 ## Examples
 
-See the examples for {{domxref("SubtleCrypto.deriveKey()")}}.
+See the examples for {{domxref("SubtleCrypto.deriveKey()")}} and {{domxref("SubtleCrypto.deriveBits()")}}.
 
 ## Specifications
 
@@ -30,8 +31,9 @@ See the examples for {{domxref("SubtleCrypto.deriveKey()")}}.
 
 ## Browser compatibility
 
-Browsers that support the "ECDH" algorithm for the {{domxref("SubtleCrypto.deriveKey()")}} method will support this type.
+Browsers that support the "ECDH" or "X25519" algorithm for the {{domxref("SubtleCrypto.deriveKey()")}} method will support this type.
 
 ## See also
 
 - {{domxref("SubtleCrypto.deriveKey()")}}.
+- {{domxref("SubtleCrypto.deriveBits()")}}
diff --git a/files/en-us/web/api/editcontext_api/index.md b/files/en-us/web/api/editcontext_api/index.md
index 52f434ed8b1a8df..508b2454a03f42b 100644
--- a/files/en-us/web/api/editcontext_api/index.md
+++ b/files/en-us/web/api/editcontext_api/index.md
@@ -96,3 +96,7 @@ You can then render the text and selection in the view, using the information pr
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- [Using the EditContext API](/en-US/docs/Web/API/EditContext_API/Guide)
diff --git a/files/en-us/web/api/element/ariaatomic/index.md b/files/en-us/web/api/element/ariaatomic/index.md
index 696ddec7cd7406a..ffef6cd175e5ac2 100644
--- a/files/en-us/web/api/element/ariaatomic/index.md
+++ b/files/en-us/web/api/element/ariaatomic/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaAtomic
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaAtomic`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-atomic`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-atomic) attribute, which indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the [`aria-relevant`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) attribute.
 
diff --git a/files/en-us/web/api/element/ariaautocomplete/index.md b/files/en-us/web/api/element/ariaautocomplete/index.md
index 5dfe616fe9cbe11..b0119ec6261e680 100644
--- a/files/en-us/web/api/element/ariaautocomplete/index.md
+++ b/files/en-us/web/api/element/ariaautocomplete/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaAutoComplete
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaAutoComplete`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-autocomplete`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete) attribute, which indicates whether inputting text could trigger display of one or more predictions of the user's intended value for a combobox, searchbox, or textbox and specifies how predictions would be presented if they were made.
 
diff --git a/files/en-us/web/api/element/ariabusy/index.md b/files/en-us/web/api/element/ariabusy/index.md
index 9852fecc1a701f2..f1604ae29f0f284 100644
--- a/files/en-us/web/api/element/ariabusy/index.md
+++ b/files/en-us/web/api/element/ariabusy/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaBusy
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaBusy`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-busy`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy) attribute, which indicates whether an element is being modified, as assistive technologies may want to wait until the modifications are complete before exposing them to the user.
 
diff --git a/files/en-us/web/api/element/ariachecked/index.md b/files/en-us/web/api/element/ariachecked/index.md
index 6f06aed9d4f71ab..3c4bef725ec05b5 100644
--- a/files/en-us/web/api/element/ariachecked/index.md
+++ b/files/en-us/web/api/element/ariachecked/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaChecked
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaChecked`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-checked`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked) attribute, which indicates the current "checked" state of checkboxes, radio buttons, and other widgets that have a checked state.
 
diff --git a/files/en-us/web/api/element/ariacolcount/index.md b/files/en-us/web/api/element/ariacolcount/index.md
index 128ff3aadf72e4e..c48a42e86599733 100644
--- a/files/en-us/web/api/element/ariacolcount/index.md
+++ b/files/en-us/web/api/element/ariacolcount/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaColCount
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaColCount`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-colcount`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colcount) attribute, which defines the number of columns in a table, grid, or treegrid.
 
diff --git a/files/en-us/web/api/element/ariacolindex/index.md b/files/en-us/web/api/element/ariacolindex/index.md
index 39212892c2449e7..c244d4281978a3f 100644
--- a/files/en-us/web/api/element/ariacolindex/index.md
+++ b/files/en-us/web/api/element/ariacolindex/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaColIndex
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaColIndex`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-colindex`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colindex) attribute, which defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
 
diff --git a/files/en-us/web/api/element/ariacolspan/index.md b/files/en-us/web/api/element/ariacolspan/index.md
index 118bafb5dbb896e..7047d1a7a635beb 100644
--- a/files/en-us/web/api/element/ariacolspan/index.md
+++ b/files/en-us/web/api/element/ariacolspan/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaColSpan
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaColSpan`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-colspan`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colspan) attribute, which defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
 
diff --git a/files/en-us/web/api/element/ariacurrent/index.md b/files/en-us/web/api/element/ariacurrent/index.md
index 8506505a86b15f2..4b33151c493fb35 100644
--- a/files/en-us/web/api/element/ariacurrent/index.md
+++ b/files/en-us/web/api/element/ariacurrent/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaCurrent
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaCurrent`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-current`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) attribute, which indicates the element that represents the current item within a container or set of related elements.
 
diff --git a/files/en-us/web/api/element/ariadescription/index.md b/files/en-us/web/api/element/ariadescription/index.md
index 1315e01d348dd0c..7da963319e428a5 100644
--- a/files/en-us/web/api/element/ariadescription/index.md
+++ b/files/en-us/web/api/element/ariadescription/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaDescription
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaDescription`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-description`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-description) attribute, which defines a string value that describes or annotates the current element.
 
diff --git a/files/en-us/web/api/element/ariadisabled/index.md b/files/en-us/web/api/element/ariadisabled/index.md
index 18bb6b7177dbd99..6b3bedfb8d1c514 100644
--- a/files/en-us/web/api/element/ariadisabled/index.md
+++ b/files/en-us/web/api/element/ariadisabled/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaDisabled
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaDisabled`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-disabled`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) attribute, which indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
 
diff --git a/files/en-us/web/api/element/ariaexpanded/index.md b/files/en-us/web/api/element/ariaexpanded/index.md
index 38b4e0c557049a8..09430400c0fa772 100644
--- a/files/en-us/web/api/element/ariaexpanded/index.md
+++ b/files/en-us/web/api/element/ariaexpanded/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaExpanded
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaExpanded`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-expanded`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) attribute, which indicates whether a grouping element owned or controlled by this element is expanded or collapsed.
 
diff --git a/files/en-us/web/api/element/ariahaspopup/index.md b/files/en-us/web/api/element/ariahaspopup/index.md
index 3b8be089225c5a1..e70e83b0b900e89 100644
--- a/files/en-us/web/api/element/ariahaspopup/index.md
+++ b/files/en-us/web/api/element/ariahaspopup/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaHasPopup
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaHasPopup`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-haspopup`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup) attribute, which indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
 
diff --git a/files/en-us/web/api/element/ariahidden/index.md b/files/en-us/web/api/element/ariahidden/index.md
index 3a8b9f753919b8e..a4addd53aa49c68 100644
--- a/files/en-us/web/api/element/ariahidden/index.md
+++ b/files/en-us/web/api/element/ariahidden/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaHidden
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaHidden`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-hidden`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden)) attribute, which indicates whether the element is exposed to an accessibility API.
 
diff --git a/files/en-us/web/api/element/ariakeyshortcuts/index.md b/files/en-us/web/api/element/ariakeyshortcuts/index.md
index b8a76fa02c5c94f..36dfc38d7e7709e 100644
--- a/files/en-us/web/api/element/ariakeyshortcuts/index.md
+++ b/files/en-us/web/api/element/ariakeyshortcuts/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaKeyShortcuts
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaKeyShortcuts`** property of the {{domxref("Element")}} interface reflects the value of the `aria-keyshortcuts` attribute, which indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
 
diff --git a/files/en-us/web/api/element/arialabel/index.md b/files/en-us/web/api/element/arialabel/index.md
index 2824b313de6a393..76d267f7c3a6325 100644
--- a/files/en-us/web/api/element/arialabel/index.md
+++ b/files/en-us/web/api/element/arialabel/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaLabel
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaLabel`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute, which defines a string value that labels the current element.
 
diff --git a/files/en-us/web/api/element/arialevel/index.md b/files/en-us/web/api/element/arialevel/index.md
index 29a23f6d555970e..fc41732e1af5c7d 100644
--- a/files/en-us/web/api/element/arialevel/index.md
+++ b/files/en-us/web/api/element/arialevel/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaLevel
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaLevel`** property of the {{domxref("Element")}} interface reflects the value of the `aria-level` attribute, which defines the hierarchical level of an element within a structure.
 
diff --git a/files/en-us/web/api/element/arialive/index.md b/files/en-us/web/api/element/arialive/index.md
index 36b369dc09249a8..3e063dbdf373edc 100644
--- a/files/en-us/web/api/element/arialive/index.md
+++ b/files/en-us/web/api/element/arialive/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaLive
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaLive`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-live`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live) attribute, which indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the [live region](/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions).
 
diff --git a/files/en-us/web/api/element/ariamodal/index.md b/files/en-us/web/api/element/ariamodal/index.md
index 745484d84090b54..daa03746e0f27e5 100644
--- a/files/en-us/web/api/element/ariamodal/index.md
+++ b/files/en-us/web/api/element/ariamodal/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaModal
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaModal`** property of the {{domxref("Element")}} interface reflects the value of the `aria-modal` attribute, which indicates whether an element is modal when displayed. Applying the `aria-modal` property to an element with `role="dialog"` replaces the technique of using aria-hidden on the background for informing assistive technologies that content outside a dialog is inert.
 
diff --git a/files/en-us/web/api/element/ariamultiline/index.md b/files/en-us/web/api/element/ariamultiline/index.md
index 6fabd984688a685..2957923813cb50a 100644
--- a/files/en-us/web/api/element/ariamultiline/index.md
+++ b/files/en-us/web/api/element/ariamultiline/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaMultiLine
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaMultiLine`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-multiline`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiline) attribute, which indicates whether a text box accepts multiple lines of input or only a single line.
 
diff --git a/files/en-us/web/api/element/ariamultiselectable/index.md b/files/en-us/web/api/element/ariamultiselectable/index.md
index e6bd954a075a84b..f8a2110b90ce3fe 100644
--- a/files/en-us/web/api/element/ariamultiselectable/index.md
+++ b/files/en-us/web/api/element/ariamultiselectable/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaMultiSelectable
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaMultiSelectable`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-multiselectable`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable) attribute, which indicates that the user may select more than one item from the current selectable descendants.
 
diff --git a/files/en-us/web/api/element/ariaorientation/index.md b/files/en-us/web/api/element/ariaorientation/index.md
index b19e5865ecea2af..b6eed09266a6d7c 100644
--- a/files/en-us/web/api/element/ariaorientation/index.md
+++ b/files/en-us/web/api/element/ariaorientation/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaOrientation
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaOrientation`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-orientation`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-orientation) attribute, which indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
 
diff --git a/files/en-us/web/api/element/ariaplaceholder/index.md b/files/en-us/web/api/element/ariaplaceholder/index.md
index 9a0813aa71e9009..5818af7e8f816f9 100644
--- a/files/en-us/web/api/element/ariaplaceholder/index.md
+++ b/files/en-us/web/api/element/ariaplaceholder/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaPlaceholder
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaPlaceholder`** property of the {{domxref("Element")}} interface reflects the value of the `aria-placeholder` attribute, which defines a short hint intended to aid the user with data entry when the control has no value.
 
diff --git a/files/en-us/web/api/element/ariaposinset/index.md b/files/en-us/web/api/element/ariaposinset/index.md
index 76b4f7c6f4dec33..86d9112006a794f 100644
--- a/files/en-us/web/api/element/ariaposinset/index.md
+++ b/files/en-us/web/api/element/ariaposinset/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaPosInSet
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaPosInSet`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-posinset`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-posinset) attribute, which defines an element's number or position in the current set of listitems or treeitems.
 
diff --git a/files/en-us/web/api/element/ariapressed/index.md b/files/en-us/web/api/element/ariapressed/index.md
index d1f921ba7d77a18..c13bc3e6d08dfad 100644
--- a/files/en-us/web/api/element/ariapressed/index.md
+++ b/files/en-us/web/api/element/ariapressed/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaPressed
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaPressed`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-pressed`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) attribute, which indicates the current "pressed" state of toggle buttons.
 
diff --git a/files/en-us/web/api/element/ariareadonly/index.md b/files/en-us/web/api/element/ariareadonly/index.md
index 39808182233fbf2..11509d412007845 100644
--- a/files/en-us/web/api/element/ariareadonly/index.md
+++ b/files/en-us/web/api/element/ariareadonly/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaReadOnly
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaReadOnly`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-readonly`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-readonly) attribute, which indicates that the element is not editable, but is otherwise operable.
 
diff --git a/files/en-us/web/api/element/ariarequired/index.md b/files/en-us/web/api/element/ariarequired/index.md
index fc76ebd36cb221d..1180c1bef3cae51 100644
--- a/files/en-us/web/api/element/ariarequired/index.md
+++ b/files/en-us/web/api/element/ariarequired/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaRequired
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaRequired`** property of the {{domxref("Element")}} interface reflects the value of the `aria-required` attribute, which indicates that user input is required on the element before a form may be submitted.
 
diff --git a/files/en-us/web/api/element/ariaroledescription/index.md b/files/en-us/web/api/element/ariaroledescription/index.md
index f2248f2ffbdd377..2128ed00042cd74 100644
--- a/files/en-us/web/api/element/ariaroledescription/index.md
+++ b/files/en-us/web/api/element/ariaroledescription/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaRoleDescription
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaRoleDescription`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-roledescription`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-roledescription) attribute, which defines a human-readable, author-localized description for the role of an element.
 
diff --git a/files/en-us/web/api/element/ariarowcount/index.md b/files/en-us/web/api/element/ariarowcount/index.md
index 5e058ad0d9198d4..52427016e3f1f91 100644
--- a/files/en-us/web/api/element/ariarowcount/index.md
+++ b/files/en-us/web/api/element/ariarowcount/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaRowCount
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaRowCount`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-rowcount`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowcount) attribute, which defines the total number of rows in a table, grid, or treegrid.
 
diff --git a/files/en-us/web/api/element/ariarowindex/index.md b/files/en-us/web/api/element/ariarowindex/index.md
index 87c06a84ce8a14f..f9edcd21171a23d 100644
--- a/files/en-us/web/api/element/ariarowindex/index.md
+++ b/files/en-us/web/api/element/ariarowindex/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaRowIndex
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaRowIndex`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-rowindex`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex) attribute, which defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
 
diff --git a/files/en-us/web/api/element/ariarowspan/index.md b/files/en-us/web/api/element/ariarowspan/index.md
index b7fae8df111979a..4269927e0c8b1f8 100644
--- a/files/en-us/web/api/element/ariarowspan/index.md
+++ b/files/en-us/web/api/element/ariarowspan/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaRowSpan
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaRowSpan`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-rowspan`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowspan) attribute, which defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
 
diff --git a/files/en-us/web/api/element/ariaselected/index.md b/files/en-us/web/api/element/ariaselected/index.md
index 5bc686bbdc56912..545a447140b016b 100644
--- a/files/en-us/web/api/element/ariaselected/index.md
+++ b/files/en-us/web/api/element/ariaselected/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaSelected
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaSelected`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-selected`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) attribute, which indicates the current "selected" state of elements that have a selected state.
 
diff --git a/files/en-us/web/api/element/ariasetsize/index.md b/files/en-us/web/api/element/ariasetsize/index.md
index 499b2ad719f5a70..f8c25efe6ec5d41 100644
--- a/files/en-us/web/api/element/ariasetsize/index.md
+++ b/files/en-us/web/api/element/ariasetsize/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaSetSize
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaSetSize`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-setsize`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-setsize) attribute, which defines the number of items in the current set of listitems or treeitems.
 
diff --git a/files/en-us/web/api/element/ariasort/index.md b/files/en-us/web/api/element/ariasort/index.md
index 323eab037a879a8..a1e2418a669e344 100644
--- a/files/en-us/web/api/element/ariasort/index.md
+++ b/files/en-us/web/api/element/ariasort/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaSort
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaSort`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-sort`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort) attribute, which indicates if items in a table or grid are sorted in ascending or descending order.
 
diff --git a/files/en-us/web/api/element/ariavaluemax/index.md b/files/en-us/web/api/element/ariavaluemax/index.md
index 66f4c1c8bcefcf4..7d1b1f1da37070c 100644
--- a/files/en-us/web/api/element/ariavaluemax/index.md
+++ b/files/en-us/web/api/element/ariavaluemax/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaValueMax
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaValueMax`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-valuemax`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax) attribute, which defines the maximum allowed value for a range widget.
 
diff --git a/files/en-us/web/api/element/ariavaluemin/index.md b/files/en-us/web/api/element/ariavaluemin/index.md
index fe85a13295f5b75..d74a4a29496c3a5 100644
--- a/files/en-us/web/api/element/ariavaluemin/index.md
+++ b/files/en-us/web/api/element/ariavaluemin/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaValueMin
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaValueMin`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-valuemin`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin) attribute, which defines the minimum allowed value for a range widget.
 
diff --git a/files/en-us/web/api/element/ariavaluenow/index.md b/files/en-us/web/api/element/ariavaluenow/index.md
index 7a70cb37f857319..e2e239cc36857ca 100644
--- a/files/en-us/web/api/element/ariavaluenow/index.md
+++ b/files/en-us/web/api/element/ariavaluenow/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaValueNow
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaValueNow`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-valuenow`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow) attribute, which defines the current value for a range widget.
 
diff --git a/files/en-us/web/api/element/ariavaluetext/index.md b/files/en-us/web/api/element/ariavaluetext/index.md
index 0ab6c71453bfd8c..e2e66075595c87c 100644
--- a/files/en-us/web/api/element/ariavaluetext/index.md
+++ b/files/en-us/web/api/element/ariavaluetext/index.md
@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.Element.ariaValueText
 ---
 
-{{DefaultAPISidebar("DOM")}}
+{{APIRef("DOM")}}
 
 The **`ariaValueText`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-valuetext`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext) attribute, which defines the human-readable text alternative of aria-valuenow for a range widget.
 
diff --git a/files/en-us/web/api/element/attachshadow/index.md b/files/en-us/web/api/element/attachshadow/index.md
index db707db983e6cad..52d04466007646d 100644
--- a/files/en-us/web/api/element/attachshadow/index.md
+++ b/files/en-us/web/api/element/attachshadow/index.md
@@ -118,7 +118,7 @@ Returns a {{domxref("ShadowRoot")}} object.
   - : This may can be thrown when you try to attach a shadow root to an element:
 
     - outside the HTML namespace or that can't have a shadow attached to it.
-    - where the element definition static property `disabledFeatures` has been given a value of `"shadow"` .
+    - where the element definition static property `disabledFeatures` has been given a value of `"shadow"`.
     - that already has a shadow root that was not created declaratively.
     - that has a [declarative shadow root](/en-US/docs/Web/HTML/Element/template#declarative_shadow_dom) but the specified `mode` does not match the existing mode.
 
@@ -211,4 +211,4 @@ customElements.define("my-custom-element", MyCustomElement);
 - {{domxref("ShadowRoot.delegatesFocus")}}
 - {{domxref("ShadowRoot.slotAssignment")}}
 - Declaratively attach a shadow root with the [`shadowrootmode`](/en-US/docs/Web/HTML/Element/template#shadowrootmode) attribute of the [`