8000 [mediaqueries-5] Move the definition of display-mode back to APPMANIFEST · w3c/csswg-drafts@e8cc514 · GitHub
[go: up one dir, main page]

Skip to content

Commit e8cc514

Browse files
mgiucagrorg
authored andcommitted
[mediaqueries-5] Move the definition of display-mode back to APPMANIFEST
Closes #7306 Closes #7307
1 parent 7fa3a64 commit e8cc514

File tree

1 file changed

+76
-66
lines changed

1 file changed

+76
-66
lines changed

mediaqueries-5/Overview.bs

Lines changed: 76 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1306,104 +1306,112 @@ Display Modes: the ''display-mode'' media feature </h3>
13061306
Type: discrete
13071307
</pre>
13081308

1309-
The 'display-mode' media feature represents the [=display mode=] of the web application.
1310-
Child browsing contexts reflect the [=display mode=] of their [=top-level browsing context=].
1311-
1312-
A <dfn export>display mode</dfn> represents
1313-
how the web application is being presented within the context of an OS (e.g., in fullscreen, etc.).
1314-
Display modes correspond to user interface (UI) metaphors
1315-
and functionality in use on a given platform.
1316-
The UI conventions of the display modes are purely advisory
1317-
and implementers are free to interpret them how they best see fit.
1318-
1319-
This specification defines the following [=display modes=]:
1320-
<dl dfn-for="display mode" export>
1309+
The '@media/display-mode' media feature describes the mode in which the current [=browsing context=] is
1310+
currently being presented to the end user. In child browsing contexts, the [=display mode=] must
1311+
match that of the [=top-level browsing context=].
1312+
1313+
This feature is primarily used to determine which [=display mode=] the user agent has applied to
1314+
an [=application context=]. As such, the values of this feature correspond to the [=display
1315+
mode|display modes=] defined in [[APPMANIFEST]]. However, it can also be used in non-application
1316+
contexts to determine whether the viewport is in other modes, such as
1317+
fullscreen or picture-in-picture.
1318+
1319+
1320+
<dl dfn-type=value dfn-for="@media/display-mode">
13211321
<dt><dfn>fullscreen</dfn>
13221322
<dd>
1323-
The web application is displayed with browser UI elements hidden
1324-
and takes up the entirety of the available display area.
1323+
The browsing context is displayed with browser UI elements hidden and takes up the entirety of
1324+
the available display area. The fullscreen context may have been caused by the [=display
1325+
mode/fullscreen=] display mode in the [=application manifest=], by the {{requestFullscreen()}}
1326+
method of the [[FULLSCREEN|Fullscreen API]], or through some other means (such as the user
1327+
manually activating fullscreen mode using the user agent's built-in controls).
1328+
1329+
Corresponds to the [=display mode/fullscreen=] display mode.
13251330

13261331
<dt><dfn>standalone</dfn>
13271332
<dd>
1328-
The web application is displayed to look and feel like a standalone native application.
1329-
This can include the application having a different window,
1330-
its own icon in the application launcher, etc.
1331-
In this mode,
1332-
the user agent excludes standard browser UI elements
1333-
such as an URL bar,
1334-
but standard system UI elements,
1335-
such as window decorations, a system status bar, and/or a system back button,
1336-
remain available.
1333+
The [=display mode/standalone=] display mode is in use. Only applicable in an [=application
1334+
context=].
13371335

13381336
<dt><dfn>minimal-ui</dfn>
13391337
<dd>
1340-
This mode is similar to [=display mode/standalone=],
1341-
but provides the end-user with some means to access
1342-
a minimal set of UI elements for controlling navigation
1343-
(i.e., back, forward, reload, and perhaps some way of viewing the document's address).
1344-
A user agent may include other platform specific UI elements,
1345-
such as "share" and "print" buttons
1346-
or whatever is customary on the platform and user agent.
1338+
The [=display mode/minimal-ui=] display mode is in use. Only applicable in an [=application
1339+
context=].
13471340

13481341
<dt><dfn>browser</dfn>
13491342
<dd>
1350-
The web application is displayed using the platform-specific convention
1351-
for opening hyperlinks in the user agent
1352-
(e.g., in a browser tab or a new window).
1343+
The browsing context is displayed using the platform-specific convention for opening
1344+
hyperlinks in the user agent (e.g., in a browser tab or web browser window with controls such
< 8000 code>1345+
as an address bar). This should be used for non-[=application context|application contexts=]
1346+
where no other display mode is appropriate.
1347+
1348+
Corresponds to the [=display mode/browser=] display mode.
13531349

13541350
<dt><dfn>picture-in-picture</dfn>
13551351
<dd>
13561352
This mode allows users to continue consuming media while they interact
13571353
with other sites or applications on their device.
1358-
The web application is displayed in a floating and always-on-top window.
1354+
The browsing context is displayed in a floating and always-on-top window.
13591355
A user agent may include other platform specific UI elements,
13601356
such as "back-to-tab" and "site information" buttons
13611357
or whatever is customary on the platform and user agent.
13621358

13631359
</dl>
13641360

1365-
<details class="note">
1366-
<summary>The [=display mode/fullscreen=] [=display mode=] is distinct from the [[FULLSCREEN|Fullscreen API]].</summary>
1361+
<div class="example">
1362+
For example, the [=application manifest=] can request the [=display mode/standalone=] [=display
1363+
mode=] as follows:
1364+
<pre class="lang-json">
1365+
{
1366+
"display": "standalone"
1367+
}
1368+
</pre>
1369+
1370+
This media query can be used to determine whether the user agent has actually applied the
1371+
[=display mode/standalone=] mode:
13671372

1368-
The [=display mode/fullscreen=] [=display mode=] describes the fullscreen state of the browser viewport,
1369-
while the [[FULLSCREEN|Fullscreen API]] operates on an element contained within the viewport.
1370-
As such, a web application can have its [=display mode=] set to [=display mode/fullscreen=],
1371-
even while {{fullscreenElement}} returns <code>null</code>,
1372-
and {{fullscreenEnabled}} returns <code>false</code>.
1373+
<pre class="lang-css">@media (display-mode: standalone) { … }</pre>
13731374

1374-
The ''fullscreen'' <a>display mode</a> is also not directly related
1375+
The user agent could set '@media/display-mode' to any of the other values, depending on the
1376+
actual mode currently in use.
1377+
</div>
1378+
1379+
<details class="note">
1380+
<summary>The [=display mode/fullscreen=] [=display mode=] is distinct from the
1381+
[[FULLSCREEN|Fullscreen API]].</summary>
1382+
1383+
The ''fullscreen'' value for [=display-mode=] is not directly related
13751384
to the CSS '':fullscreen'' pseudo-class.
13761385
The '':fullscreen'' pseudo-class matches an element
13771386
exclusively when that element is put into the fullscreen element stack.
13781387
However, a side effect of calling the {{requestFullscreen()}} method
13791388
on an element using the [[FULLSCREEN|Fullscreen API]]
13801389
can be that the browser enters a fullscreen mode at the OS-level,
13811390
in which case both '':fullscreen'' and ''(display-mode: fullscreen)'' will match.
1382-
</details>
1383-
1384-
<div class="example">
1385-
On some platforms,
1386-
it is possible for a user--
1387-
or a [[APPMANIFEST|Web Application Manifest]]--
1388-
to put a web application into fullscreen
1389-
without invoking the [[FULLSCREEN|Fullscreen API]].
1390-
When this happens,
1391-
the '':fullscreen'' pseudo class will not match,
1392-
but ''(display-mode: fullscreen)'' will match.
1393-
This is exemplified in CSS code below:
13941391

1395-
<pre class="lang-css">
1396-
/* applies when the viewport is fullscreen */
1397-
@media (display-mode: fullscreen) {
1398-
...
1399-
}
1392+
<div class="example">
1393+
On some platforms,
1394+
it is possible for a user--
1395+
or a [[APPMANIFEST|Web Application Manifest]]--
1396+
to put a web application into fullscreen
1397+
without invoking the [[FULLSCREEN|Fullscreen API]].
1398+
When this happens,
1399+
the '':fullscreen'' pseudo class will not match,
1400+
but ''(display-mode: fullscreen)'' will match.
1401+
This is exemplified in CSS code below:
1402+
1403+
<pre class="lang-css">
1404+
/* applies when the viewport is fullscreen */
1405+
@media (display-mode: fullscreen) { … }
1406+
1407+
/* applies when an element is fullscreen */
1408+
#game:fullscreen { … }
1409+
</pre>
1410+
</div>
1411+
</details>
14001412

1401-
/* applies when an element is fullscreen */
1402-
#game:fullscreen {
1403-
...
1404-
}
1405-
</pre>
1406-
</div>
1413+
Note: Additional values for this media feature may be added in the future to
1414+
match new [=display mode|display modes=] added to [[APPMANIFEST]].
14071415

14081416
<!--
14091417
████████ ████ ██████ ████████ ███████ ██ ██ ███ ██ ████ ████████ ██ ██
@@ -3411,6 +3419,8 @@ In addition to editorial changes and minor clarifications,
34113419
the following changes and additions were made to this module since the
34123420
<a href="https://www.w3.org/TR/2021/WD-mediaqueries-5-20211218/">2021-12-18 Working Draft</a>:
34133421

3422+
* Moved 'display mode' definition back to [[APPMANIFEST]] ('display-mode' media feature remains
3423+
here). (See <a href="https://github.com/w3c/csswg-drafts/issues/7306">Issue 7306</a>)
34143424
* Establish a normative reference for [[Display-P3]]
34153425
* Disallow use of ''layer'' as a media type, rather than merely treat it as an unknown one, for compatibility with [=cascade layers=].
34163426
* Clarify intent of 'prefers-reduced-motion'
@@ -3423,7 +3433,7 @@ In addition to editorial changes and minor clarifications,
34233433
the following changes and additions were made to this module since the
34243434
<a href="https://www.w3.org/TR/2020/WD-mediaqueries-5-20200731/">2020-07-31 Working Draft</a>:
34253435

3426-
* Adopted 'display-mode' from [[APPMANIFEST]].
3436+
* Adopted 'display mode' definition and media feature from [[APPMANIFEST]].
34273437
(See <a href="https://github.com/w3c/csswg-drafts/issues/6343">Issue 6343</a>)
34283438
* Dropped the media features what were meant to query about the geometry of the video plane
34293439
in <a href="#video-prefixed-features">bi-plane implementations</a>:

0 commit comments

Comments
 (0)
0