[pull] main from mdn:main

files/en-us/web/api/document/createattributens/index.md

@@ -23,13 +23,12 @@ createAttributeNS(namespaceURI, qualifiedName)
 
 - `namespaceURI`
   - : A string that specifies the {{DOMxRef("Attr.namespaceURI", "namespaceURI")}} to associate with the attribute, or the empty string.
-    Some important namespace URIs are:
-    - [HTML](/en-US/docs/Web/HTML)
-      - : `http://www.w3.org/1999/xhtml`
-    - [SVG](/en-US/docs/Web/SVG)
-      - : `http://www.w3.org/2000/svg`
-    - [MathML](/en-US/docs/Web/MathML)
-      - : `http://www.w3.org/1998/Math/MathML`
+    In HTML documents, most attributes are in the **null namespace** — use the empty string for these.
+    Use a specific namespace URI only when creating a namespaced attribute, such as `xml:lang` or `xml:space`.
+    Some namespace URIs are:
+    - XML: `http://www.w3.org/XML/1998/namespace` (for `xml:lang`, `xml:space`)
+    - XMLNS: `http://www.w3.org/2000/xmlns/` (for `xmlns`, `xmlns:*`)
+    - XLink: `http://www.w3.org/1999/xlink` (for `xlink:href`, `xlink:title`, etc.)
 - `qualifiedName`
   - : A string containing the qualified name of the new attribute.
     The {{DOMxRef("Attr.name", "name")}} property of the created attribute is initialized with this value.
@@ -68,14 +67,46 @@ The new {{domxref("Attr")}} node.
 
 ## Examples
 
-### Basic usage
+### Creating a namespaced attribute
+
+This example creates an `xml:lang` attribute with the XML namespace and attaches it to a paragraph element.
+This attribute specifies the language of the element's content for XML processing.
+
+```html
+<p id="greeting">Bonjour!</p>
+```
+
+```js
+const el = document.getElementById("greeting");
+const attr = document.createAttributeNS(
+  "http://www.w3.org/XML/1998/namespace",
+  "xml:lang",
+);
+attr.value = "fr";
+el.setAttributeNode(attr);
+```
+
+### Creating an unprefixed attribute
+
+In HTML documents, unprefixed attributes (such as SVG presentation attributes like `viewBox`) are in the null namespace.
+Use the empty string for the `namespaceURI` parameter to match this.
+
+```html
+<svg id="svg"></svg>
+```
+
+```js
+const svg = document.getElementById("svg");
+const attr = document.createAttributeNS("", "viewBox");
+attr.value = "0 0 100 100";
+svg.setAttributeNode(attr);
+console.log(svg.getAttribute("viewBox")); // "0 0 100 100"
+```
+
+Note that, in most cases, you can use {{domxref("Element.setAttribute()")}} instead of `createAttributeNS()` for unprefixed attributes:
 
 ```js
-const node = document.getElementById("svg");
-const a = document.createAttributeNS("http://www.w3.org/2000/svg", "viewBox");
-a.value = "0 0 100 100";
-node.setAttributeNode(a);
-console.log(node.getAttribute("viewBox")); // "0 0 100 100"
+svg.setAttribute("viewBox", "0 0 100 100");
 ```
 
 ## Specifications

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

@@ -238,6 +238,8 @@ _This interface inherits methods from the {{domxref("EventTarget")}} interface._
   - : Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame.
 - {{domxref("Window.requestIdleCallback()")}}
   - : Enables the scheduling of tasks during a browser's idle periods.
+- {{domxref("Window.requestResize()")}}
+  - : Updates the size information shared by an embedded document with its embedding parent, but only if the embedded document has opted in to sharing its size information.
 - {{domxref("Window.resizeBy()")}}
   - : Resizes the current window by a certain amount.
 - {{domxref("Window.resizeTo()")}}

files/en-us/web/api/window/requestresize/index.md

