[pull] main from mdn:main

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

@@ -41,8 +41,8 @@ To solve this challenge we are expecting you to create a simple website project,
            <h1>Creepy-crawlies splash page!</h1>
 
            <p>
-             In casual language, people use “bugs” to mean all sorts of small
-             creepy-crawlies: insects, spiders, etc. However, “Bugs” (true bugs)
+             In casual language, people use "bugs" to mean all sorts of small
+             creepy-crawlies: insects, spiders, etc. However, "Bugs" (true bugs)
              are actually just one order of insects (Hemiptera). This page
              provides a summary of the main classes or groups of
              creepy-crawlies.
@@ -89,7 +89,7 @@ To solve this challenge we are expecting you to create a simple website project,
              possess distinctive piercing-sucking mouthparts. These mouthparts
              are adapted for feeding on plant sap, blood, or other insects. Many
              true bugs have scent glands that produce strong odors as a defense
-             mechanism, which is why some are called “stink bugs.”
+             mechanism, which is why some are called "stink bugs."
            </p>
 
            <p>
@@ -153,8 +153,8 @@ To solve this challenge we are expecting you to create a simple website project,
            <h2>Flies & Mosquitoes (Diptera)</h2>
 
            <p>
-             Flies and mosquitoes belong to the order Diptera, meaning “two
-             wings.” Unlike most other insects, they have only one functional
+             Flies and mosquitoes belong to the order Diptera, meaning "two
+             wings." Unlike most other insects, they have only one functional
              pair of wings; the hind pair has evolved into tiny balancing organs
              called halteres. This adaptation gives them incredible agility in
              flight. Their mouthparts vary widely: some species have sponging
@@ -233,7 +233,7 @@ To solve this challenge we are expecting you to create a simple website project,
              a danger to humans. In fact, spiders are highly beneficial because
              they help control insect populations, including pests. They play a
              crucial role in balancing ecosystems, making them one of the most
-             important non-insect “bugs” people commonly encounter.
+             important non-insect "bugs" people commonly encounter.
            </p>
 
            <p class="copyright">
@@ -424,8 +424,8 @@ Your finished HTML should look something like this:
           preload="auto"></video>
 
         <p>
-          In casual language, people use “bugs” to mean all sorts of small
-          creepy-crawlies: insects, spiders, etc. However, “Bugs” (true bugs)
+          In casual language, people use "bugs" to mean all sorts of small
+          creepy-crawlies: insects, spiders, etc. However, "Bugs" (true bugs)
           are actually just one order of insects (Hemiptera). This page provides
           a summary of the main classes or groups of creepy-crawlies.
         </p>
@@ -488,7 +488,7 @@ Your finished HTML should look something like this:
           piercing-sucking mouthparts. These mouthparts are adapted for feeding
           on plant sap, blood, or other insects. Many true bugs have scent
           glands that produce strong odors as a defense mechanism, which is why
-          some are called “stink bugs.”
+          some are called "stink bugs."
         </p>
 
         <p>
@@ -569,7 +569,7 @@ Your finished HTML should look something like this:
         </figure>
 
         <p>
-          Flies and mosquitoes belong to the order Diptera, meaning “two wings.”
+          Flies and mosquitoes belong to the order Diptera, meaning "two wings."
           Unlike most other insects, they have only one functional pair of
           wings; the hind pair has evolved into tiny balancing organs called
           halteres. This adaptation gives them incredible agility in flight.
@@ -663,7 +663,7 @@ Your finished HTML should look something like this:
           danger to humans. In fact, spiders are highly beneficial because they
           help control insect populations, including pests. They play a crucial
           role in balancing ecosystems, making them one of the most important
-          non-insect “bugs” people commonly encounter.
+          non-insect "bugs" people commonly encounter.
         </p>
 
         <p class="copyright">

files/en-us/web/api/clipboard/clipboardchange_event/index.md

