From e313f31530030a134ab4caa4385fbd640f22c3f1 Mon Sep 17 00:00:00 2001 From: Matt Giuca Date: Wed, 25 May 2022 14:45:03 +1000 Subject: [PATCH 01/10] Move the definition of display-mode back to APPMANIFEST. Closes #7306. This text was moved out of the Manifest spec into CSS mediaqueries-5 in w3c/csswg-drafts#6343, along with the display-mode media feature. The actual definition of display mode belongs in Manifest, while the display-mode media feature remains here. Added some more text explaining how the display-mode media feature works given that this is in a separate spec to where web apps are defined. --- mediaqueries-5/Overview.bs | 116 +++++++++++-------------------------- 1 file changed, 33 insertions(+), 83 deletions(-) diff --git a/mediaqueries-5/Overview.bs b/mediaqueries-5/Overview.bs index 20f0e8662b3..5cb719e4480 100644 --- a/mediaqueries-5/Overview.bs +++ b/mediaqueries-5/Overview.bs @@ -1306,72 +1306,22 @@ Display Modes: the ''display-mode'' media feature Type: discrete - The 'display-mode' media feature represents the [=display mode=] of the web application. + 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=]. - A display mode represents - how the web application is being presented within the context of an OS (e.g., in fullscreen, etc.). - Display modes correspond to user interface (UI) metaphors - and functionality in use on a given platform. - The UI conventions of the display modes are purely advisory - and implementers are free to interpret them how they best see fit. + The values of this feature correspond to the [=display mode|display modes=] defined in + [[APPMANIFEST]]. However, 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). - This specification defines the following [=display modes=]: -
-
fullscreen -
- The web application is displayed with browser UI elements hidden - and takes up the entirety of the available display area. - -
standalone -
- The web application is displayed to look and feel like a standalone native application. - This can include the application having a different window, - its own icon in the application launcher, etc. - In this mode, - the user agent excludes standard browser UI elements - such as an URL bar, - but standard system UI elements, - such as window decorations, a system status bar, and/or a system back button, - remain available. - -
minimal-ui -
- This mode is similar to [=display mode/standalone=], - but provides the end-user with some means to access - a minimal set of UI elements for controlling navigation - (i.e., back, forward, reload, and perhaps some way of viewing the document's address). - A user agent may include other platform specific UI elements, - such as "share" and "print" buttons - or whatever is customary on the platform and user agent. - -
browser -
- The web application is displayed using the platform-specific convention - for opening hyperlinks in the user agent - (e.g., in a browser tab or a new window). - -
picture-in-picture -
- This mode allows users to continue consuming media while they interact - with other sites or applications on their device. - The web application is displayed in a floating and always-on-top window. - A user agent may include other platform specific UI elements, - such as "back-to-tab" and "site information" buttons - or whatever is customary on the platform and user agent. - -
+ On normal web pages, 'display-mode' will have a value of 'browser'. Only pages appearing in the + context of an [=installed web application=] can have a different 'display-mode', reflecting the + way in which the application window is being presented to the end user.
The [=display mode/fullscreen=] [=display mode=] is distinct from the [[FULLSCREEN|Fullscreen API]]. - The [=display mode/fullscreen=] [=display mode=] describes the fullscreen state of the browser viewport, - while the [[FULLSCREEN|Fullscreen API]] operates on an element contained within the viewport. - As such, a web application can have its [=display mode=] set to [=display mode/fullscreen=], - even while {{fullscreenElement}} returns null, - and {{fullscreenEnabled}} returns false. - - The ''fullscreen'' display mode is also not directly related + The ''fullscreen'' value for [=display-mode=] is not directly related to the CSS '':fullscreen'' pseudo-class. The '':fullscreen'' pseudo-class matches an element exclusively when that element is put into the fullscreen element stack. @@ -1379,31 +1329,31 @@ Display Modes: the ''display-mode'' media feature on an element using the [[FULLSCREEN|Fullscreen API]] can be that the browser enters a fullscreen mode at the OS-level, in which case both '':fullscreen'' and ''(display-mode: fullscreen)'' will match. -
-
- On some platforms, - it is possible for a user-- - or a [[APPMANIFEST|Web Application Manifest]]-- - to put a web application into fullscreen - without invoking the [[FULLSCREEN|Fullscreen API]]. - When this happens, - the '':fullscreen'' pseudo class will not match, - but ''(display-mode: fullscreen)'' will match. - This is exemplified in CSS code below: - - 
-			/* applies when the viewport is fullscreen */
-			@media (display-mode: fullscreen) {
-				...
-			}
+		

+			On some platforms,
+			it is possible for a user--
+			or a  [[APPMANIFEST|Web Application Manifest]]--
+			to put a web application into fullscreen
+			without invoking the [[FULLSCREEN|Fullscreen API]].
+			When this happens,
+			the '':fullscreen'' pseudo class will not match,
+			but ''(display-mode: fullscreen)'' will match.
+			This is exemplified in CSS code below:
+
+			
+				/* applies when the viewport is fullscreen */
+				@media (display-mode: fullscreen) {
+					...
+				}
 
-			/* applies when an element is fullscreen */
-			#game:fullscreen {
-				...
-			}
-		

-	

+				/* applies when an element is fullscreen */
+				#game:fullscreen {
+					...
+				}
+
+
+