Skip to content

[css-sizing-4] Add responsively-sized iframes #13099

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[css-sizing-4] Add responsively-sized iframes #13099

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 60 additions & 1 deletion css-sizing-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -530,7 +530,7 @@ Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-*' properties</h3>

<pre class=propdef>
Name: contain-intrinsic-width, contain-intrinsic-height, contain-intrinsic-block-size, contain-intrinsic-inline-size
Value: auto? [ none | <<length [0,∞]>> ]
Value: auto? [ none | <<length [0,∞]>> ] | from-element
Initial: none
Inherited: no
Logical property group: contain-intrinsic-size
Expand Down Expand Up @@ -573,6 +573,11 @@ Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-*' properties</h3>
<wpt pathprefix="css/css-contain/">
content-visibility/content-visibility-058.html
</wpt>

: <dfn>from-element</dfn>
:: This value enables the <a>responsively-sized iframes</a>.
Copy link
Contributor

@chrishtr chrishtr Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add a sentence here saying something like "from-element applies only to iframe elements, and applies regardless of the value of the contain CSS property". (contain has no impact on the iframe element regardless)

Copy link
Contributor

@chrishtr chrishtr Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We also need to add support for the width and height second and third parameters of from-element, in order to avoid/reduce CLS when loading a page.


Note: The name needs further discussion.
</dl>

If an element has an [=explicit intrinsic inner size=] in an axis,
Expand Down Expand Up @@ -656,6 +661,60 @@ Last Remembered Size</h4>
even across changes such as going to/from ''display: none''.
</div>

<h4 id='responsive-iframes' dfn lt="responsively-sized iframes" export>
Responsively-sized iframes</h4>

Iframes participate in the layout of the parent document,
via the style and layout of their owning <code>&lt;iframe></code> element.
However, unlike other HTML elements such as <code>&lt;div></code>,
iframe elements do not have the ability to support responsive layout,
i.e. size themselves automatically
to contain the [=natural size=] dimensions of the contents of the iframe.
Instead, browsers automatically add scrollbars to iframes as necessary,
so that users can access the content.

Responsive iframes adds responsive layout to iframes,
similar to embedded SVG documents
in <code>&lt;object></code> and <code>&lt;embed></code> elements.

To preserve privacy and security guarantees of cross-origin content,
both the embedding and embedded document must opt in.
The embedding document opts in by applying the ''from-element'' value to
the ''contain-intrinsic-block-size'' property on the &lt;iframe> element.
The embedded document opts in by adding the
&lt;meta name="responsive-embedded-sizing"> tag.

When the meta tag is present at the time of
the <code>DOMContentLoaded</code> and <code>load</code> events,
the embedding document is notified
with the new [=natural height=] of the embedded document.
If the ''contain-intrinsic-block-size''
on the box for the &lt;iframe> element is set to ''from-element'',
it takes this height as the [=explicit intrinsic inner size=] of the box.
Subsequent changes to content, styling or layout of the embedded document
do not affect the &lt;iframe> sizing.

<div class='example'>
When the embedded document has the following HTML:
<pre highlight=html>
&lt;meta name="responsive-embedded-sizing">
&lt;div style="height: 500px">&lt;/div>
</pre>
and the embedding document has the following CSS:
<pre highlight=css>
iframe {
contain-intrinsic-block-size: from-element;
}
</pre>
The height of the <code>&lt;iframe></code> will be 500px.
</div>

In addition,
the embedded document can call <code>window.requestResize()</code>
to notify its new [=natural height=] to the embedding document.
If the meta tag is not present at the time of the call,
it throws a NotAllowedError DOMException instead.

<h4 id='cis-scrollbars'>
Interaction With ''overflow: auto''</h4>

Expand Down