@@ -0,0 +1,110 @@
+---
+title: "Clipboard: clipboardchange event"
+slug: Web/API/Clipboard/clipboardchange_event
+page-type: web-api-event
+browser-compat: api.Clipboard.clipboardchange_event
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`clipboardchange`** event of the {{domxref("Clipboard")}} interface is fired when the system clipboard contents are changed in any way, for example via a system copy command, or via an API method such as {{domxref("Clipboard.writeText()")}}.
+
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js-nolint
+addEventListener("clipboardchange", (event) => { })
+
+onclipboardchange = (event) => { }
+```
+
+## Event type
+
+A {{domxref("ClipboardChangeEvent")}}. Inherits from {{domxref("Event")}}.
+
+{{InheritanceDiagram("ClipboardChangeEvent")}}
+
+## Examples
+
+### Listening for system copy commands
+
+This example shows how to listen for system copy commands and display the content that was copied to the clipboard.
+
+#### HTML
+
+The HTML consists of three {{htmlelement("p")}} elements — one to display the clipboard contents and two containing sample text to copy.
+
+```html live-sample___basic-usage
+<p id="output">Copied text:</p>
+
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a mattis purus.
+  Donec at ipsum libero. Maecenas at dictum turpis. Vivamus eget aliquet augue.
+  Aenean tempor dictum posuere. Vestibulum vehicula, nulla ac convallis feugiat,
+  tortor velit lobortis est, vitae convallis velit libero vel urna. Suspendisse
+  potenti. In bibendum ex et pellentesque gravida. Phasellus magna risus,
+  euismod vitae sem in, viverra venenatis lacus. Sed dignissim risus eu congue
+  consequat. Vestibulum nec feugiat libero. Maecenas quis sodales lorem, eu
+  luctus nisl. Cras vel diam sed lacus finibus elementum sed sed nunc.
+</p>
+
+<p>
+  Nam ac metus eget est bibendum pulvinar. Nunc a venenatis lorem. Lorem ipsum
+  dolor sit amet, consectetur adipiscing elit. In dignissim, arcu ornare luctus
+  pharetra, dui velit faucibus leo, ac posuere ipsum risus vel ligula. Morbi
+  varius, felis et ornare efficitur, tortor erat imperdiet lacus, non rhoncus
+  lectus sapien sit amet augue. Suspendisse potenti. Sed fringilla mi augue, at
+  laoreet felis varius in. Donec venenatis gravida lacus ut rutrum. Donec
+  suscipit egestas justo. Proin semper nibh tortor, sit amet elementum metus
+  placerat quis. Sed consectetur leo sed lorem varius, sit amet ultrices sem
+  tincidunt. Vivamus facilisis at velit eget commodo.
+</p>
+```
+
+```css hidden live-sample___basic-usage
+body {
+  margin: 0 5px;
+}
+#output {
+  font-family: Arial, Helvetica, sans-serif;
+  padding: 10px;
+  border: 2px solid #ccc;
+  border-radius: 5px;
+}
+```
+
+#### JavaScript
+
+In our script, we first grab a reference to the output `<p>` element. We then define a `clipboardchange` event handler on the browser's {{domxref("Clipboard")}} object. When the event fires, we invoke the {{domxref("Clipboard.readText()")}} method to read the text that was just copied to the clipboard. When the result is returned, we set it as the value of the output paragraph's `textContent`.
+
+```js live-sample___basic-usage
+const outputPara = document.querySelector("#output");
+
+navigator.clipboard.addEventListener("clipboardchange", (event) => {
+  navigator.clipboard
+    .readText()
+    .then((text) => (outputPara.textContent = `Copied text: ${text}`));
+});
+```
+
+#### Result
+
+The rendered example is as follows:
+
+{{EmbedLiveSample("basic-usage", '100%', "350px", "", "", "", "clipboard-read")}}
+
+Try selecting some text from the example and then copying it to the clipboard using <kbd>Ctrl</kbd> + <kbd>C</kbd> (or <kbd>Cmd</kbd> + <kbd>C</kbd> if you are using a Mac). On your first attempt, you will see a permission prompt asking you to allow permission to read the clipboard contents. After that (or immediately, on subsequent attempts), you should see the text that you copied printed to the output paragraph at the top of the UI.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("ClipboardChangeEvent")}}
+- [Clipboard API](/en-US/docs/Web/API/Clipboard_API)

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

@@ -33,6 +33,11 @@ _`Clipboard` is based on the {{domxref("EventTarget")}} interface, and includes
 - {{domxref("Clipboard.writeText()","writeText()")}}
   - : Writes text to the system clipboard, returning a {{jsxref("Promise")}} that is resolved once the text is fully copied into the clipboard.
 
+## Events
+
+- {{domxref("Clipboard.clipboardchange_event","clipboardchange")}}
+  - : Fired when the system clipboard contents are changed in any way, for example via a system copy command, or via an API method such as {{domxref("Clipboard.writeText()")}}.
+
 ## Specifications
 
 {{Specifications}}

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

@@ -30,6 +30,8 @@ Events are fired as the result of {{domxref("Element/cut_event", "cut")}}, {{dom
 The events have a default action, for example the `copy` action copies the current selection to the system clipboard by default.
 The default action can be overridden by the event handler — see each of the events for more information.
 
+There is also a {{domxref("Clipboard.clipboardchange_event","clipboardchange")}} event fired directly on the {{domxref("Clipboard")}} object whenever the system clipboard's contents are changed. This is useful for notifying apps of a change to the system clipboard, for example if they have their own clipboard that needs to be kept in sync.
+
 ## Interfaces
 
 - {{domxref("Clipboard")}} {{securecontext_inline}}

files/en-us/web/api/htmlcanvaselement/toblob/index.md

@@ -80,91 +80,6 @@ canvas.toBlob(
 
 Note that we don't immediately revoke the object URL after the image has loaded, because doing so would make the image unusable for user interactions (such as right-clicking to save the image or opening it in a new tab). For long-lived applications, you should revoke object URLs when they're no longer needed (such as when the image is removed from the DOM) to free up memory by calling the {{DOMxref("URL.revokeObjectURL_static", "URL.revokeObjectURL()")}} method and passing in the object URL string.
 
-### Convert a canvas to an ico (Mozilla only)
-
-This uses `-moz-parse` to convert the canvas to ico, and hence only works on Firefox.
-Windows XP doesn't support converting from PNG to ico, so it uses bmp instead.
-A download link is created by setting the download attribute. The value of the download attribute is the name it will use as the file name.
-
-```js
-const canvas = document.getElementById("canvas");
-const d = canvas.width;
-const ctx = canvas.getContext("2d");
-ctx.beginPath();
-ctx.moveTo(d / 2, 0);
-ctx.lineTo(d, d);
-ctx.lineTo(0, d);
-ctx.closePath();
-ctx.fillStyle = "yellow";
-ctx.fill();
-
-function blobCallback(iconName) {
-  return (b) => {
-    const a = document.createElement("a");
-    a.textContent = "Download";
-    document.body.appendChild(a);
-    a.style.display = "block";
-    a.download = `${iconName}.ico`;
-    a.href = window.URL.createObjectURL(b);
-  };
-}
-canvas.toBlob(
-  blobCallback("passThisString"),
-  "image/vnd.microsoft.icon",
-  "-moz-parse-options:format=bmp;bpp=32",
-);
-```
-
-### Save toBlob to disk with OS.File (Chrome/add-on context only)
-
-> [!NOTE]
-> This technique saves it to the desktop and is only useful in Firefox chrome context or add-on code, as OS APIs are not present on websites.
-
-```js
-const canvas = document.getElementById("canvas");
-const d = canvas.width;
-ctx = canvas.getContext("2d");
-ctx.beginPath();
-ctx.moveTo(d / 2, 0);
-ctx.lineTo(d, d);
-ctx.lineTo(0, d);
-ctx.closePath();
-ctx.fillStyle = "yellow";
-ctx.fill();
-
-function blobCallback(iconName) {
-  return (b) => {
-    const r = new FileReader();
-    r.onloadend = () => {
-      // r.result contains the ArrayBuffer.
-      Cu.import("resource://gre/modules/osfile.jsm");
-      const writePath = OS.Path.join(
-        OS.Constants.Path.desktopDir,
-        `${iconName}.ico`,
-      );
-      const promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result), {
-        tmpPath: `${writePath}.tmp`,
-      });
-      promise.then(
-        () => {
-          console.log("successfully wrote file");
-        },
-        () => {
-          console.log("failure writing file");
-        },
-      );
-    };
-    r.readAsArrayBuffer(b);
-  };
-}
-
-canvas.toBlob(
-  blobCallback("passThisString"),
-  "image/vnd.microsoft.icon",
-  "-moz-parse-options:format=bmp;bpp=32",
-);
-```
-
 ## Specifications
 
 {{Specifications}}

files/en-us/web/css/guides/fonts/variable_fonts/index.md

@@ -739,7 +739,7 @@ The following example pages show two different ways to structure your CSS. The f
     before coffin warehouses, and bringing up the rear of every funeral I meet;
     and especially whenever my hypos get such an upper hand of me, that it
     requires a strong moral principle to prevent me from deliberately stepping
-    into the street, and methodically knocking people’s hats off then, I account
+    into the street, and methodically knocking people's hats off then, I account
     it high time to get to sea as soon as I can.
   </p>
 </div>
@@ -757,7 +757,7 @@ The following example pages show two different ways to structure your CSS. The f
     before coffin warehouses, and bringing up the rear of every funeral I meet;
     and especially whenever my hypos get such an upper hand of me, that it
     requires a strong moral principle to prevent me from deliberately stepping
-    into the street, and methodically knocking people’s hats off then, I account
+    into the street, and methodically knocking people's hats off then, I account
     it high time to get to sea as soon as I can.
   </p>
 </div>

files/en-us/web/css/guides/multicol_layout/index.md

@@ -29,8 +29,8 @@ In this example, the 1967 speech from Canada's centennial, _A Lament for Confede
   <p>
     For I have known you when your forests were mine; when they gave me my meat
     and my clothing. I have known you in your fruits and rivers where your fish
-    flashed and danced in the sun, where the waters said ‘come and eat of my
-    abundance.’ I have known you in the freedom of your winds. And my spirit,
+    flashed and danced in the sun, where the waters said 'come and eat of my
+    abundance.' I have known you in the freedom of your winds. And my spirit,
     like your winds, once roamed this good lands.
   </p>
   <blockquote>
@@ -40,7 +40,7 @@ In this example, the 1967 speech from Canada's centennial, _A Lament for Confede
     </p>
   </blockquote>
   <p>
-    The white man’s strange customs I could not understand, pressed down upon me
+    The white man's strange customs I could not understand, pressed down upon me
     until I could no longer breathe.
   </p>
   <p>
@@ -69,7 +69,7 @@ In this example, the 1967 speech from Canada's centennial, _A Lament for Confede
   </p>
   <p>
     Oh god, like the thunderbird of old, I shall rise again out of the sea. I
-    shall grab the instruments of the white man’s success – his education, his
+    shall grab the instruments of the white man's success – his education, his
     skills, and with these new tools I shall build my race into the proudest
     segment of your society. And, before I follow the great chiefs who have gone
     before us, I shall see these things come to pass.

files/en-us/web/css/how_to/layout_cookbook/grid_wrapper/index.md

@@ -19,7 +19,7 @@ Click "Play" in the code blocks below to edit the example in the MDN Playground:
 <div class="grid">
   <div class="wrapper">
     <p>
-      This item aligns to a central “wrapper” – columns that have a maximum
+      This item aligns to a central "wrapper" – columns that have a maximum
       width.
     </p>
   </div>
@@ -33,7 +33,7 @@ Click "Play" in the code blocks below to edit the example in the MDN Playground:
     </p>
   </div>
   <div class="right-wrapper">
-    <p>This item aligns to the right edge of the “wrapper” columns.</p>
+    <p>This item aligns to the right edge of the "wrapper" columns.</p>
   </div>
 </div>
 ```

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

