Merge branch 'main' into standards-position-banner-guidelines

CONTRIBUTING.md

@@ -419,7 +419,7 @@ There are some important rules of etiquette to remember that will help during th
 When contributing to the content you agree to license your contributions
 according to [our license](LICENSE.md).
 
-[contribute page]: https://developer.mozilla.org/en-US/docs/MDN/Contribute
+[contribute page]: https://developer.mozilla.org/en-US/docs/MDN/Community/Contributing
 [getting started with mdn web docs]: https://developer.mozilla.org/en-US/docs/MDN/Community/Contributing/Getting_started
 [getting ready to contribute]: https://developer.mozilla.org/en-US/docs/MDN/Community/Contributing/Getting_started#getting_ready_to_contribute
 [how to write in markdown]: https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Howto/Markdown_in_MDN

files/en-us/mozilla/firefox/experimental_features/index.md

@@ -1483,6 +1483,22 @@ It is disabled by default on all builds [Firefox bug 1750902](https://bugzil.la/
 
 ### HTML DOM API
 
+#### Shadow DOM
+
+Firefox now supports the `clonable` option and property for shadow DOM.
+
+- The {{domxref("Element.attachShadow()")}} method's `clonable` boolean option specifies whether the created shadow root is clonable: the default value is `false` but when set to `true`, the shadow host cloned with {{domxref("Node.cloneNode()")}} or {{domxref("Document.importNode()")}} will include shadow root in the copy.
+- The {{domxref("ShadowRoot")}} interface's {{domxref("ShadowRoot.clonable", "clonable")}} read-only property returns `true` if the shadow root is clonable, and `false` otherwise.
+
+When shadow root is created via declarative shadow DOM, the `clonable` option is set to `true` by default, and the `clonable` property returns `true`. ([Firefox bug 1868428](https://bugzil.la/1868428))
+
+| Release channel   | Version added | Enabled by default? |
+| ----------------- | ------------- | ------------------- |
+| Nightly           | 122           | Yes                 |
+| Developer Edition | NA            | No                  |
+| Beta              | NA            | No                  |
+| Release           | NA            | No                  |
+
 #### Popover API
 
 Firefox now supports the [Popover API](/en-US/docs/Web/API/Popover_API).

files/en-us/mozilla/firefox/releases/122/index.md

@@ -10,15 +10,11 @@ This article provides information about the changes in Firefox 122 that affect d
 
 ## Changes for web developers
 
-### Developer Tools
-
 ### HTML
 
 - {{HTMLElement("hr")}} elements are now allowed as children of {{HTMLElement("select")}} elements. This is a new feature that improves the readability of select lists with many options. ([Firefox bug 1830909](https://bugzil.la/1830909)).
 - The `type` HTML attribute no longer has an effect if set to `none`, `disc`, `circle` or `square` in {{HTMLElement("ol")}} and no longer has an effect if set to `1`, `a`, `A`, `i` or `I` in {{HTMLElement("ul")}}. As `type` is a deprecated attribute for `<ul>` and `<ol>` lists, these should be styled with {{CSSxref("list-style-type")}} CSS property instead. ([Firefox bug 1868087](https://bugzil.la/1868087)).
 
-#### Removals
-
 ### CSS
 
 - The CSS {{cssxref("offset-position")}} property is now available by default. It defines the initial position of an element on a path. ([Firefox bug 1598152](https://bugzil.la/1598152))
@@ -29,48 +25,26 @@ This article provides information about the changes in Firefox 122 that affect d
 
 - The {{CSSxref("clip-path")}} and {{CSSxref("offset-path")}} properties now accept [`rect()`](/en-US/docs/Web/CSS/basic-shape/rect) and [`xywh()`](/en-US/docs/Web/CSS/basic-shape/xywh) shape functions. These {{CSSXref("basic-shape")}} values allow the clipping and offsetting of elements with a rectangle defined by distance from the edge of the element (`rect()`) or coordinates and size (`xywh()`). ([Firefox bug 1868722](https://bugzil.la/1868722)).
 
-#### Removals
-
 ### JavaScript
 
 - The {{jsxref("ArrayBuffer.prototype.transfer()")}} and {{jsxref("ArrayBuffer.prototype.transferToFixedLength()")}} methods can now be used to [transfer ownership](/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer#transferring_arraybuffers) of memory from one {{jsxref("ArrayBuffer")}} to another. After transfer, the original buffer is detached from its original memory and hence unusable; the state can be checked using {{jsxref("ArrayBuffer.prototype.detached")}}. (See [Firefox bug 1865103](https://bugzil.la/1865103) for more details.)
 
-#### Removals
-
 ### SVG
 
 #### Removals
 
 - Removed support for `data:` URLs in SVG `<use>` elements and via the [`SVGUseElement`](/en-US/docs/Web/API/SVGUseElement) interface to prevent [XSS](/en-US/docs/Glossary/Cross-site_scripting) attacks.
   The legacy functionality may be re-enabled by setting the `svg.use-element.data-url-href.allowed` preference to `true`, although this is not recommended for security reasons ([Firefox bug 1806964](https://bugzil.la/1806964)).
 
-### HTTP
-
-#### Removals
-
-### Security
-
-#### Removals
-
 ### APIs
 
 - The [LargestContentfulPaint API](/en-US/docs/Web/API/LargestContentfulPaint) is now supported.
   This API is part of the [Performance APIs](/en-US/docs/Web/API/Performance_API) and provides timing information about the largest image or text paint before users interact with a web page ([Firefox bug 1866266](https://bugzil.la/1866266)).
 
 #### DOM
 
-### showPicker() method for HTML select elements
-
 - The {{domxref("HTMLSelectElement.showPicker()")}} method is now supported, allowing the browser picker for a {{HTMLElement("select")}} element to be programmatically launched when triggered by user interaction ([Firefox bug 1865207](https://bugzil.la/1865207)).
 
-#### Media, WebRTC, and Web Audio
-
-#### Removals
-
-### WebAssembly
-
-#### Removals
-
 ### WebDriver conformance (WebDriver BiDi, Marionette)
 
 #### General
@@ -89,12 +63,6 @@ This article provides information about the changes in Firefox 122 that affect d
 
 - Fixed a bug with [Get Element Text](https://w3c.github.io/webdriver/#dfn-get-element-text), where the command was incorrectly returning an empty text when the element was located within a ShadowRoot's slot ([Firefox bug 1824664](https://bugzil.la/1824664)).
 
-## Changes for add-on developers
-
-### Removals
-
-### Other
-
 ## Experimental web features
 
 These features are newly shipped in Firefox 122 but are disabled by default. To experiment with them, search for the appropriate preference on the `about:config` page and set it to `true`. You can find more such features on the [Experimental features](/en-US/docs/Mozilla/Firefox/Experimental_features) page.
@@ -103,6 +71,13 @@ These features are newly shipped in Firefox 122 but are disabled by default. To
 
   The {{htmlelement("template")}} element now supports a `shadowrootmode` attribute which can be set to either `open` or `closed`, the same values as the `mode` option of the {{domxref("Element.attachShadow()", "attachShadow()")}} method. It allows the creation of a shadow DOM subtree declaratively. ([Firefox bug 1712140](https://bugzil.la/1712140))
 
+- **Clonable option and property for shadow DOM.**
+
+  - The {{domxref("Element.attachShadow()")}} method now supports the `clonable` boolean option that specifies whether the created shadow root is clonable: the default value is `false` but when set to `true`, the shadow host cloned with {{domxref("Node.cloneNode()")}} or {{domxref("Document.importNode()")}} will include shadow root in the copy.
+  - The {{domxref("ShadowRoot")}} interface now supports the {{domxref("ShadowRoot.clonable", "clonable")}} read-only property. It returns `true` if the shadow root is clonable, and `false` otherwise. It always returns `true` for shadow roots created via declarative shadow DOM.
+
+  When shadow root is created via declarative shadow DOM, the `clonable` option is set to `true` by default, and the `clonable` property returns `true`. ([Firefox bug 1712140](https://bugzil.la/1868428))
+
 - **Popover API:** `dom.element.popover.enabled`.
 
   Displaying popovers on top of page content is now supported via HTML attributes or JavaScript API, including styling with the CSS [`:popover-open`](/en-US/docs/Web/CSS/:popover-open) pseudo-class and extended support for the [`::backdrop`](/en-US/docs/Web/CSS/::backdrop) pseudo-element. See the [Popover API](/en-US/docs/Web/API/Popover_API) reference for more details. ([Firefox bug 1823757](https://bugzil.la/1823757))

files/en-us/web/api/htmlanchorelement/text/index.md

@@ -0,0 +1,52 @@
+---
+title: "HTMLAnchorElement: text property"
+short-title: text
+slug: Web/API/HTMLAnchorElement/text
+page-type: web-api-instance-property
+browser-compat: api.HTMLAnchorElement.text
+---
+
+{{ApiRef("HTML DOM")}}
+
+The **`text`** property of the {{domxref("HTMLAnchorElement")}} represents the text inside the the element.
+This property represents the same information as {{domxref("Node.textContent")}}.
+
+## Value
+
+A string.
+
+## Example
+
+```html
+<a id="exampleLink" href="https://example.com">Example Link</a>
+<p class="text"></p>
+```
+
+```css
+#exampleLink {
+  font-size: 1.5rem;
+}
+```
+
+```js
+const anchorElement = document.getElementById("exampleLink");
+const pTag = document.querySelector(".text");
+pTag.textContent = `Text property: ${anchorElement.text}`;
+```
+
+### Result
+
+{{EmbedLiveSample("Example",100,100)}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLScriptElement.text")}} property
+- {{domxref("HTMLOptionElement.text")}} property

files/en-us/web/css/@media/scan/index.md

@@ -42,22 +42,22 @@ p {
   border: solid;
 }
 
-@media (scan: interlace) {
+@media screen and (scan: interlace) {
   p {
     background: #f4ae8a;
   }
 }
-@media (scan: progressive) {
+@media screen and (scan: progressive) {
   p {
     text-decoration: underline;
   }
 }
-@media not (scan: progressive) {
+@media not screen and (scan: progressive) {
   p {
     border-style: dashed;
   }
 }
-@media not (scan: interlaced) {
+@media not screen and (scan: interlaced) {
   p {
     color: purple;
   }

files/en-us/web/css/attribute_selectors/index.md

@@ -20,7 +20,8 @@ a[title] {
 }
 
 /* <a> elements with an href matching "https://example.org" */
-a[href="https://example.org"] {
+a[href="https://example.org"]
+{
   color: green;
 }
 
@@ -100,7 +101,8 @@ a[href$=".org"] {
 }
 
 /* Links that start with "https://" and end in ".org" */
-a[href^="https://"][href$=".org"] {
+a[href^="https://"][href$=".org"]
+{
   color: green;
 }
 ```

files/en-us/web/html/element/caption/index.md

@@ -21,67 +21,86 @@ The following attributes are deprecated and should not be used. They are documen
 
 - `align` {{deprecated_inline}}
 
-  - : This [enumerated](/en-US/docs/Glossary/Enumerated) attribute indicates how the caption must be aligned with respect to the table. It may have one of the following values:
+  - : Specifies on which side of the table the caption should be displayed. The possible {{Glossary("enumerated", "enumerated")}} values are `left`, `top`, `right`, or `bottom`. Use the {{cssxref("caption-side")}} and {{cssxref("text-align")}} CSS properties instead, as this attribute is deprecated.
 
-    - `left`
-      - : The caption is displayed to the left of the table.
-    - `top`
-      - : The caption is displayed above the table.
-    - `right`
-      - : The caption is displayed to the right of the table.
-    - `bottom`
-      - : The caption is displayed below the table.
+## Usage notes
 
-    > **Warning:** Do not use this attribute, as it has been deprecated. The {{HTMLElement("caption")}} element should be styled using the [CSS](/en-US/docs/Web/CSS) properties {{cssxref("caption-side")}} and {{cssxref("text-align")}}.
+- If included, the `<caption>` element must be the first child of its parent {{htmlelement("table")}} element.
+- When a `<table>` is nested within a {{HTMLElement("figure")}} as the figure's only content, it should be captioned via a {{HTMLElement("figcaption")}} for the `<figure>` instead of as a `<caption>` nested within the `<table>`.
+- Any {{cssxref("background-color")}} applied to a table will not be applied to its caption. Add a `background-color` to the `<caption>` element as well if you want the same color to be behind both.
 
-## Usage notes
+## Example
 
-If used, the `<caption>` element must be the first child of its parent {{htmlelement("table")}} element.
+See {{HTMLElement("table")}} for a complete table example introducing common standards and best practices.
 
-When the `<table>` element that contains the `<caption>` is the only descendant of a {{HTMLElement("figure")}} element, you should use the {{HTMLElement("figcaption")}} element instead of `<caption>`.
+This example demonstrates a basic table that includes a caption describing the data presented.
 
-A {{cssxref("background-color")}} on the table will not include the caption. Add a `background-color` to the `<caption>` element as well if you want the same color to be behind both.
+Such a "title" is helpful for users who are quickly scanning the page, and it is especially beneficial for visually impaired users, allowing them to determine the table's relevance quickly without the need to have a screen reader read the contents of many cells just to find out what the table is about.
 
-## Example
+#### HTML
 
-This simple example presents a table that includes a caption.
+A `<caption>` element is used as the first child of the {{HTMLElement("table")}}, with text content similar to a title to describe the table data. Three rows, the first being a header row, with two columns are created using the {{HTMLElement("tr")}}, {{HTMLElement("th")}} and {{HTMLElement("td")}} elements after the `<caption>`.
 
 ```html
 <table>
   <caption>
-    Example Caption
+    User login email addresses
   </caption>
   <tr>
     <th>Login</th>
     <th>Email</th>
   </tr>
   <tr>
     <td>user1</td>
-    <td>user1@sample.com</td>
+    <td>user1@example.com</td>
   </tr>
   <tr>
     <td>user2</td>
-    <td>user2@sample.com</td>
+    <td>user2@example.com</td>
   </tr>
 </table>
 ```
 
-```css hidden
+#### CSS
+
+Some basic CSS is used to align and highlight the `<caption>`.
+
+```css
 caption {
   caption-side: top;
+  text-align: left;
+  padding-bottom: 10px;
+  font-weight: bold;
 }
+```
+
+```css hidden
 table {
   border-collapse: collapse;
-  border-spacing: 0px;
+  border: 2px solid rgb(140 140 140);
+  font-family: sans-serif;
+  font-size: 0.8rem;
+  letter-spacing: 1px;
 }
-table,
+
 th,
 td {
-  border: 1px solid black;
+  border: 1px solid rgb(160 160 160);
+  padding: 8px 10px;
+}
+
+th {
+  background-color: rgb(230 230 230);
+}
+
+td {
+  text-align: center;
 }
 ```
 
-{{EmbedLiveSample('Example', 650, 100)}}
+#### Result
+
+{{EmbedLiveSample('Example', 650, 140)}}
 
 ## Technical summary
 
@@ -146,6 +165,7 @@ td {
 
 ## See also
 
-- CSS properties that may be specially useful to style the {{HTMLElement("caption")}} element:
-
-  - {{cssxref("text-align")}}, {{cssxref("caption-side")}}.
+- [Learn: HTML tables](/en-US/docs/Learn/HTML/Tables)
+- {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}: Other table-related elements
+- {{cssxref("caption-side")}}: CSS property to position the `<caption>` relative to its parent {{HTMLElement("table")}}
+- {{cssxref("text-align")}}: CSS property to horizontally align the text content of the `<caption>`