We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

The display-mode CSS media feature can be used to test the display mode of an application. You can use it to provide a consistent user experience between launching a site from a URL and launching it from a desktop icon.

This feature corresponds to the Web app manifest's display member. Both apply to the top-level browsing context and any child browsing contexts. The feature query applies regardless of whether a web app manifest is present.

Syntax

The display-mode feature is specified as a keyword value chosen from the list below.

Display mode Description Fallback display mode
fullscreen All of the available display area is used and no user agent chrome is shown. standalone
standalone The application will look and feel like a standalone application. This can include the application having a different window, its own icon in the application launcher, etc. In this mode, the user agent will exclude UI elements for controlling navigation, but can include other UI elements such as a status bar. minimal-ui
minimal-ui The application will look and feel like a standalone application, but will have a minimal set of UI elements for controlling navigation. The elements will vary by browser. browser
browser The application opens in a conventional browser tab or new window, depending on the browser and platform. (none)

Example

@media all and (display-mode: fullscreen) {
  body {
    margin: 0;
    border: 5px solid black;
  }
}

Specifications

Specification Status Comment
Web App Manifest
The definition of 'display-mode' in that specification.
Working Draft Initial definition.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 46.0[1] 47 (47)[2] ? ? ?
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support ? ? 47 (47)[2] ? ? ? 46.0[1]

[1] Does not support the minimal-ui value. @supports for display-mode is only supported starting with Chrome 48.

[2] Only the fullscreen and browser values were supported in 47. minimal-ui and standalone were added in Firefox 57.

Document Tags and Contributors

Contributors to this page: mfluehr, AllanKimmerJensen, chrisdavidmills, hexalys, jpmedley
Last updated by: mfluehr,