From 951520f516ec45cab6d0f34a46483a84e0533ea6 Mon Sep 17 00:00:00 2001 From: Florian Rivoal Date: Fri, 3 Dec 2021 10:34:01 +0900 Subject: [PATCH] Transfer display-mode to mediaqueries-5 See https://github.com/w3c/csswg-drafts/issues/6343 and https://github.com/w3c/manifest/issues/975#issuecomment-853456738 --- index.html | 206 +++++------------------------------------------------ 1 file changed, 19 insertions(+), 187 deletions(-) diff --git a/index.html b/index.html index 5ec43a674..9d76cc90d 100644 --- a/index.html +++ b/index.html @@ -2378,67 +2378,14 @@

- Display modes + Choosing a display mode

- A display mode represents how the web application is being + A [=display mode=], as defined in [[MEDIAQUERIES-5]], + 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. The UI conventions of the - display modes are purely advisory and implementers are free to - interpret them how they best see fit. -

-

- This specification defines the following [=display modes=]: -

-
-
- fullscreen -
-
- Opens the web application with browser UI elements hidden and takes - up the entirety of the available display area. -
-
- standalone -
-
- Opens the web application to look and feel like a standalone native - application. This can include the application having a different - window, its own icon in the application launcher, etc. In this mode, - the user agent will exclude standard browser UI elements such as an - URL bar, but can include other system UI elements such as a status - bar and/or system back button. -
-
- minimal-ui -
-
- This mode is similar to [=display mode/standalone=], but provides the - end-user with some means to access a minimal set of UI elements for - controlling navigation (i.e., back, forward, reload, and perhaps some - way of viewing the document's address). A user agent can include - other platform specific UI elements, such as "share" and "print" - buttons or whatever is customary on the platform and user agent. -
-
- browser (default) -
-
- Opens the web application using the platform-specific convention for - opening hyperlinks in the user agent (e.g., in a browser tab or a new - window). -
-
-

- The [=display mode/fullscreen=] display mode is orthogonal to, - and works independently of, the [[[FULLSCREEN]]]. The [=display - mode/fullscreen=] display mode affects the fullscreen state of - the browser window, while the [[FULLSCREEN]] API operates on an element - contained within the viewport. As such, a web application can have its - display mode set to [=display mode/fullscreen=], while - `document.fullScreenElement` returns `null`, and `fullscreenEnabled` - returns `false`. + functionality in use on a given platform.

Once a user agent [=applies=] a particular display mode to an @@ -2518,130 +2465,17 @@

mode/fullscreen=]", "[=display mode/standalone=]", "[=display mode/minimal-ui=]", "[=display mode/browser=]" ».

-
-

- The `'display-mode'` media feature -

- - - - - - - - - - - - - - - - - - - -
- Name: - - display-mode -
- For: - - @media -
- Value: - - [=display mode/fullscreen=] | [=display mode/standalone=] | - [=display mode/minimal-ui=] | [=display mode/browser=] -
- Type: - - discrete -
-

- The `display-mode` media feature represents, via a CSS media query - [[MEDIAQ]], the display mode of the web application. This - media feature applies to the top-level browsing context and any child - browsing contexts. Child browsing contexts reflect the display - mode of the top-level browsing context. -

-

- A user agent MUST expose the '`display-mode`' media feature - irrespective of whether a manifest is being applied to a browsing - context. For example, if the end-user puts the whole user agent into - fullscreen, then the user agent would reflect this change to CSS and - scripts via the '`display-mode`' media feature. -

- -

- A user agent MUST reflect the applied display mode of the web - application via a CSS media query [[MEDIAQ]]. -

-
-

- Examples -

-

- An example in CSS: -

- 
-            @media all and (display-mode: minimal-ui) {
-              /* ... */
-            }
-            @media all and (display-mode: standalone) {
-              /* ... */
-            }
-
-

- Accessing the display-mode media feature in ECMAScript through - `matchMedia()` of [[CSSOM-VIEW]]: -

- 
-            const standalone = matchMedia( '(display-mode: standalone)' );
-
-            standalone.onchange = (e) => {
-              /* handle changes to display mode */
-            }
-
-            if (standalone.matches) {
-              /* do standalone things */
-            }
-
-
-
+

+ A user agent MUST reflect the applied display mode of the web + application in the '`display-mode`' media feature [[MEDIAQUERIES-5]]. +

+

+ A user agent will expose the '`display-mode`' media feature + irrespective of whether a manifest is being applied to a browsing + context. For example, if the end-user puts the application into + fullscreen, then the user agent would reflect this change to CSS and + scripts via the '`display-mode`' media feature. +

@@ -2746,13 +2580,11 @@

animated transition, or speaking the text "Launching application X".

- The `'display-mode'` media feature allows an origin access to aspects - of a user’s local computing environment and, together with the - `display` member, allows an origin some measure of control over a user - agent’s native UI: Through a CSS media query, a script can know the - display mode of a web application. An attacker could, in such a case, - exploit the fact that an application is being displayed in fullscreen + The `display` member allows an origin some measure of control over a user + agent’s native UI. After taking over the full screen, it could attempt to mimic the user interface of another application. + This is also facilitated by the `'display-mode'` media feature [[MEDIAQUERIES-5]], + through which a script can know the display mode of a web application.