@@ -0,0 +1,136 @@
+---
+title: "Window: requestResize() method"
+short-title: requestResize()
+slug: Web/API/Window/requestResize
+page-type: web-api-instance-method
+browser-compat: api.Window.requestResize
+---
+
+{{APIRef}}
+
+The **`requestResize()`** method of the {{domxref("Window")}} interface updates the size information shared by an embedded document with its embedding parent, but only if the embedded document has opted in to sharing its size information via the [`<meta name="responsive-embedded-sizing">`](/en-US/docs/Web/HTML/Reference/Elements/meta/name/responsive-embedded-sizing) meta tag.
+
+## Syntax
+
+```js-nolint
+requestResize()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+None ({{jsxref("undefined")}}).
+
+### Exceptions
+
+- `NotAllowedError` {{domxref("DOMException")}}
+  - : Thrown if:
+    - The `requestResize()` method was called from a top-level (non-embedded) document.
+    - The embedding element is not an {{htmlelement("iframe")}}.
+    - The embedded document has not opted in to sharing its layout size by including a [`<meta name="responsive-embedded-sizing">`](/en-US/docs/Web/HTML/Reference/Elements/meta/name/responsive-embedded-sizing) tag.
+
+> [!NOTE]
+> If the parent document doesn't set the {{cssxref("frame-sizing")}} CSS property on the embedding `<iframe>`, no exception is thrown, but the `<iframe>` will not be resized.
+
+## Description
+
+For security and privacy reasons, {{htmlelement("iframe")}} elements do not by default expose any information to the parent document about the size of the content in the document they are embedding.
+
+To enable responsive sizing of `<iframe>` elements based on their content, the [`<meta name="responsive-embedded-sizing">`](/en-US/docs/Web/HTML/Reference/Elements/meta/name/responsive-embedded-sizing) tag can be included in an embedded document to opt it in to sharing its size information with the parent document. The {{cssxref("frame-sizing")}} CSS property can then be set on the `<iframe>` to cause it to adopt the same horizontal or vertical size as the embedded document's actual layout size (termed the **internal layout intrinsic size** in the spec). This ensures that the document content fits seamlessly into its embedding `<iframe>`, avoiding unnecessary scrollbars.
+
+The embedded document's layout size is automatically reported once when its {{domxref("Document.DOMContentLoaded_event", "DOMContentLoaded")}} event fires, and again when the {{domxref("Window")}} object's {{domxref("Window.load_event", "load")}} event fires.
+
+In other circumstances, you can call the {{domxref("Window.requestResize()")}} method from the embedded document to make it report an updated layout size; this is typically done from within the event handler that caused the embedded content to change size. If the `<iframe>` is sized using `frame-sizing`, it will then update its size automatically so that it still neatly contains the embedded content.
+
+## Examples
+
+### Using `requestResize()`
+
+This example shows how the `requestResize()` method can be used to automatically resize an `<iframe>` when the layout size of its embedded document content changes.
+
+We have two documents, the main `index.html` document, and the embedded `frame.html` document.
+
+#### The main `index.html`
+
+The `index.html` document's HTML contains a heading and an `<iframe>`, into which is embedded the `frame.html` document:
+
+```html
+<h1>Responsive iframes — basic example</h1>
+
+<iframe src="frame.html"></iframe>
+```
+
+In the `index.html` CSS, we give the `<iframe>` a `frame-sizing` value of `content-block-size`. Because the `<iframe>` has a horizontal `writing-mode`, its `height` will be set to the embedded document's layout height.
+
+```css
+iframe {
+  frame-sizing: content-block-size;
+  border: 2px solid gray;
+}
+```
+
+#### The embedded `frame.html`
+
+The `frame.html` document includes a {{htmlelement("div")}} element with a [`tabindex`](/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex) value of `0` set so that it is focusable. It contains a heading and some paragraphs. The document also includes the `<meta name="responsive-embedded-sizing" />` tag, which opts it in to sharing its content layout size with the parent document. Finally, we include a {{htmlelement("script")}} element containing some JavaScript to control the demo.
+
+```html
+<head>
+  ...
+
+  <meta name="responsive-embedded-sizing" />
+
+  ...
+</head>
+<body>
+  <div tabindex="0">
+    <h1>This is my frame</h1>
+    <p>This is the content of my discontent.</p>
+    <p>This is some more content.</p>
+  </div>
+  <script>
+    ...
+  </script>
+</body>
+```
+
+The script inside `frame.html` starts by grabbing a reference to the `<div>` element. It then sets `click` and `keydown` event listeners on the `<div>`, both of which run a custom function called `addParagraph()` when the event fires.
+
+```js
+const divElem = document.querySelector("div");
+divElem.addEventListener("click", addParagraph);
+window.addEventListener("keydown", addParagraph);
+```
+
+The `addParagraph()` function generates a new paragraph element and appends it to the end of the `<div>` as a child, increasing its height. It then calls `requestResize()` so that the new size is reported to the parent document.
+
+```js
+function addParagraph() {
+  const para = document.createElement("p");
+  para.textContent = "New content.";
+  divElem.appendChild(para);
+  window.requestResize();
+}
+```
+
+#### Result
+
+Open our [`requestResize()` demo](https://mdn.github.io/dom-examples/responsive-iframe-sizing/js-request-resize/) in a separate tab to see it in action ([see the source code](https://github.com/mdn/dom-examples/tree/main/responsive-iframe-sizing/js-request-resize)).
+
+Even though no explicit `height` has been set on the `<iframe>`, it is sized to the right height to exactly contain its embedded document, with no scroll bars. Try clicking on the content or focusing it and pressing a key on the keyboard. As a new paragraph is added to the `<div>`, the `<div>` grows in height, but the `<iframe>` also grows in height to match it.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{cssxref("frame-sizing")}} CSS property
+- [CSS box sizing](/en-US/docs/Web/CSS/Guides/Box_sizing) module
+- [`<meta name="responsive-embedded-sizing">`](/en-US/docs/Web/HTML/Reference/Elements/meta/name/responsive-embedded-sizing)

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

@@ -30,6 +30,7 @@ The [logical properties and values module](/en-US/docs/Web/CSS/Guides/Logical_pr
 - {{cssxref("contain-intrinsic-inline-size")}}
 - {{cssxref("contain-intrinsic-size")}}
 - {{cssxref("contain-intrinsic-width")}}
+- {{cssxref("frame-sizing")}}
 - {{cssxref("height")}}
 - {{cssxref("max-height")}}
 - {{cssxref("max-width")}}

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

@@ -235,7 +235,7 @@ border-shape: shape(
 padding: 24px;
 ```
 
