[pull] main from mdn:main

files/en-us/web/api/canvasrenderingcontext2d/lang/index.md

@@ -35,8 +35,9 @@ When the `inherit` value is used, the language of the canvas context is inherite
 
 Due to technical limitations, the `inherit` value behaves differently for on-screen and off-screen canvases:
 
-- For on-screen canvases, the `lang` value is inherited when the associated `CanvasRenderingContext2D` object is first created; the inherited `lang` value then changes dynamically if the `lang` attribute value is updated.
-- For off-screen canvases, the `lang` value is inherited when the associated `OffscreenCanvasRenderingContext2D` object is first created, and then fixed for the lifetime of the {{domxref("OffscreenCanvas")}}. It **does not** change if the `lang` attribute value is updated. Because of this, the language of an off-screen canvas can only be changed by setting the `lang` value explicitly.
+- For on-screen canvases, the `lang` value of the context is inherited when the associated `CanvasRenderingContext2D` object is first created, and is updated dynamically if the `lang` attribute of the associated canvas is updated (either directly or by inheritance).
+- For off-screen canvases, the `lang` value is inherited when the associated `OffscreenCanvasRenderingContext2D` object is first created "as a snapshot"; subsequent updates to the `lang` attribute from which the offscreen context inherited its value do not change its `lang` attribute.
+  For this reason, the language of an off-screen canvas can only be changed by setting its `lang` value explicitly.
 
 ## Examples
 

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

@@ -165,10 +165,6 @@ These interfaces offer access to the browser window and document that contain th
 - {{DOMxRef("Navigator")}}
 - {{DOMxRef("Window")}}
 
-#### Deprecated web app and browser integration interfaces
-
-- {{DOMxRef("External")}} {{deprecated_inline}}
-
 #### Obsolete web app and browser integration interfaces
 
 - {{DOMxRef("Plugin")}} {{deprecated_inline}}

files/en-us/web/api/indexeddb_api/basic_terminology/index.md

