CSS - display-mode

display-mode is a CSS media feature that selectively applies CSS based on the display mode of the application. This feature corresponds the Web app manifest's display member. Both apply to the top-level browsing context and any child browsing contexts. This query applies regardless of whether a web app manifest is present. Use this query to provide a consistant user experience between launching a site from an URL and lunching it from a desktop icon.

Example

 

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

Description  

display-mode is a CSS media feature that selectively applies CSS based on the display mode of the application. This feature corresponds the Web app manifest's display member. Both apply to the top-level browsing context and any child browsing contexts. This query applies regardless of whether a web app manifest is present. Use this query to provide a consistant user experience between launching a site from an URL and lunching it from a desktop icon.

Its value can be one of the following:

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)

Browser Compatibility  

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

 

Specifications  

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

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/@media/display-mode

@media CSS display display-mode media feature web app manifest