@@ -43,11 +43,11 @@ clip-path: xywh(0 5px 100% 75% round 15% 0);
       src="/shared-assets/images/examples/balloon-small.jpg"
       width="150" />
     We had agreed, my companion and I, that I should call for him at his house,
-    after dinner, not later than eleven o’clock. This athletic young Frenchman
-    belongs to a small set of Parisian sportsmen, who have taken up “ballooning”
+    after dinner, not later than eleven o'clock. This athletic young Frenchman
+    belongs to a small set of Parisian sportsmen, who have taken up "ballooning"
     as a pastime. After having exhausted all the sensations that are to be found
-    in ordinary sports, even those of “automobiling” at a breakneck speed, the
-    members of the “Aéro Club” now seek in the air, where they indulge in all
+    in ordinary sports, even those of "automobiling" at a breakneck speed, the
+    members of the "Aéro Club" now seek in the air, where they indulge in all
     kinds of daring feats, the nerve-racking excitement that they have ceased to
     find on earth.
   </div>

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

@@ -25,7 +25,7 @@ font-kerning: none;
 ```html interactive-example
 <section class="default-example" id="default-example">
   <div class="transition-all" id="example-element">
-    “We took Tracy to see ‘THE WATERFALL’ in W. Virginia.”
+    "We took Tracy to see 'THE WATERFALL' in W. Virginia."
   </div>
 </section>
 ```