- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
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>
To Continue Learning Please Login
Login with Google