A Document PiP-specific display mode

[andreasbovens]

We've implemented Document PiP in Whereby, and were wondering if it could be an idea to consider Picture-in-Picture as a type of "display mode". For reference, display modes are used with e.g. PWAs, which can have display modes of e.g. standalone or fullscreen, reflecting their window state. In a similar way, Picture-in-Picture can be considered a (more temporary) type of display mode.

https://www.w3.org/TR/mediaqueries-5/#display-mode defines "display mode" as follows:

A display mode represents how the web application is being presented within the context of an OS (e.g., in fullscreen, etc.). Display modes correspond to user interface (UI) metaphors and functionality in use on a given platform.

This seems to match with how PiP windows behave and what they do. A display-mode media feature for picture-in-picture would then allow us to write specific CSS rules that are only applied when (part of the) the application is shown in picture-in-picture mode. For example:

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

In this example, we're adding a modification that removes margins on the body element, and reduces the font-size of titles when in PiP mode — this could be done in an attempt to better fit the content in question inside the PiP window, while the rest of the CSS is just applied as normal.

NB: there is already a :picture-in-picture pseudo class, but in my opinion, it's more for one-off adjustments; if a number of rules need to be modified, a special display mode seems to be a better fit.

[beaufortfrancois]

@steimelchrome @liberato-at-chromium WDYT?

Note that we have a :picture-in-picture CSS pseudo class already in https://www.w3.org/TR/picture-in-picture/#css-pseudo-class

[liberato-at-chromium]

media query: Having a display mode for picture in picture makes sense to me. It fits well with other common themes for media queries: "narrow pip" vs "wide pip", for example.

I think this idea came up during some of our internal discussions around the spec, but we tabled it for lack of time.

pseudo-class: This might also work, but not sure if we need both. @beaufortfrancois are you thinking that it would apply to just the body? If it's allowed, I'm picturing something like: :picture-in-picture h1 { font-size: 0.8em; }. But I freely admit that my understanding of CSS is weak :)

alternatively, would :pip apply to all elements in the pip window?

[beaufortfrancois]

pseudo-class: This might also work, but not sure if we need both. @beaufortfrancois are you thinking that it would apply to just the body? If it's allowed, I'm picturing something like: :picture-in-picture h1 { font-size: 0.8em; }. But I freely admit that my understanding of CSS is weak :)

I don't think we should use the :picture-in-picture CSS pseudo class at it specifies a special state of selected element(s). In this case, it's about document/pages.

[liberato-at-chromium]

Media query was also my preference, for pretty much the same reason: the pseudo class applies to the opener to style the hole left behind by the video, rather than to the popup content. It's only accidental that it could be used for both purposes, because pip windows cannot open other pip windows.

Anyway, media query sgtm. @steimelchrome - WDYT?

[steimelchrome]

Having a picture-in-picture display mode that applies to document picture-in-picture makes sense to me

[andreasbovens]

That's great 🙂 How shall we move this forward?

[beaufortfrancois]

I wonder if we could ask @tabatkins' early opinion on this before filing a feature request at https://github.com/w3c/csswg-drafts/issues?

[tabatkins]

I agree that this is appropriate for an MQ (it's whole-document, not element-specific) and in particular it seems to be appropriate for the display-mode MQ. This is definitely on par with (and mutually incompatible with) a document being displayed fullscreen, etc.

[beaufortfrancois]

Thank you @tabatkins! I've filed https://github.com/w3c/csswg-drafts/issues/9260

[beaufortfrancois]

Here's a status update:

• The spec PR https://github.com/w3c/csswg-drafts/pull/9920 has been merged. See definition at https://drafts.csswg.org/mediaqueries-5/#display-mode-picture-in-picture
• The blink-dev process was started: https://groups.google.com/a/chromium.org/g/blink-dev/c/OE1rXYv126c
• CSS display-mode experimental support for picture-in-picture is now available in Chrome Canary behind the experimental web platform features flag. See https://chromiumdash.appspot.com/commit/feec59141dfbef0543100614b568f2b8f7e71af1
• I've just sent an intent to ship to blink-dev: https://groups.google.com/a/chromium.org/g/blink-dev/c/_Ml1o8xYZc8

@andreasbovens Let me know if it works for you!

You can try it at https://document-picture-in-picture-api.glitch.me/display-mode.html

<style>
  body {
    background: red;
  }
  @media (display-mode: picture-in-picture) {
    body {
      background: blue;
    }
  }
</style>