@@ -132,7 +132,7 @@ A key that is stored as part of the stored value. It is found using a _key path_
 
 A data value by which stored values are organized and retrieved in the object store. The object store can derive the key from one of three sources: a _[key generator](#key_generator)_, a _[key path](#key_path)_, or an explicitly specified value. The key must be of a data type that has a number that is greater than the one before it. Each record in an object store must have a key that is unique within the same store, so you cannot have multiple records with the same key in a given object store.
 
-A key can be one of the following types: [string](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), [date](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), float, a binary blob, and [array](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array). For arrays, the key can range from an empty value to infinity. And you can include an array within an array.
+A key can be one of the following types: [string](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), [date](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), float, binary data (represented by an [`ArrayBuffer`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) or a [`TypedArray`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) view such as a [`Uint8Array`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array)), and [array](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array). The length of an array key can range from `0` (an empty array) to infinity, and you can include an array within an array.
 
 Alternatively, you can also look up records in an object store using the _[index](#index)._
 

files/en-us/web/api/speechrecognition/available_static/index.md

@@ -35,7 +35,7 @@ available(options)
 
 ### Return value
 
-A {{domxref("Promise")}} that resolves with an enumerated value indicating the availability of the specified languages for speech recognition.
+A {{jsxref("Promise")}} that resolves with an enumerated value indicating the availability of the specified languages for speech recognition.
 
 Possible values include:
 

files/en-us/web/api/speechrecognition/install_static/index.md

@@ -31,7 +31,7 @@ install(options)
 
 ### Return value
 
-A {{domxref("Promise")}} that resolves with a boolean value indicating whether the language pack was installed successfully. The conditions that result in each return value are as follows:
+A {{jsxref("Promise")}} that resolves with a boolean value indicating whether the language pack was installed successfully. The conditions that result in each return value are as follows:
 
 - `true`
   - : All installation attempts succeeded for the requested languages, or the languages were already installed.

files/en-us/web/css/reference/properties/animation/index.md

@@ -124,17 +124,15 @@ When no `animation-duration` value is specified in the `animation` shorthand pro
 
 ### animation-timeline
 
-The current implementations of `animation` are reset-only: if no `<animation-timeline>` is included in the `animation` shorthand, the shorthand declaration will reset any previously-declared `animation-timeline` values to `auto`.
+If no `<animation-timeline>` is included in the `animation` shorthand, the shorthand declaration will reset any previously-declared `animation-timeline` values to `auto`, which sets the timeline to the default {{domxref("documentTimeline")}}.
 
-By default, the `animation-timeline` is the {{domxref("documentTimeline")}}. If a value is included, but the user-agent doesn't support `<animation-timeline>` values within the shorthand, the declaration is invalid and ignored.
+If an `<animation-timeline>` value is included, but the user-agent doesn't support `<animation-timeline>` values within the shorthand, the entire `animation` declaration is invalid and ignored. For this reason, when creating [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations), you need to declare the `animation-timeline` property after declaring any `animation` shorthand for it to take effect.
 
-This means that, when creating [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations), you need to declare the `animation-timeline` property after declaring any `animation` shorthand for it to take effect.
-
-Alternatively, the `animation-timeline` can be used within the `animation` shorthand within a CSS {{cssxref("@supports")}} block, such as:
+Alternatively, the `<animation-timeline>` can be set within the `animation` shorthand within a CSS {{cssxref("@supports")}} block, such as:
 
 ```css
 @supports (animation: view()) {
-  /* CSS for browsers that support setting <animation-timeline> within the animation shorthand */
+  /* CSS for browsers supporting <animation-timeline> within `animation` shorthand */
 }
 ```
 
@@ -144,15 +142,15 @@ In the case of the `animation-fill-mode` [forwards](/en-US/docs/Web/CSS/Referenc
 
 ## Accessibility
 
-Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.
+Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for vestibular disorders, epilepsy, and migraine and scotopic sensitivity.
 
-Consider providing a mechanism for pausing or disabling animation as well as using the [Reduced Motion Media Query](/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) to create a complimentary experience for users who have expressed a preference for reduced animated experiences.
+Consider providing a mechanism for pausing or disabling animation as well as using the [reduced motion `@media` query](/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) to create a complimentary experience for users who have expressed a preference for reduced animated experiences.
 
-- [Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article](https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/)
-- [An Introduction to the Reduced Motion Media Query | CSS-Tricks](https://css-tricks.com/introduction-reduced-motion-media-query/)
-- [Responsive Design for Motion | WebKit](https://webkit.org/blog/7551/responsive-design-for-motion/)
-- [MDN Understanding WCAG, Guideline 2.2 explanations](/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Operable#guideline_2.2_%e2%80%94_enough_time_provide_users_enough_time_to_read_and_use_content)
-- [Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html)
+- [Designing Safer Web Animation For Motion Sensitivity](https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/) via A List Apart (2015)
+- [An Introduction to the Reduced Motion Media Query](https://css-tricks.com/introduction-reduced-motion-media-query/) via CSS-Tricks (2017)
+- [Responsive Design for Motion](https://webkit.org/blog/7551/responsive-design-for-motion/) via WebKit (2017)
+- [Understanding WCAG, Guideline 2.2 — Enough Time: Provide users enough time to read and use content](/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Operable#guideline_2.2_%e2%80%94_enough_time_provide_users_enough_time_to_read_and_use_content)
+- [Understanding WCAG Success Criterion 2.2.2: Pause, Stop, Hide](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide) via W3C (2026)
 
 ## Formal definition
 
@@ -165,55 +163,25 @@ Consider providing a mechanism for pausing or disabling animation as well as usi
 ## Examples
 
 > [!NOTE]
-> Animating [CSS Box Model](/en-US/docs/Web/CSS/Guides/Box_model) properties is discouraged. Animating any box model property is inherently CPU intensive; consider animating the [transform](/en-US/docs/Web/CSS/Reference/Properties/transform) property instead.
+> Animating [CSS box model](/en-US/docs/Web/CSS/Guides/Box_model) properties is discouraged as it leads to layout reflow and repaints. Animating any box model property is inherently CPU-intensive; consider animating the [transform](/en-US/docs/Web/CSS/Reference/Properties/transform) property instead.
 
-### Sun Rise
+### Basic usage: a sunrise
 
-Here we animate a yellow sun across a light blue sky. The sun rises
+In this example, we demonstrate basic usage of the `animate` shorthand by animating a yellow sun across a light blue sky. The sun rises
 to the center of the viewport and then falls out of sight.
 
-```html
-<div class="sun"></div>
-```
-
-```css
-:root {
-  overflow: hidden; /* hides any part of the sun below the horizon */
-  background-color: lightblue;
-  display: flex;
-  justify-content: center; /* centers the sun in the background */
-}
-
-.sun {
-  background-color: yellow;
-  border-radius: 50%; /* creates a circular background */
-  height: 100vh; /* makes the sun the size of the viewport */
-  aspect-ratio: 1 / 1;
-  animation: 4s linear 0s infinite alternate sun-rise;
-}
-
-@keyframes sun-rise {
-  from {
-    /* pushes the sun down past the viewport */
-    transform: translateY(110vh);
-  }
-  to {
-    /* returns the sun to its default position */
-    transform: translateY(0);
-  }
-}
-```
-
-{{EmbedLiveSample('Sun_Rise')}}
+#### HTML
 
-### Animating Multiple Properties
-
-Adding onto the sun animation in the previous example, we add a second animation changing the color of the sun as it rises and sets. The sun starts off dark red when it is below the horizon and changes to a bright orange as it reaches the top.
+We include a single {{htmlelement("div")}} element to represent our sun.
 
 ```html
 <div class="sun"></div>
 ```
 
+#### CSS
+
+We start by creating the sun and the sky. The sky is the {{cssxref(":root")}} of the HTML document. We hide any content that is outside the viewport, which in our case will be any part of the sun below the horizon, by setting the {{cssxref("overflow")}} to hidden. We also use the {{cssxref("justify-content")}} property to center the sun in the background. We make the sun yellow, declare its {{cssxref("height")}} to be the height of the viewport (`100vh`), and set its width to equal its height by setting the {{cssxref("aspect-ratio")}} to `1`. We turn the square `<div>` into a circle using the {{cssxref("border-radius")}} property.
+
 ```css
 :root {
   overflow: hidden;
@@ -226,38 +194,45 @@ Adding onto the sun animation in the previous example, we add a second animation
   background-color: yellow;
   border-radius: 50%;
   height: 100vh;
-  aspect-ratio: 1 / 1;
-  animation: 4s linear 0s infinite alternate animating-multiple-properties;
+  aspect-ratio: 1;
+  animation: 4s linear 0s infinite alternate sunrise;
 }
+```
 
-/* it is possible to animate multiple properties in a single animation */
-@keyframes animating-multiple-properties {
+Next, we define some animation {{cssxref("@keyframes")}} that will push the element on which they are applied down past the viewport and then return the element to its default position using [CSS transforms](/en-US/docs/Web/CSS/Guides/Transforms):
+
+```css
+@keyframes sunrise {
   from {
     transform: translateY(110vh);
-    background-color: red;
-    filter: brightness(75%);
   }
   to {
     transform: translateY(0);
-    background-color: orange;
-    /* unset properties i.e. 'filter' will revert to default values */
   }
 }
 ```
 
-{{EmbedLiveSample('Animating Multiple Properties')}}
+The last step is to apply the animation! We use the `animation` shorthand property to apply the `sunrise` keyframe animation to the `.sun` `<div>`. The animation is set to play for infinite iterations, with each one lasting 4 seconds; the animation direction alternates with each iteration:
 
-### Applying Multiple Animations
+```css
+.sun {
+  animation: 4s linear 0s infinite alternate sunrise;
+}
+```
 
-Here is a sun that rises and falls on a lightblue background. The sun
-gradually rotates through a rainbow of colors. The timing of the sun's
-position and color are independent.
+#### Results
 
-```html
+{{EmbedLiveSample('Basic usage: a sunrise')}}
+
+### Applying multiple animations
+
+This example demonstrates applying multiple animations to a single element. Expanding on the previous example, with a sun that rises and falls on a light blue background, here we will gradually rotate the sun through a rainbow of colors. The timing of the sun's position and color are independent.
+
+```html hidden
 <div class="sun"></div>
 ```
 
-```css
+```css hidden
 :root {
   overflow: hidden;
   background-color: lightblue;
@@ -270,21 +245,21 @@ position and color are independent.
   border-radius: 50%;
   height: 100vh;
   aspect-ratio: 1 / 1;
-  /* multiple animations are separated by commas, each animation's parameters are set independently */
-  animation:
-    4s linear 0s infinite alternate rise,
-    24s linear 0s infinite psychedelic;
 }
 
-@keyframes rise {
+@keyframes sunrise {
   from {
     transform: translateY(110vh);
   }
   to {
     transform: translateY(0);
   }
 }
+```
+
+We include the same HTML and CSS as in the previous example, and add a second set of animation `@keyframes` to apply a {{cssxref("filter")}} that rotates the hue through all possible values using the [`hue-rotate()`](/en-US/docs/Web/CSS/Reference/Values/filter-function/hue-rotate) filter function:
 
+```css
 @keyframes psychedelic {
   from {
     filter: hue-rotate(0deg);
@@ -295,20 +270,29 @@ position and color are independent.
 }
 ```
 
-{{EmbedLiveSample('Applying Multiple Animations')}}
+We then apply the two animations to our sun. Multiple animations are separated by commas, and each animation's parameters are set independently:
 
-### Cascading Multiple Animations
+```css
+.sun {
+  animation:
+    4s linear 0s infinite alternate sunrise,
+    24s linear 0s infinite psychedelic;
+}
+```
 
-Here is a yellow sun on a lightblue background. The sun bounces between the
-left and right sides of the viewport. The sun remains in the viewport even
-though a rise animation is defined. The rise animation's transform property
-is 'overwritten' by the bounce animation.
+#### Results
 
-```html
+{{EmbedLiveSample('Applying multiple animations')}}
+
+### Cascading multiple animations
+
+This example demonstrates what happens when multiple animations define values for the same property. This example expands upon the [basic usage](#basic_usage_a_sunrise) example, with two animations applied that both set a {{cssxref("transform")}} value.
+
+```html hidden
 <div class="sun"></div>
 ```
 
-```css
+```css hidden
 :root {
   overflow: hidden;
   background-color: lightblue;
@@ -321,17 +305,13 @@ is 'overwritten' by the bounce animation.
   border-radius: 50%;
   height: 100vh;
   aspect-ratio: 1 / 1;
-  /*
-    animations declared later in the cascade will override the
-    properties of previously declared animations
-  */
-  /* bounce 'overwrites' the transform set by rise, hence the sun only moves horizontally */
-  animation:
-    4s linear 0s infinite alternate rise,
-    4s linear 0s infinite alternate bounce;
 }
+```
+
+We use the same HTML and CSS as in the first example, including the original `sunrise` animation, and a second animation named `bounce`. The two animations declare values for the same property:
 
-@keyframes rise {
+```css
+@keyframes sunrise {
   from {
     transform: translateY(110vh);
   }
@@ -350,9 +330,24 @@ is 'overwritten' by the bounce animation.
 }
 ```
 
+We apply both animations to the sun. When two animations apply different values to the same property, animations declared later in the cascade override previously-declared animations. In this case, the `transform` value on the `bounce` animation "wins" the [cascade](/en-US/docs/Web/CSS/Guides/Cascade/Introduction#css_animations_and_the_cascade), and overrides the transform set by `sunrise`, so the sun will only move horizontally.
+
+```css
+.sun {
+  animation:
+    4s linear 0s infinite alternate sunrise,
+    4s linear 0s infinite alternate bounce;
+}
+```
+
+#### Results
+
 {{EmbedLiveSample('Cascading Multiple Animations')}}
 
-See [Using CSS animations](/en-US/docs/Web/CSS/Guides/Animations/Using#examples) for additional examples.
+The sun bounces between the
+left- and right-hand sides of the viewport. The sun remains in the viewport even
+though the `sunrise` animation is defined. The `sunrise` animation's transform property
+is overridden by the bounce animation.
 
 ## Specifications