CSS @media display-mode Property

Posted in CSS Tutorial

Updated on Oct 06, 2024

By Mari Selvan

👁️ 20 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The @media (display-mode) feature in CSS is used to apply specific styles based on how a web page is displayed, whether it's in fullscreen, standalone, minimal-ui, or browser mode.

This property is particularly useful for Progressive Web Apps (PWAs) where you might want to adapt your styles depending on how the user has launched the app (in a standalone window versus a browser tab).

💡 Syntax

The @media (display-mode) media feature is used within a media query and can be combined with other media features. The basic syntax looks like this:

Syntax

Copied

@media (display-mode: mode) {
  /* CSS rules go here */
}

Here, mode refers to one of the display modes that the property supports.

🏠 Property Values

The @media display-mode property supports the following values:

fullscreen: Indicates that the document is being displayed in full-screen mode.
standalone: The page is being displayed as an installed web application without browser UI (like a PWA).
minimal-ui: The document is displayed in a minimal UI, with only the necessary browser controls.
browser: The page is being displayed within a standard browser window, with all browser controls visible.

🎛️ Default Value

The display-mode property does not have a default value because it is used within a media query. If not specified, the page behaves as usual without any specific display mode styling.

📝 Example Usage

📜 Basic Usage

In this example, we apply different styles based on whether the page is displayed in standalone mode or fullscreen mode.

example.scss

Copied

/* Styles for standalone display mode (e.g., PWA) */
@media (display-mode: standalone) {
  body {
    background-color: lightgreen;
  }
}

/* Styles for fullscreen display mode */
@media (display-mode: fullscreen) {
  body {
    background-color: lightblue;
  }
}

/* Styles for browser display mode */
@media (display-mode: browser) {
  body {
    background-color: white;
  }
}

📜 HTML Example

example.scss

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS @media display-mode Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>@media display-mode Property</h1>
  <p>This page changes background color based on the display mode.</p>
</body>
</html>

In this example:

If the page is viewed in standalone mode (e.g., as a Progressive Web App), the background color changes to light green.
In fullscreen mode, the background color changes to light blue.
In browser mode, the background remains white.

🖥️ Browser Compatibility

The @media display-mode property is supported by most modern browsers. Ensure you test your site in different browsers to guarantee proper behavior across various display modes, especially if your site or app is intended to function as a Progressive Web App (PWA).

🎉 Conclusion

The @media (display-mode) property is a useful tool for tailoring your website's appearance based on the environment in which it is displayed.

This is particularly beneficial for Progressive Web Apps, where the look and feel of the application can differ depending on whether it's viewed in a browser, full screen, or as a standalone app. By leveraging this property, you can enhance the user experience and ensure your site looks great in any mode.