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:disabledform:enabled to detect sandbox="allow-forms" but looks like that’s not valid.
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
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.