CSS Media Features - display-mode

The display-mode media feature is used to detect and style web content based on the current display mode of a web application. It can be used to maintain the uniform user experience (i.e create styles that adapt to different modes), whether a site is accessed from a URL in a browser or launched from a desktop icon.

Possible Values

The display-mode media feature can have the following values:

  • fullscreen − This value indicates that the web application is in full-screen mode. This mode typically hides the browser's user interface elements, giving more screen real estate to the web application.

  • standalone − This value indicates that the web application is running in a standalone mode, which is often used for web apps that have been added to the home screen or opened as separate applications. It's usually presented without the browser's address bar and navigation controls.

  • minimal-ui − This value indicates that the web application is in minimal UI mode, where the browser's user interface is partially hidden, providing more space for the web app content. This mode is less common and may not be supported by all browsers.

  • browser − This value indicates that the web application is running in the default browser mode, where it's displayed within the regular web browser interface with all of its controls and features.

  • window-controls-overlay − this value targets applications that are displayed in a separate window on the user's desktop, with the Window Controls Overlay feature turned on.

Syntax

@media (display-mode: fullscreen|standalone|minimal-ui|browser|window-controls-overlay){
   //css style
}

CSS display-mode - fullscreen Value

The following example demonstrates that the display-mode: fullscreen media feature is used to change the layout of a web page when it is in fullscreen mode −

Press the F11 key to enter fullscreen mode. You will observe the background color changes to violet and text color to white.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   body {
      background-color: pink;
      text-align: center;
   }
   h1 {
      color: black;
   }
   @media (display-mode: fullscreen) {
      body {
         background-color: violet;
         color: white;
      }
   }
</style>
</head>
<body>
   <h1>CSS display-mode: fullscreen</h1>
   <p>To see the effect mode press F11 keyboard shortcuts windows fo fullscreen.</p>
</body>
</html>

CSS display-mode - standalone Value

The following example demonstrates how to use display-mode: standalone media feature to style a web page differently when it is displayed in standalone mode −

When you launch the web application in standalone mode, it changes the background color to violet and the text color to white.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   body {
      background-color: pink;
      text-align: center;
   }
   h1 {
      color: black;
   }
   @media (display-mode: standalone) {
      body {
         background-color: violet;
         color: white;
      }
   }
</style>
</head>
<body>
   <h1>CSS display-mode: standalone</h1>
   <p>To see the effect you need to launcheced the web application to home screen of the mobile.</p>
</body>
</html>

CSS display-mode - minimal-ui Value

The following example demonstrates how to use the display-mode: minimal-ui media feature to style a web page differently when it is displayed in minimal UI mode −

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   body {
      background-color: pink;
      text-align: center;
   }
   h1 {
      color: black;
   }
   @media (display-mode: minimal-ui) {
      body {
         background-color: violet;
         color: white;
      }
   }
</style>
</head>
<body>
   <h1>CSS display-mode: minimal-ui</h1>
   <p>To view the example in minimal UI mode, you can open the page in a PWA or in a mobile browser and then swipe down from the top of the screen to reveal the browser UI elements. Once the browser UI elements are revealed, tap on the "Hide UI" button to enter minimal UI mode.</p>
</body>
</html>

CSS display-mode - browser Value

The following example demonstrates how to use the display-mode: browser media feature to change the layout of the web page when it is opened in browser −

When you open a page in browser window, it changes the background color to violet and text color to blue. 
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   body {
      background-color: pink;
      text-align: center;
   }
   h1 {
      color: red;
   }
   @media (display-mode: browser) {
      body {
         background-color: violet;
         color: blue;
      }
   }
</style>
</head>
<body>
   <h1>CSS display-mode: browser</h1>
   <p>To view the example in a browser, you can open the HTML file in a web browser.</p>
</body>
</html>

CSS display-mode - window-controls-overlay Value

The following example demonstrates how to use the display-mode: window-controls-overlay media feature to change the background color of the body element to violet and the text color to white −

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   body {
      background-color: pink;
      text-align: center;
   }
   h1 {
      color: red;
   }
   @media (display-mode: window-controls-overlay) {
      body {
         background-color: violet;
         color: white;
      }
   }
</style>
</head>
<body>
   <h1>CSS display-mode: window-controls-overlay</h1>
   <p>To view the example in window controls overlay mode, install the PWA Builder extension and install the page as a PWA. Then, launch the PWA in a separate window and click the maximize button.</p>
</body>
</html>
Advertisements