Skip to content
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

Jump to bottom

[mediaqueries-5] Add display-mode for document picture-in-picture #9260

Closed
beaufortfrancois opened this issue Aug 29, 2023 · 9 comments
Closed

[mediaqueries-5] Add display-mode for document picture-in-picture #9260

beaufortfrancois opened this issue Aug 29, 2023 · 9 comments
Labels
mediaqueries-5

Comments

@beaufortfrancois
Copy link
Contributor

Shall we consider Document 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.

Originally posted in WICG/document-picture-in-picture#87

Note that the Picture-in-Picture display mode is definitely on par with (and mutually incompatible with) a document being displayed fullscreen, etc.
@beaufortfrancois beaufortfrancois mentioned this issue Aug 29, 2023
Closed
@beaufortfrancois
Copy link
Contributor Author

@tabatkins What would be the next steps for this proposal?

@beaufortfrancois
Copy link
Contributor Author

@tabatkins (gentle ping) Is there anything I can to do to help move this proposal forward?

@andreasbovens
Copy link

What is the latest on this @tabatkins ?

@css-meeting-bot
Copy link
Member

The CSS Working Group just discussed [mediaqueries-5] Add display-mode for document picture-in-picture, and agreed to the following:

  • RESOLVED: Adopt picture-in-picture media query
The full IRC log of that discussion <TabAtkins> https://github.com/WICG/document-picture-in-picture
<Frances> Tab: There is a spec for the picture-in-picture feature. For the document, should it be exposed as a display mode to format differently? For how browser is wrapping you.
<emilio> q+
<Frances> PROPOSAL: Add display-mode for document picture-in-picture
<florian> q-
<astearns> ack Frances
<astearns> ack florian
<astearns> ack emilio
<Frances> Emilio: Alot of the preexisting values for this would be reasonable. How do the values intersect such as in full screen?
<Frances> Tab: Mutually exclusive, if not right, we can figure it out.
<Frances> Emilio: Not opposed. Probably file an issue in a variety of cases.
<Frances> Tab: Reviewed by people, about 60 issues.
<Frances> Alan: A couple avenues such as specifying what's there in the wiki-spec and take on the issues or in the repository
<Frances> Tab: All picture-in-picture api, displayed as pip or not?
<Frances> Alan: Any other comments on taking on a picture-in-picture media query?
<Frances> PROPOSAL: Adopt picture-in-picture media query
<Frances> Alan: Any objections?
<Frances> RESOLVED: Adopt picture-in-picture media query

@chromium-helper chromium-helper mentioned this issue Jan 17, 2024
Closed
@mozilla-apprentice mozilla-apprentice mentioned this issue Jan 17, 2024
Open
@beaufortfrancois
Copy link
Contributor Author

It's not clear to me what are the next steps.

Shall we update the document picture-in-picture spec with a new section dedicated to the display-mode "picture-in-picture" media query feature OR shall I start a media-query spec PR to add the display-mode "picture-in-picture" media query feature to the list in https://www.w3.org/TR/mediaqueries-5/#display-mode?

@tabatkins
Copy link
Member

Sorry about that, we should add it to the existing MQ5 list.

@beaufortfrancois
Copy link
Contributor Author

@tabatkins Shall I start a media-query spec PR then?

@beaufortfrancois beaufortfrancois mentioned this issue Feb 8, 2024
Merged
@beaufortfrancois
Copy link
Contributor Author

FYI I've started #9920. @tabatkins Please review.

@beaufortfrancois
Copy link
Contributor Author

@tabatkins What are the next steps? Shall I close this issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
mediaqueries-5
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@andreasbovens @beaufortfrancois @tabatkins @fantasai @chrishtr @css-meeting-bot