-This way, the `padding` will be set outside the shape, causing it to get smaller, and forcing the background to fill up the parts of the shape extending outside the content area. You can see this technique in action in our [irregular jigsaw piece navigation menu](/en-US/docs/Web/CSS/Guides/Borders_and_box_decorations/border_shape_nav_menu) example.
+This way, the `padding` will be set outside the shape, causing it to get smaller, and forcing the background to fill up the parts of the shape extending outside the content area. You can see this technique in action in our [irregular jigsaw piece navigation menu](/en-US/docs/Web/CSS/Guides/Borders_and_box_decorations/Border_shape_nav_menu) example.
 
 ## Formal definition
 
@@ -543,7 +543,7 @@ Hover over or focus the paragraph to see the animation.
 
 - {{cssxref("border")}}
 - {{cssxref("corner-shape")}}
-- [Creating an irregular nav menu with border-shape](/en-US/docs/Web/CSS/Guides/Borders_and_box_decorations/border_shape_nav_menu)
+- [Creating an irregular nav menu with border-shape](/en-US/docs/Web/CSS/Guides/Borders_and_box_decorations/Border_shape_nav_menu)
 - [CSS borders and box decorations](/en-US/docs/Web/CSS/Guides/Borders_and_box_decorations) module
 - [CSS backgrounds and borders](/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders) module
 - [border-shape: the future of the non-rectangular web](https://una.im/border-shape) by Una Kravets (2026)

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

@@ -0,0 +1,129 @@
+---
+title: "`frame-sizing` CSS property"
+short-title: frame-sizing
+slug: Web/CSS/Reference/Properties/frame-sizing
+page-type: css-property
+browser-compat: css.properties.frame-sizing
+sidebar: cssref
+---
+
+The **`frame-sizing`** [CSS](/en-US/docs/Web/CSS) property can be used to set an {{htmlelement("iframe")}} element's horizontal or vertical size to equal the layout size of its embedded document in the same dimension, but only if the embedded document has opted in to sharing its size information.
+
+## Syntax
+
+```css
+/* Keyword values */
+frame-sizing: auto;
+frame-sizing: content-width;
+frame-sizing: content-height;
+frame-sizing: content-inline-size;
+frame-sizing: content-block-size;
+
+/* Global values */
+frame-sizing: inherit;
+frame-sizing: initial;
+frame-sizing: revert;
+frame-sizing: revert-layer;
+frame-sizing: unset;
+```
+
+### Values
+
+The `frame-sizing` property value is equal to one of the following keywords:
+
+- `auto`
+  - : The initial value. The `<iframe>` element's size is not affected by the layout size of its embedded document.
+- `content-width`
+  - : The `<iframe>` element's {{cssxref("width")}} is set to the layout width of its embedded document.
+- `content-height`
+  - : The `<iframe>` element's {{cssxref("height")}} is set to the layout height of its embedded document.
+- `content-inline-size`
+  - : The `<iframe>` element's {{cssxref("inline-size")}} is set to the layout size of its embedded document in the inline direction.
+- `content-block-size`
+  - : The `<iframe>` element's {{cssxref("block-size")}} is set to the layout size of its embedded document in the block direction.
+
+## Description
+
+For security and privacy reasons, {{htmlelement("iframe")}} elements do not by default expose any information to the parent document about the size of the content in the document they are embedding.
+
+To enable responsive sizing of {{htmlelement("iframe")}} elements based on their content, the [`<meta name="responsive-embedded-sizing">`](/en-US/docs/Web/HTML/Reference/Elements/meta/name/responsive-embedded-sizing) tag can be included in an embedded document to opt it in to sharing its size information with the parent document. The `frame-sizing` property can then be set on the `<iframe>` to cause it to adopt the same horizontal or vertical size as the embedded document's actual content size (termed the **internal layout intrinsic size** in the spec, but abbreviated to "layout size" in our documentation). The document content will then fit seamlessly into the embedding `<iframe>`, avoiding unnecessary scrollbars.
+
+The `frame-sizing` property can take values of `content-width` or `content-height` to cause the `<iframe>` element's `width` or `height` to adopt the embedded document's layout width or layout height, respectively.
+
+There are also logical equivalents available — `frame-sizing` can take values of `content-inline-size` or `content-block-size` to cause the `<iframe>` element's `inline-size` or `block-size` to adopt the embedded document's inline size or block size, respectively. The block or inline direction is determined by the `<iframe>` element's {{cssxref("writing-mode")}}, not that of the embedded document's content.
+
+To resize the `<iframe>` dynamically as the embedded document changes layout size, you can call the {{domxref("Window.requestResize()")}} method from the embedded document to make it report an updated size.
+
+## Formal definition
+
+{{cssinfo}}
+
+## Formal syntax
+
+{{csssyntax}}
+
+## Examples
+
+### Basic usage
+
+This example demonstrates usage of the `frame-sizing` property.
+
+We have two documents, the main `index.html` document, and the embedded `frame.html` document.
+
+#### The main `index.html`
+
+The `index.html` document's HTML contains a heading and an `<iframe>`, into which is embedded the `frame.html` document:
+
+```html
+<h1>Responsive iframes — basic example</h1>
+
+<iframe src="frame.html"></iframe>
+```
+
+In the `index.html` CSS, we give the `<iframe>` a `frame-sizing` value of `content-block-size`. Because the `<iframe>` has a horizontal `writing-mode`, its `height` will be set to the embedded document's layout height.
+
+```css
+iframe {
+  frame-sizing: content-block-size;
+  border: 2px solid gray;
+}
+```
+
+#### The embedded `frame.html`
+
+The `frame.html` document contains a heading and some paragraphs. More significantly, however, it includes the `<meta name="responsive-embedded-sizing" />` tag, which opts it in to sharing its content layout size with the parent document.
+
+```html
+<head>
+  ...
+
+  <meta name="responsive-embedded-sizing" />
+
+  ...
+</head>
+<body>
+  <h1>This is my frame</h1>
+  <p>This is the content of my discontent.</p>
+  <p>This is some more content.</p>
+</body>
+```
+
+#### Result
+
+Open our [basic responsive `<iframe>` sizing demo](https://mdn.github.io/dom-examples/responsive-iframe-sizing/basic/) in a separate tab to see it in action ([see the source code](https://github.com/mdn/dom-examples/tree/main/responsive-iframe-sizing/basic)).
+
+Even though no explicit `height` has been set on the `<iframe>`, it is sized to the right height to exactly contain its embedded document, with no scroll bars.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [CSS box sizing](/en-US/docs/Web/CSS/Guides/Box_sizing) module
+- [`<meta name="responsive-embedded-sizing">`](/en-US/docs/Web/HTML/Reference/Elements/meta/name/responsive-embedded-sizing)
+- {{domxref("Window.requestResize()")}}

files/en-us/web/html/reference/elements/iframe/index.md

@@ -219,6 +219,14 @@ Being a {{ glossary("replaced elements", "replaced element")}}, the `<iframe>` a
 
 The `error` and `load` events fired on `<iframe>`s could be used to probe the URL space of the local network's HTTP servers. Therefore, as a security precaution user agents do not fire the [error](/en-US/docs/Web/API/HTMLElement/error_event) event on `<iframe>`s, and the [load](/en-US/docs/Web/API/HTMLElement/load_event) event is always triggered even if the `<iframe>` content fails to load.
 
+## Responsive `<iframe>` sizing
+
+For security and privacy reasons, {{htmlelement("iframe")}} elements do not by default expose any information to the parent document about the size of the content in the document they are embedding.
+
+To enable responsive sizing of {{htmlelement("iframe")}} elements based on their content, the [`<meta name="responsive-embedded-sizing">`](/en-US/docs/Web/HTML/Reference/Elements/meta/name/responsive-embedded-sizing) tag can be included in an embedded document to opt it in to sharing its size information with the parent document. The {{cssxref("frame-sizing")}} CSS property can then be set on the `<iframe>` to cause it to adopt the same horizontal or vertical size as the embedded document's actual content size. This ensures that `<iframe>` content fits seamlessly into its embedder, avoiding unnecessary scrollbars.
+
+To resize the `<iframe>` dynamically as the embedded document changes layout size, you can call the {{domxref("Window.requestResize()")}} method from the embedded document to make it report an updated size.
+
 ## Accessibility
 
 People navigating with assistive technology such as a screen reader can use the [`title` attribute](/en-US/docs/Web/HTML/Reference/Global_attributes/title) on an `<iframe>` to label its content. The title's value should concisely describe the embedded content: