Merge branch 'main' into scan

files/en-us/learn/css/styling_text/web_fonts/index.md

@@ -118,7 +118,7 @@ Web services for font generation typically limit file sizes. In such a case, con
 
 1. [sfnt2woff-zopfli](https://github.com/bramstein/sfnt2woff-zopfli) for converting ttf to woff
 2. [fontforge](https://fontforge.org/) for converting from ttf to svg
-3. [batik ttf2svf](https://people.apache.org/~clay/batik/ttf2svg.html) for converting from ttf to svg
+3. [batik ttf2svg](https://people.apache.org/~clay/batik/ttf2svg.html) for converting from ttf to svg
 4. [woff2](https://github.com/google/woff2) for converting from ttf to woff2
 
 ### Implementing the code in your demo

files/en-us/learn/index.md

@@ -111,7 +111,7 @@ You can update the `learning-area` repository with any changes made to the maste
 
 If you want to get in touch with us about anything, use the [communication channels](/en-US/docs/MDN/Community/Communication_channels). We'd like to hear from you about anything you think is wrong or missing on the site, requests for new learning topics, requests for help with items you don't understand, or any other questions or concerns.
 
-If you're interested in helping develop/improve the content, take a look at [how you can help](/en-US/docs/MDN/Contribute) and get in touch! We are more than happy to talk to you, whether you are a learner, teacher, experienced web developer, or someone else interested in helping to improve the learning experience.
+If you're interested in helping develop/improve the content, take a look at [how you can help](/en-US/docs/MDN/Community/Contributing) and get in touch! We are more than happy to talk to you, whether you are a learner, teacher, experienced web developer, or someone else interested in helping to improve the learning experience.
 
 ## See also
 

files/en-us/mdn/at_ten/index.md

@@ -18,7 +18,7 @@ In early 2005, a small team of idealists set out to create a new, free, communit
 
 For ten years, the MDN community has been documenting the open Web. From fixing simple typos to writing entire suites of an entirely new API, everyone has something to offer and no contribution is too large or too small. We have over 90,000 pages of content that have been written or translated by members of our outstanding community of Mozillians. You can become one of them.
 
-[Learn more about contributing](/en-US/docs/MDN/Contribute)
+[Learn more about contributing](/en-US/docs/MDN/Community/Contributing)
 
 ## See also
 

files/en-us/mdn/writing_guidelines/page_structures/page_types/index.md

@@ -241,7 +241,7 @@ The list of subpages can be generated automatically using the templates [`Subpag
 - [Web APIs](/en-US/docs/Web/API)
 - [JavaScript](/en-US/docs/Web/JavaScript)
 - [Learning area](/en-US/docs/Learn)
-- [Contributing to MDN](/en-US/docs/MDN/Contribute)
+- [Contributing to MDN](/en-US/docs/MDN/Community/Contributing)
 
 ## See also
 

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

@@ -0,0 +1,53 @@
+---
+title: "HTMLAnchorElement: type property"
+short-title: type
+slug: Web/API/HTMLAnchorElement/type
+page-type: web-api-instance-property
+browser-compat: api.HTMLAnchorElement.type
+---
+
+{{ApiRef("HTML DOM")}}
+
+The **`type`** property of the {{domxref("HTMLAnchorElement")}} interface is a string that indicates the MIME type of the linked resource.
+
+It reflects the `type` attribute of the {{HTMLElement("a")}} element.
+
+## Value
+
+A string.
+
+## Example
+
+```html
+<a id="exampleLink" href="https://example.com" type="text/html">Example Link</a>
+<p class="type"></p>
+```
+
+```css
+#exampleLink {
+  font-size: 1.5rem;
+}
+```
+
+```js
+const anchorElement = document.getElementById("exampleLink");
+const pTag = document.querySelector(".type");
+console.log(anchorElement.type); // Output: "text/html"
+pTag.textContent = anchorElement.type;
+```
+
+{{EmbedLiveSample("Example",100,100)}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLLinkElement.type")}} property
+- {{domxref("HTMLSourceElement.type")}} property
+- {{domxref("HTMLEmbedElement.type")}} property

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

@@ -9,9 +9,9 @@ browser-compat: css.selectors.attribute
 
 The CSS **attribute selector** matches elements based on the element having a given attribute explicitly set, with options for defining an attribute value or substring value match.
 
-The case sensitivity of attribute names and values depends on the document language. In HTML, attribute names are case insensitive, as are spec-defined {{glossary("enumerated")}} values. The [case-insensitive HTML attribute values](https://html.spec.whatwg.org/multipage/semantics-other.html#case-sensitivity-of-selectors) are listed in the HTML spec. For these attributes, the attribute value in the selector is case-insensitive, regardless of whether the value is invalid or the attribute for the element on which it is set is invalid.
+The case sensitivity of attribute names and values depends on the document language. In HTML, attribute names are case-insensitive, as are spec-defined {{glossary("enumerated")}} values. The [case-insensitive HTML attribute values](https://html.spec.whatwg.org/multipage/semantics-other.html#case-sensitivity-of-selectors) are listed in the HTML spec. For these attributes, the attribute value in the selector is case-insensitive, regardless of whether the value is invalid or the attribute for the element on which it is set is invalid.
 
-If the attribute value is case sensitive, like [`class`](/en-US/docs/Web/HTML/Global_attributes/class), [`id`](/en-US/docs/Web/HTML/Global_attributes/id), and [`data-*`](/en-US/docs/Web/HTML/Global_attributes/data-*) attributes, the attribute selector value match is case-sensitive. Attributes defined outside of the HTML specification, like [`role`](/en-US/docs/Web/Accessibility/ARIA/Roles) and [`aria-*`](/en-US/docs/Web/Accessibility/ARIA/Attributes) attributes, are also case-sensitive. Normally case-sensitive attribute selectors can be made case-insensitive with the inclusion of the case-insensitive modifier (`i`).
+If the attribute value is case-sensitive, like [`class`](/en-US/docs/Web/HTML/Global_attributes/class), [`id`](/en-US/docs/Web/HTML/Global_attributes/id), and [`data-*`](/en-US/docs/Web/HTML/Global_attributes/data-*) attributes, the attribute selector value match is case-sensitive. Attributes defined outside of the HTML specification, like [`role`](/en-US/docs/Web/Accessibility/ARIA/Roles) and [`aria-*`](/en-US/docs/Web/Accessibility/ARIA/Attributes) attributes, are also case-sensitive. Normally case-sensitive attribute selectors can be made case-insensitive with the inclusion of the case-insensitive modifier (`i`).
 
 ```css
 /* <a> elements with a title attribute */
@@ -20,8 +20,7 @@ a[title] {
 }
 
 /* <a> elements with an href matching "https://example.org" */
-a[href="https://example.org"]
-{
+a[href="https://example.org"] {
   color: green;
 }
 
@@ -101,8 +100,7 @@ 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/css/resolution/index.md

@@ -36,6 +36,18 @@ The `<resolution>` data type consists of a strictly positive {{cssxref("&lt;numb
 @media print and (min-resolution: 300dpi) {
   /* … */
 }
+
+@media (resolution: 120dpcm) {
+  /* … */
+}
+
+@media (min-resolution: 2dppx) {
+  /* … */
+}
+
+@media (resolution: 1x) {
+  /* … */
+}
 ```
 
 ### Valid resolutions

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

@@ -7,20 +7,41 @@ browser-compat: html.elements.template
 
 {{HTMLSidebar}}
 
-The **`<template>`** [HTML](/en-US/docs/Web/HTML) element is a mechanism for holding {{Glossary("HTML")}} that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.
-
-Think of a template as a content fragment that is being stored for subsequent use in the document. While the parser does process the contents of the **`<template>`** element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however.
+The **`<template>`** [HTML](/en-US/docs/Web/HTML) element serves as a mechanism for holding {{Glossary("HTML")}} fragments, which can either be used later via JavaScript or generated immediately into shadow DOM.
 
 ## Attributes
 
-The only standard attributes that the `<template>` element supports are the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
+This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
+
+- `shadowrootmode`
+
+  - : Creates a [shadow root](/en-US/docs/Glossary/Shadow_tree) for the parent element. It is a declarative version of the {{domxref("Element.attachShadow()")}} method and accepts the same {{glossary("enumerated")}} values.
+
+    - `open`
+
+      - : Exposes the internal shadow root DOM for JavaScript (recommended for most use cases).
+
+    - `closed`
+
+      - : Hides the internal shadow root DOM from JavaScript.
+
+    > **Note:** This is a feature of the HTML parser that cannot be used post-parsing by setting the `shadowrootmode` attribute through JavaScript. Only allowed values will create the shadow root; any other values, including empty ones, won't trigger this behavior.
+
+    > **Note:** You may find the non-standard `shadowroot` attribute in older tutorials and examples that used to be supported in Chrome 90-110. This attribute has since been removed and replaced by the standard `shadowrootmode` attribute.
+
+## Usage notes
+
+There are two main ways to use the `<template>` element:
 
-In Chromium-based browsers, the `<template>` element also supports a non-standard [`shadowrootmode` attribute](https://github.com/mfreed7/declarative-shadow-dom/blob/master/README.md#syntax), as part of an experimental ["Declarative Shadow DOM"](https://developer.chrome.com/docs/css-ui/declarative-shadow-dom) proposal. In supporting browsers, a `<template>` element with the `shadowrootmode` attribute is detected by the HTML parser and immediately applied as the shadow root of its parent element. `shadowrootmode` can take a value of `open` or `closed`; these are equivalent to the `open` and `closed` values of the {{domxref("Element.attachShadow()")}} `mode` option.
+1. By default, the element's content is not rendered, only parsed into a [document fragment](/en-US/docs/Web/API/DocumentFragment). Using the {{domxref("HTMLTemplateElement.content", "content")}} property in JavaScript, this fragment can be cloned via the {{domxref("Node.cloneNode", "cloneNode")}} method and inserted into the DOM.
+2. If the element contains the `shadowrootmode` attribute, the HTML parser will immediately generate a shadow DOM. The element is replaced in the DOM by its content wrapped in a [shadow root](/en-US/docs/Glossary/Shadow_tree).
 
-Also, the corresponding {{domxref("HTMLTemplateElement")}} interface includes a standard {{domxref("HTMLTemplateElement.content", "content")}} property (without an equivalent content/markup attribute). This `content` property is read-only and holds a {{domxref("DocumentFragment")}} that contains the DOM subtree represented by the template. Be careful when using the `content` property because the returned `DocumentFragment` can exhibit unexpected behavior. For more details, see the [Avoiding DocumentFragment pitfalls](#avoiding_documentfragment_pitfalls) section below.
+The corresponding {{domxref("HTMLTemplateElement")}} interface includes a standard {{domxref("HTMLTemplateElement.content", "content")}} property (without an equivalent content/markup attribute). This `content` property is read-only and holds a {{domxref("DocumentFragment")}} that contains the DOM subtree represented by the template. Be careful when using the `content` property because the returned `DocumentFragment` can exhibit unexpected behavior. For more details, see the [Avoiding DocumentFragment pitfalls](#avoiding_documentfragment_pitfalls) section below.
 
 ## Examples
 
+### Generating table rows
+
 First we start with the HTML portion of the example.
 
 ```html
@@ -89,7 +110,48 @@ table td {
 }
 ```
 
-{{EmbedLiveSample("Examples", 500, 120)}}
+{{EmbedLiveSample("Table row generation", 500, 120)}}
+
+### Implementing a declarative shadow DOM
+
+In this example, a hidden support warning is included at the beginning of the markup. This warning is later set to be displayed via JavaScript if the browser doesn't support the `shadowrootmode` attribute. Next, there are two {{HTMLElement("article")}} elements, each containing nested {{HTMLElement("style")}} elements with different behaviors. The first `<style>` element is global to the whole document. The second one is scoped to the shadow root generated in place of the `<template>` element because of the presence of the `shadowrootmode` attribute.
+
+```html
+<p hidden>
+  ⛔ Your browser doesn't support <code>shadowrootmode</code> attribute yet.
+</p>
+<article>
+  <style>
+    p {
+      padding: 8px;
+      background-color: wheat;
+    }
+  </style>
+  <p>I'm in the DOM.</p>
+</article>
+<article>
+  <template shadowrootmode="open">
+    <style>
+      p {
+        padding: 8px;
+        background-color: plum;
+      }
+    </style>
+    <p>I'm in the shadow DOM.</p>
+  </template>
+</article>
+```
+
+```js
+const isShadowRootModeSupported =
+  HTMLTemplateElement.prototype.hasOwnProperty("shadowRootMode");
+
+document
+  .querySelector("p[hidden]")
+  .toggleAttribute("hidden", isShadowRootModeSupported);
+```
+
+{{EmbedGHLiveSample("dom-examples/shadow-dom/shadowrootmode/scoping.html", "", "120")}}
 
 ## Avoiding DocumentFragment pitfalls
 
@@ -220,3 +282,4 @@ Since `firstClone` is a `DocumentFragment`, only its children are added to `cont
 - [`ShadowRoot`]("/en-US/docs/Web/API/ShadowRoot) interface
 - [Using templates and slots](/en-US/docs/Web/API/Web_components/Using_templates_and_slots)
 - [CSS scoping](/en-US/docs/Web/CSS/CSS_scoping) module
+- [Declarative shadow DOM](https://developer.chrome.com/docs/css-ui/declarative-shadow-dom) on developer.chrome.com (2023)

files/en-us/web/javascript/reference/global_objects/iterator/take/index.md

@@ -75,7 +75,7 @@ Because `fibonacci()` is an infinite iterator, you can't use a `for` loop to ite
 
 ### Combining drop() with take()
 
-You can combine `drop()` with {{jsxref("Iterator.prototype.take()")}} to get a slice of an iterator:
+You can combine `take()` with {{jsxref("Iterator.prototype.drop()")}} to get a slice of an iterator:
 
 ```js
 for (const n of fibonacci().drop(2).take(5)) {