display-mode
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
La caractéristique média CSS display-mode permet de tester si une application web est affichée dans un onglet de navigateur classique ou d'une autre manière, comme une application autonome ou en mode plein écran.
Par exemple :
-
Une application web progressive peut définir son mode d'affichage en définissant la propriété
displaydans son manifeste. Dans ce cas, la valeur dedisplay-modeidentifie la valeur définie (mais il faut noter que cela peut différer de la valeur demandée dans le manifeste, car le navigateur peut ne pas prendre en charge le mode demandé). -
Toute application web peut utiliser l'API Fullscreen ou l'API Document Picture-in-Picture pour définir le mode d'affichage, et dans ce cas la valeur de
display-modeidentifie le mode défini.
La valeur de display-mode s'applique au contexte de navigation de plus haut niveau ainsi qu'à tous les contextes enfants.
Syntaxe
La caractéristique display-mode se définit à l'aide d'une valeur-mot-clé choisie parmi la liste suivante :
browser-
L'application s'ouvre dans un onglet de navigateur classique ou une nouvelle fenêtre, selon le navigateur et la plateforme.
fullscreen-
Toute la surface d'affichage disponible est utilisée et aucun aspect visible de l'agent utilisateur n'est affichée. Cela permet d'appliquer du CSS uniquement lorsque l'application est en mode plein écran via l'API Fullscreen ou en utilisant la valeur
fullscreende la propriétédisplaydu manifeste de l'application web. minimal-ui-
L'application ressemble à une application autonome, mais dispose d'un ensemble minimal d'éléments d'interface pour la navigation. Les éléments varient selon le navigateur.
picture-in-picture-
Ce mode permet à l'utilisateur·ice de continuer à consommer un contenu spécifique tout en interagissant avec d'autres sites ou applications sur son appareil. L'application est affichée dans une fenêtre flottante toujours au premier plan. Cela permet d'appliquer du CSS uniquement lorsque l'application est en mode Picture-in-Picture via l'API Document Picture-in-Picture.
standalone-
L'application ressemble à une application autonome. Cela peut inclure une fenêtre différente, sa propre icône dans le lanceur d'applications, etc. Dans ce mode, l'agent utilisateur exclut les éléments d'interface pour la navigation, mais peut inclure d'autres éléments comme une barre d'état.
window-controls-overlay-
Dans ce mode, l'application ressemble à une application de bureau autonome et la fonctionnalité de superposition des commandes de fenêtre est activée.
Exemples
Appliquer du CSS si l'application est en mode plein écran
@media (display-mode: fullscreen) {
body {
margin: 0;
border: 5px solid black;
}
}
Fournir un thème clair et sombre au contenu Picture-in-Picture
Dans cet exemple, on combine la valeur display-mode: picture-in-picture avec la caractéristique média prefers-color-scheme pour créer des thèmes clair et sombre appliqués selon la préférence de l'utilisateur·ice, uniquement lorsque l'application est affichée en mode image dans l'image (Picture-in-Picture en anglais).
@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;
}
}
Voir Utiliser l'API Document Picture-in-Picture pour plus d'informations et un exemple complet.
Spécifications
| Specification |
|---|
| Media Queries Level 5 # display-modes |
Compatibilité des navigateurs
Loading…