[csswg-drafts] [mediaqueries-5] Add display-mode for document picture-in-picture (#9260)

beaufortfrancois has just created a new issue for https://github.com/w3c/csswg-drafts:

== [mediaqueries-5] Add display-mode for document picture-in-picture ==
Shall we consider [Document Picture-in-Picture](https://github.com/WICG/document-picture-in-picture) as a type of ["display mode"](https://www.w3.org/TR/mediaqueries-5/#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:

```css
@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.

_Originally posted in https://github.com/WICG/document-picture-in-picture/issues/87_

---

Note that the Picture-in-Picture display mode is definitely on par with (and mutually incompatible with) a document being displayed fullscreen, etc.



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9260 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 29 August 2023 09:16:58 UTC