Skip to content

Commit 874996c

Browse files
frivoalfrivoal
authored
Transfer display-mode to mediaqueries-5 (#1022)
See w3c/csswg-drafts#6343 and #975 (comment)
1 parent f65d00b commit 874996c

1 file changed

Lines changed: 19 additions & 187 deletions

File tree

‎index.html‎

Lines changed: 19 additions & 187 deletions
Original file line numberDiff line numberDiff line change
@@ -2378,67 +2378,14 @@ <h3>
23782378
</section>
23792379
<section>
23802380
<h2>
2381-
Display modes
2381+
Choosing a display mode
23822382
</h2>
23832383
<p>
2384-
A <dfn>display mode</dfn> represents how the web application is being
2384+
A [=display mode=], as defined in [[MEDIAQUERIES-5]],
2385+
represents how the web application is being
23852386
presented within the context of an OS (e.g., in fullscreen, etc.).
23862387
Display modes correspond to user interface (UI) metaphors and
2387-
functionality in use on a given platform. The UI conventions of the
2388-
display modes are purely advisory and implementers are free to
2389-
interpret them how they best see fit.
2390-
</p>
2391-
<p>
2392-
This specification defines the following [=display modes=]:
2393-
</p>
2394-
<dl>
2395-
<dt>
2396-
<dfn data-dfn-for="display mode">fullscreen</dfn>
2397-
</dt>
2398-
<dd>
2399-
Opens the web application with browser UI elements hidden and takes
2400-
up the entirety of the available display area.
2401-
</dd>
2402-
<dt>
2403-
<dfn data-dfn-for="display mode">standalone</dfn>
2404-
</dt>
2405-
<dd>
2406-
Opens the web application to look and feel like a standalone native
2407-
application. This can include the application having a different
2408-
window, its own icon in the application launcher, etc. In this mode,
2409-
the user agent will exclude standard browser UI elements such as an
2410-
URL bar, but can include other system UI elements such as a status
2411-
bar and/or system back button.
2412-
</dd>
2413-
<dt>
2414-
<dfn data-dfn-for="display mode">minimal-ui</dfn>
2415-
</dt>
2416-
<dd>
2417-
This mode is similar to [=display mode/standalone=], but provides the
2418-
end-user with some means to access a minimal set of UI elements for
2419-
controlling navigation (i.e., back, forward, reload, and perhaps some
2420-
way of viewing the document's address). A user agent can include
2421-
other platform specific UI elements, such as "share" and "print"
2422-
buttons or whatever is customary on the platform and user agent.
2423-
</dd>
2424-
<dt>
2425-
<dfn data-dfn-for="display mode">browser</dfn> (default)
2426-
</dt>
2427-
<dd>
2428-
Opens the web application using the platform-specific convention for
2429-
opening hyperlinks in the user agent (e.g., in a browser tab or a new
2430-
window).
2431-
</dd>
2432-
</dl>
2433-
<p class="note">
2434-
The [=display mode/fullscreen=] <a>display mode</a> is orthogonal to,
2435-
and works independently of, the [[[FULLSCREEN]]]. The [=display
2436-
mode/fullscreen=] <a>display mode</a> affects the fullscreen state of
2437-
the browser window, while the [[FULLSCREEN]] API operates on an element
2438-
contained within the viewport. As such, a web application can have its
2439-
<a>display mode</a> set to [=display mode/fullscreen=], while
2440-
`document.fullScreenElement` returns `null`, and `fullscreenEnabled`
2441-
returns `false`.
2388+
functionality in use on a given platform.
24422389
</p>
24432390
<p>
24442391
Once a user agent [=applies=] a particular <a>display mode</a> to an
@@ -2518,130 +2465,17 @@ <h2>
25182465
mode/fullscreen=]", "[=display mode/standalone=]", "[=display
25192466
mode/minimal-ui=]", "[=display mode/browser=]" ».
25202467
</p>
2521-
<section data-cite="css-conditional-3">
2522-
<h3>
2523-
The `'display-mode'` media feature
2524-
</h3>
2525-
<table class="def descdef mq">
2526-
<tbody>
2527-
<tr>
2528-
<th>
2529-
Name:
2530-
</th>
2531-
<td>
2532-
<dfn data-dfn-for="@media" data-dfn-type="descriptor"
2533-
data-export="">display-mode</dfn>
2534-
</td>
2535-
</tr>
2536-
<tr>
2537-
<th>
2538-
For:
2539-
</th>
2540-
<td>
2541-
<a data-xref-type="css-at-rule">@media</a>
2542-
</td>
2543-
</tr>
2544-
<tr>
2545-
<th>
2546-
Value:
2547-
</th>
2548-
<td class="prod">
2549-
[=display mode/fullscreen=] | [=display mode/standalone=] |
2550-
[=display mode/minimal-ui=] | [=display mode/browser=]
2551-
</td>
2552-
</tr>
2553-
<tr>
2554-
<th>
2555-
Type:
2556-
</th>
2557-
<td>
2558-
discrete
2559-
</td>
2560-
</tr>
2561-
</tbody>
2562-
</table>
2563-
<p>
2564-
The `display-mode` media feature represents, via a CSS media query
2565-
[[MEDIAQ]], the <a>display mode</a> of the web application. This
2566-
media feature applies to the top-level browsing context and any child
2567-
browsing contexts. Child browsing contexts reflect the <a>display
2568-
mode</a> of the <a>top-level browsing context</a>.
2569-
</p>
2570-
<p>
2571-
A user agent MUST expose the '`display-mode`' media feature
2572-
irrespective of whether a manifest is being applied to a browsing
2573-
context. For example, if the end-user puts the whole user agent into
2574-
fullscreen, then the user agent would reflect this change to CSS and
2575-
scripts via the '`display-mode`' media feature.
2576-
</p>
2577-
<aside class="note">
2578-
<p>
2579-
Please note that the `fullscreen` <a>display mode</a> is not
2580-
directly related to the CSS `:fullscreen` pseudo-class specified in
2581-
the [[[FULLSCREEN]]]. The `:fullscreen` pseudo-class matches
2582-
exclusively when a [[HTML]] element is put into the fullscreen
2583-
element stack. However, a side effect of calling the
2584-
`requestFullscreen()` method on an element using the [[FULLSCREEN]]
2585-
API is that the browser window can enter a fullscreen mode at the
2586-
OS-level. In such a case, both `:fullscreen` and `(display-mode:
2587-
fullscreen)` will match.
2588-
</p>
2589-
<p>
2590-
On some platforms, it is possible for a user to put a browser
2591-
window into fullscreen without the aid of the [[[FULLSCREEN]]].
2592-
When this happens, the `:fullscreen` pseudo class will not match,
2593-
but `(display-mode: fullscreen)` will match. This is exemplified in
2594-
CSS code below.
2595-
</p>
2596-
<pre class="example css">
2597-
/* applies when the window is fullscreen */
2598-
@media all and (display-mode: fullscreen) {
2599-
...
2600-
}
2601-
2602-
/* applies when an element goes fullscreen */
2603-
#game:fullscreen {
2604-
...
2605-
}
2606-
</pre>
2607-
</aside>
2608-
<p>
2609-
A user agent MUST reflect the applied <a>display mode</a> of the web
2610-
application via a CSS media query [[MEDIAQ]].
2611-
</p>
2612-
<section>
2613-
<h4>
2614-
Examples
2615-
</h4>
2616-
<p>
2617-
An example in CSS:
2618-
</p>
2619-
<pre class="example css" title="Using 'display-mode' media feature">
2620-
@media all and (display-mode: minimal-ui) {
2621-
/* ... */
2622-
}
2623-
@media all and (display-mode: standalone) {
2624-
/* ... */
2625-
}
2626-
</pre>
2627-
<p>
2628-
Accessing the display-mode media feature in ECMAScript through
2629-
`matchMedia()` of [[CSSOM-VIEW]]:
2630-
</p>
2631-
<pre class="example js" title=
2632-
"Accessing 'display-mode' media feature with script">
2633-
const standalone = matchMedia( '(display-mode: standalone)' );
2634-
2635-
standalone.onchange = (e) =&gt; {
2636-
/* handle changes to display mode */
2637-
}
2638-
2639-
if (standalone.matches) {
2640-
/* do standalone things */
2641-
}
2642-
</pre>
2643-
</section>
2644-
</section>
2468+
<p>
2469+
A user agent MUST reflect the applied <a>display mode</a> of the web
2470+
application in the '`display-mode`' media feature [[MEDIAQUERIES-5]].
2471+
</p>
2472+
<p class=note>
2473+
A user agent will expose the '`display-mode`' media feature
2474+
irrespective of whether a manifest is being applied to a browsing
2475+
context. For example, if the end-user puts the application into
2476+
fullscreen, then the user agent would reflect this change to CSS and
2477+
scripts via the '`display-mode`' media feature.
2478+
</p>
26452479
</section>
26462480
<section id="priv-sec">
26472481
<h2>
@@ -2746,13 +2580,11 @@ <h2>
27462580
animated transition, or speaking the text "Launching application X".
27472581
</p>
27482582
<p>
2749-
The `'display-mode'` media feature allows an origin access to aspects
2750-
of a user’s local computing environment and, together with the
2751-
`display` member, allows an origin some measure of control over a user
2752-
agent’s native UI: Through a CSS media query, a script can know the
2753-
display mode of a web application. An attacker could, in such a case,
2754-
exploit the fact that an application is being displayed in fullscreen
2583+
The `display` member allows an origin some measure of control over a user
2584+
agent’s native UI. After taking over the full screen, it could attempt
27552585
to mimic the user interface of another application.
2586+
This is also facilitated by the `'display-mode'` media feature [[MEDIAQUERIES-5]],
2587+
through which a script can know the display mode of a web application.
27562588
</p>
27572589
</section>
27582590
<section class="appendix">

0 commit comments

Comments
 (0)