CSS for iframes

CSS
#1

I think it could be useful to detect when content is loaded in an iframe embedded in another page rather than loaded on it’s own in a browser window.

Maybe something along the lines of a CSS :root selector. Would iframe:root make sense or :iframe?

Also I think it would make sense to be able to detect the permissions of an iframe sandbox from within the content.

Currently we can style differently if allow-scripts is not included in the sandbox attribute by adding styles (or content) in <noscript> tags to detect this.

I was hoping to be able to use something like form:disabled form:enabled to detect sandbox="allow-forms" but looks like that’s not valid.

And other sandbox values I’m sure could have some benefits <iframe>: The Inline Frame element - HTML: HyperText Markup Language | MDN

Not sure what the best way to approach this but something similar to the CSS @supports query would make the most sense to me. @function not (script){} could be used instead of <noscript><style></style></noscript>

This may well have use outside of an iframe too.

I’d be interested if people had any thoughts around this

#2

I think it’d be a good idea to expand on the use cases, but also separate the proposals.

I think there are several proposals here, to:

  1. Detect whether a document is embedded

    This is already advertised in supporting browsers via the Sec-Fetch-Dest header. OTOH you want to be able to do this using CSS.

  2. Detect if a particular feature (e.g. forms) is disabled due to sandboxing, using CSS.

  3. Detect if scripting is disabled/enabled, using CSS and without <noscript>.

    There is a CSS scripting media feature. But it is currently not supported in any browsers.

#3

Thanks @Malvoz

scripting

That’s great, I didn’t know about the scripting media feature that’s part of my idea already answered.

iframe

I’m now wondering if detecting an iframe could be covered by display-mode, it seems to me that adding an options for @media (display-mode: iframe) might make sense?

features

And for features something like @media not (sandbox: allow-forms) {} to detect that forms are not allowed.

use cases

When offering an option to embed a post, article, quote, chart etc. people often create a subdomain, so www.example.com/foo becomes embed.example.com/foo.

With this proposal that wouldn’t be needed, you can strip out any unwanted additional content with some CSS. If there are any scripts, forms, modals, etc. used they could be hidden if not supported or kept if they are.

It also allows more control from the person embedding the iframe, they can choose what permissions they are comfortable allowing using the sandbox attribute, and the content will adapt.

Some of this may be possible to do with JS but that is also the most likely thing to be disabled.

2 Likes