Skip to content

Commit

Permalink
Reworked to respond to feedback:
Browse files Browse the repository at this point in the history
- No longer solely based on manifest display modes, since browser and fullscreen are meaningful independent of manifest.
- Added a solid definition for browser and fullscreen rather than relying on that of the manifest spec.
- Added an example.
  • Loading branch information
mgiuca committed Feb 26, 2024
1 parent cfb1107 commit 0d8bf0c
Showing 1 changed file with 47 additions and 21 deletions.
68 changes: 47 additions & 21 deletions mediaqueries-5/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -1306,40 +1306,67 @@ Display Modes: the ''display-mode'' media feature </h3>
Type: discrete
</pre>

The 'display-mode' media feature represents the [=display mode=] of the current [=browsing context=].
Child browsing contexts reflect the [=display mode=] of their [=top-level browsing context=].
The '@media/display-mode' media feature describes the mode in which the current [=browsing context=] is
currently being presented to the end user. In child browsing contexts, the [=display mode=] must
match that of the [=top-level browsing context=].

This feature is primarily used to determine which [=display mode=] the user agent has applied to
an [=application context=]. As such, the values of this feature correspond to the [=display
mode|display modes=] defined in [[APPMANIFEST]]. However, it can also be used in non-application
contexts to determine whether the viewport is in fullscreen mode.

The values of this feature correspond to the [=display mode|display modes=] defined in
[[APPMANIFEST]]:

<dl dfn-type=value dfn-for="@media/display-mode">
<dt><dfn>fullscreen</dfn>
<dd>
The [=display mode/fullscreen=] display mode.
The browsing context is displayed with browser UI elements hidden and takes up the entirety of
the available display area. The fullscreen context may have been caused by the [=display
mode/fullscreen=] display mode in the [=application manifest=], by the {{requestFullscreen()}}
method of the [[FULLSCREEN|Fullscreen API]], or through some other means (such as the user
manually activating fullscreen mode using the user agent's built-in controls).

Corresponds to the [=display mode/fullscreen=] display mode.

<dt><dfn>standalone</dfn>
<dd>
The [=display mode/standalone=] display mode.
The [=display mode/standalone=] display mode is in use.

<dt><dfn>minimal-ui</dfn>
<dd>
The [=display mode/minimal-ui=] display mode.
The [=display mode/minimal-ui=] display mode is in use.

<dt><dfn>browser</dfn>
<dd>
The [=display mode/browser=] display mode.
The browsing context is displayed using the platform-specific convention for opening
hyperlinks in the user agent (e.g., in a browser tab or web browser window with controls such
as an address bar). This should be used for non-[=application context|application contexts=]
that are not fullscreen.

Corresponds to the [=display mode/browser=] display mode.
</dl>

This media feature reflects the actual [=display mode=] that is being used on the current browsing
context, not necessarily the one that was requested in the web app manifest (if any).
<div class="example">
For example, the [=application manifest=] can request the [=display mode/standalone=] [=display
mode=] as follows:
<pre class="lang-json">
{
"display": "standalone"
}
</pre>

This media query can be used to determine whether the user agent has actually applied the
[=display mode/standalone=] mode:

<pre class="lang-css">@media (display-mode: standalone) { … }</pre>

Note: When a page is being displayed in a normal web browser, 'display-mode' will always have a
value of ''browser''. Only pages appearing in the context of an [=installed web application=] will
have a different 'display-mode', reflecting the way in which the application window is being
presented to the end user.
The user agent could set '@media/display-mode' to any of the other values, depending on the
actual mode currently in use. When used outside of an [=application context=], the
'@media/display-mode' will always be ''display-mode/browser'' or ''display-mode/fullscreen''.
</div>

<details class="note">
<summary>The [=display mode/fullscreen=] [=display mode=] is distinct from the [[FULLSCREEN|Fullscreen API]].</summary>
<summary>The [=display mode/fullscreen=] [=display mode=] is distinct from the
[[FULLSCREEN|Fullscreen API]].</summary>

The ''fullscreen'' value for [=display-mode=] is not directly related
to the CSS '':fullscreen'' pseudo-class.
Expand All @@ -1363,18 +1390,17 @@ Display Modes: the ''display-mode'' media feature </h3>

<pre class="lang-css">
/* applies when the viewport is fullscreen */
@media (display-mode: fullscreen) {
...
}
@media (display-mode: fullscreen) { … }

/* applies when an element is fullscreen */
#game:fullscreen {
...
}
#game:fullscreen { … }
</pre>
</div>
</details>

Note: Additional values for this media feature may be added in the future to
match new [=display mode|display modes=] added to [[APPMANIFEST]].

<!--
████████ ████ ██████ ████████ ███████ ██ ██ ███ ██ ████ ████████ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
Expand Down

0 comments on commit 0d8bf0c

Please sign in to comment.