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 Medien-Feature kann verwendet werden, um zu testen, ob eine Web-App in einem normalen Browser-Tab oder auf eine alternative Weise angezeigt wird, wie zum Beispiel als eigenständige App oder im Vollbildmodus.
Beispielsweise:
-
Eine Progressive Web App kann ihren Anzeigemodus einstellen, indem das
display-Mitglied in ihrem Manifest gesetzt wird. In diesem Fall identifiziert der Wert vondisplay-modeden gesetzten Wert (jedoch kann dies von dem im Manifest angeforderten Wert abweichen, 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 identifiziert der Wert von
display-modeden gesetzten Modus.
Der display-mode-Wert gilt für den obersten Browsing-Kontext und alle untergeordneten Browsing-Kontexte.
Syntax
Das display-mode-Feature wird als Schlüsselwortwert spezifiziert, der aus der folgenden Liste ausgewählt wird.
browser-
Die Anwendung öffnet sich in einem herkömmlichen Browser-Tab oder einem neuen Fenster, abhängig vom Browser und der Plattform.
fullscreen-
Der gesamte verfügbare Anzeigebereich wird genutzt und es wird keine Benutzeroberflächen-Chrome angezeigt. Dies kann verwendet werden, um CSS nur dann anzuwenden, wenn die App durch die Fullscreen API oder durch Verwendung des
fullscreen-Wertes desdisplay-Mitglieds des Web-App-Manifests im Vollbildmodus ist. minimal-ui-
Die Anwendung wird wie eine eigenständige Anwendung aussehen und wirken, wird jedoch eine minimale Anzahl von UI-Elementen zur Steuerung der Navigation haben. Die Elemente variieren je nach Browser.
picture-in-picture-
Dieser Modus erlaubt Benutzern, spezifische Inhalte weiterhin zu konsumieren, während sie mit anderen Seiten oder Anwendungen auf ihrem Gerät interagieren. Die App wird in einem schwebenden und immer im Vordergrund stehenden 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 wirken. Dies kann beinhalten, dass die Anwendung ein eigenes Fenster, ein eigenes Symbol im App-Launcher usw. hat. In diesem Modus wird der Benutzeragent UI-Elemente zur Steuerung der Navigation ausschließen, kann jedoch andere UI-Elemente wie eine Statusleiste einschließen.
window-controls-overlay-
In diesem Modus sieht die Anwendung wie eine eigenständige Desktop-Anwendung aus und fühlt sich auch so an, 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 display-mode: picture-in-picture-Wert mit dem prefers-color-scheme-Medien-Feature, um helle und dunkle Farbschemas zu erstellen, die basierend auf der Farbschema-Präferenz des Benutzers 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;
}
}
Sehen Sie sich Using the Document Picture-in-Picture API für weitere Informationen und ein vollständiges Beispiel an.
Spezifikationen
| Specification |
|---|
| Media Queries Level 5 # display-modes |
Browser-Kompatibilität
Loading…