diff options
Diffstat (limited to 'files/fr/web/css/@media/display-mode/index.md')
| -rw-r--r-- | files/fr/web/css/@media/display-mode/index.md | 80 |
1 files changed, 22 insertions, 58 deletions
diff --git a/files/fr/web/css/@media/display-mode/index.md b/files/fr/web/css/@media/display-mode/index.md index 0e32d83a0b..addb021017 100644 --- a/files/fr/web/css/@media/display-mode/index.md +++ b/files/fr/web/css/@media/display-mode/index.md @@ -7,76 +7,40 @@ tags: - Reference translation_of: Web/CSS/@media/display-mode --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>display-mode</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet d'appliquer différentes règles CSS selon le mode d'affichage de l'application. On pourra utiliser cette caractéristique afin qu'un utilisateur ait une expérience similaire selon qu'il lance le site depuis une URL ou depuis une icône sur un bureau.</p> +**`display-mode`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet d'appliquer différentes règles CSS selon le mode d'affichage de l'application. On pourra utiliser cette caractéristique afin qu'un utilisateur ait une expérience similaire selon qu'il lance le site depuis une URL ou depuis une icône sur un bureau. -<p>Cette caractéristique correspond à la propriété <a href="/fr/docs/Web/Manifest#display"><code>display</code> </a>du manifeste de l'application web. Les deux s'appliquent au contexte de navigation de plus haut niveau ainsi qu'aux contextes fils. Cette requête s'appliquera dans tous les cas (qu'un manifeste d'application soit présent ou non).</p> +Cette caractéristique correspond à la propriété [`display` ](/fr/docs/Web/Manifest#display)du manifeste de l'application web. Les deux s'appliquent au contexte de navigation de plus haut niveau ainsi qu'aux contextes fils. Cette requête s'appliquera dans tous les cas (qu'un manifeste d'application soit présent ou non). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<p>La caractéristique <code>display-mode</code> est définie avec un mot-clé parmi ceux du tableau ci-après.</p> +La caractéristique `display-mode` est définie avec un mot-clé parmi ceux du tableau ci-après. -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Valeur (mode d'affichage)</th> - <th scope="col">Description</th> - <th scope="col">Mode d'affichage utilisé en recours</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>fullscreen</code></td> - <td>Toute la zone d'affichage est utilisée et aucun autre élément d'interface utilisateur (<em>chrome</em>) n'est affiché.</td> - <td><code>standalone</code></td> - </tr> - <tr> - <td><code>standalone</code></td> - <td>L'application se comportera comme une application indépendante avec une fenêtre différente, une icône distincte dans les barres d'application. Dans ce mode, l'agent utilisateur supprimera les éléments d'interface utilisateur liés au contrôle de la navigation mais pourra conserver les autres éléments tels que la barre d'état.</td> - <td><code>minimal-ui</code></td> - </tr> - <tr> - <td><code>minimal-ui</code></td> - <td>L'application se comportera comme une application indépendante mais son interface utilisateur sera restreinte aux contrôles de navigation. Les éléments affichés peuvent varier selon les navigateurs.</td> - <td><code>browser</code></td> - </tr> - <tr> - <td><code>browser</code></td> - <td>L'application ouvre un nouvel onglet dans le navigateur ou une nouvelle fenêtre selon le navigateur et la plateforme utilisés.</td> - <td>Aucun</td> - </tr> - </tbody> -</table> +| Valeur (mode d'affichage) | Description | Mode d'affichage utilisé en recours | +| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | +| `fullscreen` | Toute la zone d'affichage est utilisée et aucun autre élément d'interface utilisateur (_chrome_) n'est affiché. | `standalone` | +| `standalone` | L'application se comportera comme une application indépendante avec une fenêtre différente, une icône distincte dans les barres d'application. Dans ce mode, l'agent utilisateur supprimera les éléments d'interface utilisateur liés au contrôle de la navigation mais pourra conserver les autres éléments tels que la barre d'état. | `minimal-ui` | +| `minimal-ui` | L'application se comportera comme une application indépendante mais son interface utilisateur sera restreinte aux contrôles de navigation. Les éléments affichés peuvent varier selon les navigateurs. | `browser` | +| `browser` | L'application ouvre un nouvel onglet dans le navigateur ou une nouvelle fenêtre selon le navigateur et la plateforme utilisés. | Aucun | -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: css">@media all and (display-mode: fullscreen) { +```css +@media all and (display-mode: fullscreen) { body { margin: 0; border: 5px solid black; } -}</pre> +} +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}}</td> - <td>{{Spec2('Manifest')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}} | {{Spec2('Manifest')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("css.at-rules.media.display-mode")}}</p> +{{Compat("css.at-rules.media.display-mode")}} |