@@ -1306,104 +1306,112 @@ Display Modes: the ''display-mode'' media feature </h3>
1306
1306
Type : discrete
1307
1307
</pre>
1308
1308
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">
1321
1321
<dt> <dfn>fullscreen</dfn>
1322
1322
<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.
1325
1330
1326
1331
<dt> <dfn>standalone</dfn>
1327
1332
<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=] .
1337
1335
1338
1336
<dt> <dfn>minimal-ui</dfn>
1339
1337
<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=] .
1347
1340
1348
1341
<dt> <dfn>browser</dfn>
1349
1342
<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.
1353
1349
1354
1350
<dt> <dfn>picture-in-picture</dfn>
1355
1351
<dd>
1356
1352
This mode allows users to continue consuming media while they interact
1357
1353
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.
1359
1355
A user agent may include other platform specific UI elements,
1360
1356
such as "back-to-tab" and "site information" buttons
1361
1357
or whatever is customary on the platform and user agent.
1362
1358
1363
1359
</dl>
1364
1360
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:
1367
1372
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>
1373
1374
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
1375
1384
to the CSS '':fullscreen'' pseudo-class.
1376
1385
The '':fullscreen'' pseudo-class matches an element
1377
1386
exclusively when that element is put into the fullscreen element stack.
1378
1387
However, a side effect of calling the {{requestFullscreen()}} method
1379
1388
on an element using the [[FULLSCREEN|Fullscreen API]]
1380
1389
can be that the browser enters a fullscreen mode at the OS-level,
1381
1390
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:
1394
1391
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>
1400
1412
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]] .
1407
1415
1408
1416
<!--
1409
1417
████████ ████ ██████ ████████ ███████ ██ ██ ███ ██ ████ ████████ ██ ██
@@ -3411,6 +3419,8 @@ In addition to editorial changes and minor clarifications,
3411
3419
the following changes and additions were made to this module since the
3412
3420
<a href="https://www.w3.org/TR/2021/WD-mediaqueries-5-20211218/">2021-12-18 Working Draft</a> :
3413
3421
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> )
3414
3424
* Establish a normative reference for [[Display-P3]]
3415
3425
* Disallow use of ''layer'' as a media type, rather than merely treat it as an unknown one, for compatibility with [=cascade layers=] .
3416
3426
* Clarify intent of 'prefers-reduced-motion'
@@ -3423,7 +3433,7 @@ In addition to editorial changes and minor clarifications,
3423
3433
the following changes and additions were made to this module since the
3424
3434
<a href="https://www.w3.org/TR/2020/WD-mediaqueries-5-20200731/">2020-07-31 Working Draft</a> :
3425
3435
3426
- * Adopted 'display- mode' from [[APPMANIFEST]] .
3436
+ * Adopted 'display mode' definition and media feature from [[APPMANIFEST]] .
3427
3437
(See <a href="https://github.com/w3c/csswg-drafts/issues/6343">Issue 6343</a> )
3428
3438
* Dropped the media features what were meant to query about the geometry of the video plane
3429
3439
in <a href="#video-prefixed-features">bi-plane implementations</a> :
0 commit comments