1 files changed, 90 insertions, 0 deletions
diff --git a/files/es/web/css/@media/display-mode/index.html b/files/es/web/css/@media/display-mode/index.html
new file mode 100644
index 0000000000..91b1d2cce4
--- /dev/null
+++ b/files/es/web/css/@media/display-mode/index.html
@@ -0,0 +1,90 @@
+---
+title: display-mode
+slug: Web/CSS/@media/display-mode
+tags:
+  - '@media'
+  - CSS
+  - Media Queries
+  - Referencia
+  - características de medio
+  - consultas de medio
+  - display
+  - display-mode
+  - media feature
+translation_of: Web/CSS/@media/display-mode
+---
+<div>{{cssref}}</div>
+
+<p>La <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">característica de medios (media feature) de CSS</a> <strong><code>display-mode</code></strong> puede ser utilizada para probar el modo de visualización de una aplicación. Puede ser usada para proveer de una experiencia de usuario consistente entre el lanzamiento de un sitio desde una URL y desde un ícono del escritorio.</p>
+
+<p>La característica corresponde al miembro <a href="/en-US/docs/Web/Manifest#display"><code>display</code></a> del manifiesto de la aplicación web. Ambos aplican al contexto de navegación de nivel más alto y a cualquier hijo del contexto de navegación. La característica de consulta aplica sin importar si el manifiesto de la aplicación web esta presente</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La característica <code>display-mode</code> se especifica como un valor de palabra clave elegida de la siguiente lista.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Modo de visualización</th>
+   <th scope="col">Descripción</th>
+   <th scope="col"><code>Modo de visualización de reserva</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>fullscreen</code></td>
+   <td>Toda la área disponible de desplegado es usada y ningún agente de usuario {{glossary("chrome")}} es mostrado.</td>
+   <td><code>standalone</code></td>
+  </tr>
+  <tr>
+   <td><code>standalone</code></td>
+   <td>La aplicación se vera y sentira como una aplicación independiente. Esto puede incluir que la aplicación tenga una ventana diferente, su propio ícono en el lanzador de aplicaciones, etc. En este modo, el agente de usuario excluirá elementos UI paara controlar la navegación, pero puede incluir otros elementos UI como la barra de estado.</td>
+   <td><code>minimal-ui</code></td>
+  </tr>
+  <tr>
+   <td><code>minimal-ui</code></td>
+   <td>La aplicación se vera y sentira como una apicación autónoma, pero tendra un conjunto mínimo de elementos UI para controlar la navegación. Los elementos pueden variar por navegador.</td>
+   <td><code>browser</code></td>
+  </tr>
+  <tr>
+   <td><code>browser</code></td>
+   <td>La aplicación se abre en una pestaña o nueva ventana convencional del navegador, dependiendo del navegador y la plataforma.</td>
+   <td>(none)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: css">@media all and (display-mode: fullscreen) {
+  body {
+    margin: 0;
+    border: 5px solid black;
+  }
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}}</td>
+   <td>{{Spec2('Manifest')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.display-mode")}}</p>