display-mode
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Das display-mode CSS Media-Feature kann verwendet werden, um zu testen, ob eine Web-App in einem normalen Browser-Tab oder auf eine alternative Weise angezeigt wird, z. B. als eigenständige App oder im Vollbildmodus.
Zum Beispiel:
-
Eine progressive Web-App kann ihren Anzeigemodus festlegen, indem das Mitglied
displayim Manifest gesetzt wird. In diesem Fall gibt der Wert vondisplay-modeden gesetzten Wert an (beachten Sie jedoch, dass dies möglicherweise nicht mit dem im Manifest angeforderten Wert übereinstimmt, da ein Browser den angeforderten Modus möglicherweise nicht unterstützt). -
Jede Web-App kann die Fullscreen API oder die Document Picture-in-Picture API verwenden, um den Anzeigemodus festzulegen. In diesem Fall gibt der Wert von
display-modeden gesetzten Modus an.
Der display-mode-Wert gilt für den obersten Browsing-Kontext sowie für alle untergeordneten Browsing-Kontexte.
Syntax
Das display-mode-Feature wird als Schlüsselwortwert angegeben, der aus der folgenden Liste ausgewählt wird.
browser-
Die Anwendung öffnet sich je nach Browser und Plattform in einem herkömmlichen Browser-Tab oder einem neuen Fenster.
fullscreen-
Der gesamte verfügbare Anzeigebereich wird genutzt und es wird kein User-Agent-Chrome angezeigt. Dies kann verwendet werden, um CSS nur dann anzuwenden, wenn die App durch die Fullscreen API oder unter Verwendung des Werts
fullscreendesdisplay-Mitglieds des Web App Manifests in den Vollbildmodus versetzt wurde. minimal-ui-
Die Anwendung wird wie eine eigenständige Anwendung aussehen und sich anfühlen, wird jedoch nur eine minimale Anzahl von UI-Elementen zur Steuerung der Navigation haben. Die Elemente variieren je nach Browser.
picture-in-picture-
Dieser Modus ermöglicht es den Nutzern, bestimmte Inhalte weiterhin zu konsumieren, während sie mit anderen Websites oder Anwendungen auf ihrem Gerät interagieren. Die App wird in einem schwebenden und immer im Vordergrund befindlichen Fenster angezeigt. Dies kann verwendet werden, um CSS nur dann anzuwenden, wenn die App durch die Document Picture-in-Picture API in den Picture-in-Picture-Modus versetzt wurde.
standalone-
Die Anwendung wird wie eine eigenständige Anwendung aussehen und sich anfühlen. Dies kann umfassen, dass die Anwendung ein eigenes Fenster, ein eigenes Symbol im Anwendungsstarter usw. hat. In diesem Modus wird der User-Agent UI-Elemente zur Steuerung der Navigation ausschließen, kann aber andere UI-Elemente wie eine Statusleiste einbeziehen.
window-controls-overlay-
In diesem Modus sieht die Anwendung aus und fühlt sich an wie eine eigenständige Desktop-Anwendung, und das Window Controls Overlay-Feature ist aktiviert.
Beispiele
CSS anwenden, wenn die Anwendung im Vollbildmodus ist
@media (display-mode: fullscreen) {
body {
margin: 0;
border: 5px solid black;
}
}
Ein helles und dunkles Farbschema für Picture-in-Picture-Inhalte bereitstellen
In diesem Beispiel kombinieren wir den Wert display-mode: picture-in-picture mit dem prefers-color-scheme Media-Feature, um helle und dunkle Farbschemata zu erstellen, die je nach Farbschema-Präferenz des Nutzers angewendet werden, nur wenn die App im Picture-in-Picture-Modus angezeigt wird.
@media (display-mode: picture-in-picture) and (prefers-color-scheme: light) {
body {
background: antiquewhite;
}
}
@media (display-mode: picture-in-picture) and (prefers-color-scheme: dark) {
body {
background: #333333;
}
a {
color: antiquewhite;
}
}
Siehe Verwendung der Document Picture-in-Picture API für weitere Informationen und ein vollständiges Beispiel.
Spezifikationen
| Specification |
|---|
| Media Queries Level 5 # display-modes |