Skip to content

Commit 482479d

Browse files
frivoalfrivoal
committed
[mediaqueries-5] Import display-modes (#6343)
1 parent 931804b commit 482479d

File tree

1 file changed

+100
-1
lines changed

1 file changed

+100
-1
lines changed

‎mediaqueries-5/Overview.bs

Lines changed: 100 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1292,6 +1292,105 @@ Vertical Viewport Segments: the '@media/vertical-viewport-segments' feature
12921292
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) { … }
12931293
12941294

1295+

1296+
Display Modes: the ''display-mode'' media feature
1297+
1298+
1299+
	Name: display-mode
1300+
	Value: fullscreen | standalone | minimal-ui | browser
1301+
	For: @media
1302+
	Type: discrete
1303+
	
1304+
1305+
	The 'display-mode' media feature represents the [=display mode=] of the web application.
1306+
	Child browsing contexts reflect the [=display mode=] of their [=top-level browsing context=].
1307+
1308+
	A display mode represents
1309+
	how the web application is being presented within the context of an OS (e.g., in fullscreen, etc.).
1310+
	Display modes correspond to user interface (UI) metaphors
1311+
	and functionality in use on a given platform.
1312+
	The UI conventions of the display modes are purely advisory
1313+
	and implementers are free to interpret them how they best see fit.
1314+
1315+
	This specification defines the following [=display modes=]:
1316+
	
1317+
		
fullscreen
1318+
		
1319+
			The web application is displayed with browser UI elements hidden
1320+
			and takes up the entirety of the available display area.
1321+
1322+
		
standalone
1323+
		
1324+
			The web application is displayed to look and feel like a standalone native application.
1325+
			This can include the application having a different window,
1326+
			its own icon in the application launcher, etc.
1327+
			In this mode,
1328+
			the user agent excludes standard browser UI elements
1329+
			such as an URL bar,
1330+
			but standard system UI elements,
1331+
			such as window decorations, a system status bar, and/or a system back button,
1332+
			remain available.
1333+
1334+
		
minimal-ui
1335+
		
1336+
			This mode is similar to [=display mode/standalone=],
1337+
			but provides the end-user with some means to access
1338+
			a minimal set of UI elements for controlling navigation
1339+
			(i.e., back, forward, reload, and perhaps some way of viewing the document's address).
1340+
			A user agent may include other platform specific UI elements,
1341+
			such as "share" and "print" buttons
1342+
			or whatever is customary on the platform and user agent.
1343+
1344+
		
browser
1345+
		
1346+
			The web application is displayed using the platform-specific convention
1347+
			for opening hyperlinks in the user agent
1348+
			(e.g., in a browser tab or a new window).
1349+
	
1350+
1351+
	
1352+
		The [=display mode/fullscreen=] [=display mode=] is distinct from the [[FULLSCREEN|Fullscreen API]].
1353+
1354+
		The [=display mode/fullscreen=] [=display mode=] describes the fullscreen state of the browser viewport,
1355+
		while the [[FULLSCREEN|Fullscreen API]] operates on an element contained within the viewport.
1356+
		As such, a web application can have its [=display mode=] set to [=display mode/fullscreen=],
1357+
		even while {{fullscreenElement}} returns null,
1358+
		and {{fullscreenEnabled}} returns false.
1359+
1360+
		The ''fullscreen'' display mode is also not directly related
1361+
		to the CSS '':fullscreen'' pseudo-class.
1362+
		The '':fullscreen'' pseudo-class matches an element
1363+
		exclusively when that element is put into the fullscreen element stack.
1364+
		However, a side effect of calling the {{requestFullscreen()}} method
1365+
		on an element using the [[FULLSCREEN|Fullscreen API]]
1366+
		can be that the browser enters a fullscreen mode at the OS-level,
1367+
		in which case both '':fullscreen'' and ''(display-mode: fullscreen)'' will match.
1368+
	
1369+
1370+
	
1371+
		On some platforms,
1372+
		it is possible for a user--
1373+
		or a  [[APPMANIFEST|Web Application Manifest]]--
1374+
		to put a web application into fullscreen
1375+
		without invoking the [[FULLSCREEN|Fullscreen API]].
1376+
		When this happens,
1377+
		the '':fullscreen'' pseudo class will not match,
1378+
		but ''(display-mode: fullscreen)'' will match.
1379+
		This is exemplified in CSS code below:
1380+
1381+
		
1382+
			/* applies when the viewport is fullscreen */
1383+
			@media (display-mode: fullscreen) {
1384+
				...
1385+
			}
1386+
1387+
			/* applies when an element is fullscreen */
1388+
			#game:fullscreen {
1389+
				...
1390+
			}
1391+
		
1392+
	
1393+
12951394
 commit comments
Comments
 (0)