display-mode media query
The display-mode CSS media query sets styles based on whether the web page is in an ordinary browser tab mode or another mode, such as fullscreen, standalone, or minimal-ui.
Overview
The display-mode CSS media query sets styles based on whether the web page is in an ordinary browser tab mode or another mode, such as fullscreen, standalone, or minimal-ui.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 42 | 79 | 47 | 13 | 42 | 12.2 | |
| CSS at-rule | ||||||
display-mode.browser `browser` value | 42 | 79 | 47 | 13 | 42 | 12.2 |
display-mode.fullscreen `fullscreen` value | 47 | 79 | 47 | 13 | | 12.2 |
display-mode.minimal-ui `minimal-ui` value | 42 | 79 | 57 | 13 | 42 | 12.2 |
display-mode.standalone `standalone` value | 42 | 79 | 57 | 13 | 42 | 12.2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
- In a Safari browser window, `display-mode: browser` is always true, even in a macOS Full Screen window or when using the Fullscreen API. In an installed web application, other `display-mode` values are true only when given by a supported manifest `display` member value. See mdn/browser-compat-data#18807 (comment).
Notes 1 item(s)
Implementation note
- In the Safari app, `display-mode: browser` is always true, even when using the Fullscreen API. In an installed web application, other `display-mode` values are true only when given by a supported manifest `display` member value. See mdn/browser-compat-data#18807 (comment).
Notes 2 item(s)
Limitation
- This browser only partially implements this feature
Implementation note
- In Firefox's "Full Screen" user interface, browser tabs and other user interface appear but `display-mode: fullscreen` is true.
Notes 2 item(s)
Limitation
- This browser only partially implements this feature
Implementation note
- In a Safari browser window, `display-mode: fullscreen` is never true, even when using the Fullscreen API. See mdn/browser-compat-data#18807 (comment).
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Implementation note
- In the Safari app, `display-mode: fullscreen` is never true, even when using the Fullscreen API. See mdn/browser-compat-data#18807 (comment).
- In an installed web application with the `display` manifest member set to `standalone`, `display-mode: fullscreen` is true, even though the system status bar is visible. See bug 264218.
Notes 1 item(s)
Implementation note
- `display-mode: minimal-ui` is never true.
Notes 1 item(s)
Implementation note
- `display-mode: minimal-ui` is never true.
Notes 2 item(s)
Limitation
- This browser only partially implements this feature
Implementation note
- `display-mode: minimal-ui` is never true.
Notes 1 item(s)
Implementation note
- `display-mode: standalone` is never true.
Notes 2 item(s)
Limitation
- This browser only partially implements this feature
Implementation note
- In an installed web application with the `display` manifest member set to `standalone`, `display-mode: standalone` is false and `display-mode: fullscreen` is true. See bug 264218.
Syntax
CSS
@media (display-mode: standalone) {
.install-button { display: none; }
.app-header { padding-top: env(safe-area-inset-top); }
}Live demo
Use cases
Adaptive styling
Use display-mode media query to tailor layout or presentation to device features and user settings.
Progressive enhancement
Keep the default experience solid, then layer in device-specific or preference-aware improvements.
Cautions
- Do not rely on a media condition as the only path to essential functionality.
- Document the breakpoint or environment strategy so conditions stay consistent across the codebase.
Accessibility
- Media-query adaptations should preserve keyboard access, reading order, and touch usability.
- Preference-aware styling should enhance accessibility rather than replace baseline accessible defaults.
Related links
Powered by web-features