Merge remote-tracking branch 'origin/add-passkeys-guide' into add-passkeys-guide

* origin/add-passkeys-guide:
  Clarify fetch() error handling behavior for Response (mdn#42497)
  Add code example to Closure glossary entry (mdn#42477)
  42252 add new relative units ff release (mdn#42470)
  Remove duplicated word (mdn#42496)
  42252 add new relative units (mdn#42469)
  TrustedTypes: Range.createContextualFragment() (mdn#42493)
  Fix CSS, HTML, and HTTP landing pages to match sidebar content and order (mdn#42460)
  TT: CSP trusted types/require-trusted... fixes (mdn#42461)
  Improve console output formatting in Recursion glossary (mdn#42478)
  Add Sec-CH-Width + consistency fixes (mdn#42453)
  webextensions/manifest.json/options_page: typo (mdn#42394)
  webextensions/api/tabs/onupdated: Fix section link (mdn#42393)
  fix: add missing closing parenthesis (mdn#42482)
  docs: mark srcData as required in bufferSubData (mdn#42483)
  docs(learn): remove invalid type attribute from video example (mdn#42479)
  Drop 'read-only' from role (mdn#42474)
  Fix: Update bufferSubData parameters to match WebGL 1 spec mdn#42315 (mdn#42411)
  chore: Replace links with `cssxref` macro in the learn area (mdn#42446)

Author: wbamberg

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

@@ -5,7 +5,25 @@ page-type: glossary-definition
 sidebar: glossarysidebar
 ---
 
-In computer programming, a **closure** is a technique for implementing lexically {{glossary("scope", "scoped")}} name binding in a language with {{glossary("first-class function", "first-class functions")}}. In {{glossary("JavaScript")}}, a {{glossary("function")}} creates a closure context.
+In computer programming, a **closure** is a technique for implementing lexically {{glossary("scope", "scoped")}} name binding in a language with {{glossary("first-class function", "first-class functions")}}.
+
+In {{glossary("JavaScript")}}, a {{glossary("function")}} creates a closure context.
+As shown by the following code, the inner function maintains access to the `count` variable even after `createCounter()` has finished executing.
+
+```js
+function createCounter() {
+  let count = 0;
+  return function () {
+    count += 1;
+    return count;
+  };
+}
+
+const counter = createCounter();
+console.log(counter()); // 1
+console.log(counter()); // 2
+console.log(counter()); // 3
+```
 
 ## See also
 

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

@@ -55,6 +55,8 @@ console.log(getMaxCallStackSize(0));
 
 ### Common usage examples
 
+#### Factorial
+
 ```js
 const factorial = (n) => {
   if (n === 0) {
@@ -66,12 +68,16 @@ console.log(factorial(10));
 // 3628800
 ```
 
+#### Fibonacci
+
 ```js
 const fibonacci = (n) => (n <= 2 ? 1 : fibonacci(n - 1) + fibonacci(n - 2));
 console.log(fibonacci(10));
 // 55
 ```
 
+#### Reduce
+
 ```js
 const reduce = (fn, acc, [cur, ...rest]) =>
   cur === undefined ? acc : reduce(fn, fn(acc, cur), rest);

files/en-us/learn_web_development/core/css_layout/flexbox/index.md

@@ -696,7 +696,7 @@ Have a look at what effect this has and remove it again when you've finished.
 - The value we've used above, `space-around`, is useful — it distributes all the items evenly along the main axis with a bit of space left at either end.
 - There is another value, `space-between`, which is very similar to `space-around` except that it doesn't leave any space at either end.
 
-The [`justify-items`](/en-US/docs/Web/CSS/Reference/Properties/justify-items) property is ignored in flexbox layouts.
+The {{cssxref("justify-items")}} property is ignored in flexbox layouts.
 
 We'd like to encourage you to play with these values to see how they work before you continue.
 

files/en-us/learn_web_development/core/css_layout/responsive_design/index.md

@@ -395,7 +395,7 @@ h1 {
 
 The problem with doing the above is that the user loses the ability to zoom any text set using the `vw` unit, as that text is always related to the size of the viewport. **Therefore you should never set text using viewport units alone**.
 
-There is a solution, and it involves using [`calc()`](/en-US/docs/Web/CSS/Reference/Values/calc). If you add the `vw` unit to a value set using a fixed size such as `em`s or `rem`s then the text will still be zoomable. Essentially, the `vw` unit adds on top of that zoomed value:
+There is a solution, and it involves using {{cssxref("calc()")}}. If you add the `vw` unit to a value set using a fixed size such as `em`s or `rem`s then the text will still be zoomable. Essentially, the `vw` unit adds on top of that zoomed value:
 
 ```css
 h1 {

files/en-us/learn_web_development/core/css_layout/supporting_older_browsers/index.md

@@ -156,7 +156,7 @@ Now that you have worked through our articles on CSS layout, it's time to test y
 
 ## See also
 
-- [`@supports`](/en-US/docs/Web/CSS/Reference/At-rules/@supports) at-rule
+- {{cssxref("@supports")}} at-rule
 - [CSS at-rules](/en-US/docs/Web/CSS/Guides/Syntax/At-rules)
 - [Using feature queries](/en-US/docs/Web/CSS/Guides/Conditional_rules/Using_feature_queries)
 - [CSS conditional rules](/en-US/docs/Web/CSS/Guides/Conditional_rules) module

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

@@ -162,7 +162,7 @@ Installing shared assets, as we're about to do, isn't normally a required step f
 
 3. Next, find the [ember-cli-build.js](https://github.com/ember-cli/ember-cli/blob/master/packages/app-blueprint/files/ember-cli-build.js) file inside the todomvc directory (it's right there inside the root) and open it in your chosen code editor. ember-cli-build.js is responsible for configuring details about how your project is built — including bundling all your files together, asset minification, and creating sourcemaps — with reasonable defaults, so you don't typically need to worry about this file.
 
-   We will however add lines to the ember-cli-build.js file to import our shared CSS files, so that they become part of our build without having to explicitly [`@import`](/en-US/docs/Web/CSS/Reference/At-rules/@import) them into the `app.css` file (this would require URL rewrites at build time and therefore be less efficient and more complicated to set up).
+   We will however add lines to the ember-cli-build.js file to import our shared CSS files, so that they become part of our build without having to explicitly {{cssxref("@import")}} them into the `app.css` file (this would require URL rewrites at build time and therefore be less efficient and more complicated to set up).
 
 4. In `ember-cli-build.js`, find the following code:
 

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

@@ -51,9 +51,9 @@ To improve the experience for keyboard and assistive technology users, we should
 
 If you click the "All", "Active", or "Completed" filter buttons with your mouse, you _won't_ see a visible focus indicator, but you will do if you move between them with the <kbd>Tab</kbd> key on your keyboard. Don't worry — your code isn't broken!
 
-Our CSS file uses the [`:focus-visible`](/en-US/docs/Web/CSS/Reference/Selectors/:focus-visible) pseudo-class to provide custom styling for the focus indicator, and the browser uses a set of internal rules to determine when to show it to the user. Generally, the browser _will_ show a focus indicator in response to keyboard input, and _might_ show it in response to mouse input. `<button>` elements _don't_ show a focus indicator in response to mouse input, while `<input>` elements _do_.
+Our CSS file uses the {{cssxref(":focus-visible")}} pseudo-class to provide custom styling for the focus indicator, and the browser uses a set of internal rules to determine when to show it to the user. Generally, the browser _will_ show a focus indicator in response to keyboard input, and _might_ show it in response to mouse input. `<button>` elements _don't_ show a focus indicator in response to mouse input, while `<input>` elements _do_.
 
-The behavior of `:focus-visible` is more selective than the older [`:focus`](/en-US/docs/Web/CSS/Reference/Selectors/:focus) pseudo-class, with which you might be more familiar. `:focus` shows a focus indicator in many more situations, and you can use it instead of or in combination with `:focus-visible` if you prefer.
+The behavior of `:focus-visible` is more selective than the older {{cssxref(":focus")}} pseudo-class, with which you might be more familiar. `:focus` shows a focus indicator in many more situations, and you can use it instead of or in combination with `:focus-visible` if you prefer.
 
 ## Focusing between templates
 

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

@@ -107,7 +107,7 @@ btn.addEventListener("click", () => {
 The HTML {{HTMLElement("button")}} element will fire a `click` event when the user clicks it. We call the `addEventListener()` method on it to add an event listener; this takes two parameters:
 
 - the string `"click"`, to indicate that we want to listen to the `click` event. Buttons can fire lots of other events, such as [`"mouseover"`](/en-US/docs/Web/API/Element/mouseover_event) when the user moves their mouse over the button, or [`"keydown"`](/en-US/docs/Web/API/Element/keydown_event) when the user presses a key and the button is focused.
-- a function to call when the event happens. In our case, the defined anonymous function generates a random RGB color and sets the [`background-color`](/en-US/docs/Web/CSS/Reference/Properties/background-color) of the page [`<body>`](/en-US/docs/Web/HTML/Reference/Elements/body) to that color.
+- a function to call when the event happens. In our case, the defined anonymous function generates a random RGB color and sets the {{cssxref("background-color")}} of the page [`<body>`](/en-US/docs/Web/HTML/Reference/Elements/body) to that color.
 
 You could also create a separate named function, and reference that in the second parameter of `addEventListener()`, like this:
 

files/en-us/learn_web_development/core/structuring_content/splash_page/index.md

@@ -362,7 +362,6 @@ In this assessment we are presenting you with a mostly-finished splash page abou
 
 Just below the `<h1>`, add a `<video>` element that embeds our header video into the page. We'd like it to do the following:
 
-- Specify the [media type](/en-US/docs/Web/HTTP/Guides/MIME_types) of the video.
 - Autoplay the video on load (for this to work in at least some browsers, you'll also need to specify that the video should be muted).
 - Loop endlessly rather than playing once.
 - Preload the video content.
@@ -419,7 +418,6 @@ Your finished HTML should look something like this:
 
         <video
           src="https://mdn.github.io/shared-assets/videos/learn/bug_video_640.mp4"
-          type="video/mp4"
           autoplay
           loop
           muted

files/en-us/learn_web_development/core/styling_basics/advanced_styling_effects/index.md

@@ -176,7 +176,7 @@ In the example below we have used two different values for filter. The `first` i
 
 The second is `grayscale()`; by using a percentage we are setting how much color we want to be removed.
 
-Play with the percentage and pixel parameters in the example below to see how the images change. You could also swap the values for some others. Try `contrast(200%)`, `invert(100%)` or `hue-rotate(20deg)` on the live example above. Take a look at the MDN page for [`filter`](/en-US/docs/Web/CSS/Reference/Properties/filter) for many other options you could try.
+Play with the percentage and pixel parameters in the example below to see how the images change. You could also swap the values for some others. Try `contrast(200%)`, `invert(100%)` or `hue-rotate(20deg)` on the live example above. Take a look at the MDN page for {{cssxref("filter")}} for many other options you could try.
 
 ```html live-sample___filter
 <div class="wrapper">
@@ -230,7 +230,7 @@ img {
 
 {{EmbedLiveSample("filter", "", "260px")}}
 
-You can apply filters to any element and not just images. Some of the filter options available do very similar things to other CSS features, for example `drop-shadow()` works in a very similar way and gives a similar effect to [`box-shadow`](/en-US/docs/Web/CSS/Reference/Properties/box-shadow) or [`text-shadow`](/en-US/docs/Web/CSS/Reference/Properties/text-shadow). The really nice thing about filters however, is that they work on the exact shapes of the content inside the box, not just the box itself as one big chunk, so it is worth knowing the difference.
+You can apply filters to any element and not just images. Some of the filter options available do very similar things to other CSS features, for example `drop-shadow()` works in a very similar way and gives a similar effect to {{cssxref("box-shadow")}} or {{cssxref("text-shadow")}}. The really nice thing about filters however, is that they work on the exact shapes of the content inside the box, not just the box itself as one big chunk, so it is worth knowing the difference.
 
 In this next example we are applying our filter to a box, and comparing it to a box shadow. As you can see, the drop-shadow filter follows the exact shape of the text and border dashes. The box shadow just follows the square of the box.