initial commit

2 files changed, 1214 insertions, 0 deletions

diff --git a/files/es/css/media_queries/index.html b/files/es/css/media_queries/index.html
new file mode 100644
index 0000000000..997626e12d
--- /dev/null
+++ b/files/es/css/media_queries/index.html
@@ -0,0 +1,828 @@
+---
+title: CSS media queries
+slug: CSS/Media_queries
+tags:
+  - CSS
+  - Media
+  - Media Queries
+  - query
+translation_of: Web/CSS/Media_Queries/Using_media_queries
+---
+<div>{{cssref}}</div>
+
+<p class="seoSummary">Las <strong>media queries</strong> (en español "consultas de medios") son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo (como una impresora o una pantalla) o de características y parámetros específicos (como la resolución de la pantalla o el ancho del {{glossary("viewport")}} del navegador).</p>
+
+<p>Se utilizan para:</p>
+
+<ul>
+ <li>Aplicar estilos condicionales con las <a href="/es/docs/Web/CSS/At-rule">reglas-at</a> {{cssxref("@media")}} e {{cssxref("@import")}} de <a href="/es/docs/Web/CSS">CSS</a>.</li>
+ <li>Indicar medios específicos en los elementos {{HTMLElement("link")}}, {{HTMLElement("source")}} y otros elementos <a href="/es/docs/Web/HTML">HTML</a>.</li>
+ <li><a href="/es/docs/Web/Guide/CSS/probando_media_queries">Testear y monitorizar los estados de los medios</a> usando los métodos de javascript {{domxref("Window.matchMedia()")}} y {{domxref("MediaQueryList.addListener()")}}.</li>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p> </p>
+
+<p>Las <em>media queries</em> consisten de un tipo de medio opcional y una o más expresiones de <em>características de medios</em>. Varias consultas se pueden combinar utilizando operadores lógicos. No distinguen entre mayúsculas y minúsculas.</p>
+
+<p>El resultado de la consulta es "verdadero" cuando el tipo de medio (si se especifica) coincide con el dispositivo en el que se está mostrando el documento y todas las expresiones en el <em>media query</em> son "verdaderas". En este caso, se aplica los estilos correspondientes, siguiendo las reglas usuales de cascada.</p>
+
+<p>Las consultas sobre tipos de medios desconocidos son siempre falsas.</p>
+
+<p> </p>
+
+<pre class="brush: html"><code class="brush: html">&lt;!-- CSS media query on a link element --&gt;
+</code>&lt;link rel="stylesheet" media="(max-width: 800px)" href="example.css" /&gt;
+
+<code class="brush: html">&lt;!-- CSS media query within a style sheet --&gt;
+&lt;style&gt;
+@media (max-width: 600px) {
+  .facet_sidebar {
+    display: none;
+  }
+}
+&lt;/style&gt;</code>
+</pre>
+
+<h3 id="Media_Types">Media Types</h3>
+
+<p>Los <em>Media Types</em> (tipos de medios) describen la categoría general de un dispositivo. Excepto cuando se utilizan los operadores lógicos <code>not</code> o <code>only</code>, el tipo de medio es opcional y será interpretada como <code>all</code>.</p>
+
+<dl>
+ <dt><code id="all">all</code></dt>
+ <dd>Apto para todos los dispositivos.</dd>
+ <dt><code id="print">print</code></dt>
+ <dd>Destinado a material impreso y visualización de documentos en una pantalla en el modo de vista previa de impresión. </dd>
+ <dt><code id="screen">screen</code></dt>
+ <dd>Destinado principalmente a las pantallas.</dd>
+ <dt><code id="speech">speech</code></dt>
+ <dd>Destinado a sintetizadores de voz.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Tipos de medios depreciados:</strong> CSS2.1 y <a href="/es/docs/">Media Queries 3</a> definieron varios tipos de medios adicionales (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code> y <code>aural</code>), pero fueron desaprobados en <a href="https://drafts.csswg.org/mediaqueries/#media-types">Media Queries 4</a> y no deberían ser usados. El tipo <code>aural</code> ha sido reemplazado por <code>speech</code>, que es similar.</p>
+</div>
+
+<h3 id="Operadores_Lógicos">Operadores Lógicos</h3>
+
+<p>Se pueden redactar queries utilizando operadores lógicos, incluyendo <code>not</code>, <code>and</code>, y <code>only</code>.</p>
+
+<p>Además se puede combinar múltiples queries en una lista separada por comas múltiples; si cualquiera de las queries en la lista es verdadera, la hoja de estilo asociada es aplicada. Esto es equivalente a una operación lógica "or".</p>
+
+<h4 id="and">and</h4>
+
+<p>El operador <code>and</code> es usado para colocar juntas múltiples funciones multimedia. Un query básico con el tipo de medio especificado como <code>all</code> puede lucir así:</p>
+
+<pre class="brush: css">@media (min-width: 700px) { ... }</pre>
+
+<p>Si usted quiere aplicar ese query solo si la pantalla esta en formato horizontal, usted puede utilizar el operador <code>and</code> y colocar la siguiente cadena:</p>
+
+<pre class="brush: css">@media (min-width: 700px) and (orientation: landscape) { ... }</pre>
+
+<p>La siguiente query solo retornara verdadero si la ventana tiene un ancho de 700px o mas y la pantalla esta en formato horizontal. Ahora si usted quiere aplicar esta opción solo si tipo de medio es TV, usted puede utilizar la siguiente cadena:</p>
+
+<pre class="brush: css">@media tv and (min-width: 700px) and (orientation: landscape) { ... }</pre>
+
+<p>Esta query solo se aplica si el tipo de medio es TV, la ventana tiene 700px de ancho o mas y la pantalla esta en formato horizontal.</p>
+
+<h4 id="lista_separada_por_comas">lista separada por comas</h4>
+
+<p>Las listas separadas por comas se comportan como el operador <code>or</code> cuando es usado en media queries. Cuando utilice una lista separada por comas y alguno de los queries retorna verdadero, el estilo o la hoja de estilos sera aplicada. Cada query en una lista separada por comas es tratado como una query individual y cualquier operador aplicado a un medio no afectara a los demás. Esto significa que cada query en una lista separada por comas puede tener como objetivo diferentes medios, tipos y estados.</p>
+
+<p>Si usted quiere aplicar una serie de estilos para un equipo con un ancho mínimo de 700px o si el dispositivo esta colocado en horizontal, usted puede escribir lo siguiente:</p>
+
+<pre class="brush: css">@media (min-width: 700px), handheld and (orientation: landscape) { ... }</pre>
+
+<p>Por lo tanto, si esta en una <code>screen</code> con una ventana de 800px de ancho, la declaración del medio retornara verdadero debido a la primera parte de la lista, si aplicamos esto a un dispositivo <code>@media all and (min-width: 700px)</code> podría retornar verdadero a pesar del hecho de que la pantalla falle la verificación tipo de medio del <code>handheld</code> en la segunda query. Por otra parte si estuviese en un <code>handheld</code> con un ancho de ventana de 500px, la primera parte de la lista fallaría pero la segunda parte retornara verdadero debido a la declaración de medio.</p>
+
+<h4 id="not">not</h4>
+
+<p>El operador <code>not</code> aplica a todo el query y retorna verdadero si es posible y sino retorna falso (como por ejemplo <code>monochrome</code> en un monitor a color o una ventana con un ancho mínimo de <code>min-width: 700px</code> en un monitor de 600px). Un <code>not</code> negara un query si es posible pero no a todos los query posibles si están ubicados en una lista separada por comas. El operador <code>not</code> no puede ser usado para negar un query individual, solo para un query completo. Por ejemplo<span style="line-height: 1.572;">, el </span><code style="font-size: 14px;">not</code><span style="line-height: 1.572;"> en el siguiente query es evaluado al final:</span></p>
+
+<pre class="brush: css" style="font-size: 14px;">@media not all and (monochrome) { ... }
+</pre>
+
+<p>Esto significa que el query es evaluado de la siguiente forma:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media not (all and (monochrome)) { ... }
+</pre>
+
+<p>... y no de esta forma:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media (not all) and (monochrome) { ... }</pre>
+
+<p>Otro Ejemplo:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media not screen and (color), print and (color)
+</pre>
+
+<p>Es evaluado de la siguiente forma:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media (not (screen and (color))), print and (color)</pre>
+
+<h4 id="only">only</h4>
+
+<p><span style="line-height: 21px;">El operador </span><code style="font-size: 14px;">only</code><span style="line-height: 21px;"> previene que navegadores antiguos que no soportan queries con funciones apliquen los estilos asignados:</span></p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="only screen and (color)" href="Ejemplo.css" /&gt;
+</pre>
+
+<h3 id="Pseudo-BNF">Pseudo-BNF</h3>
+
+<pre class="syntaxbox">media_query_list: &lt;media_query&gt; [, &lt;media_query&gt; ]*
+media_query: [[only | not]? &lt;media_type&gt; [ and &lt;expression&gt; ]*]
+  | &lt;expression&gt; [ and &lt;expression&gt; ]*
+expression: ( &lt;media_feature&gt; [: &lt;value&gt;]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid</pre>
+
+<p>Los queries son insensibles a las mayúsculas o minúsculas. Media queries que contengan tipos de medios desconocidos siempre retornaran falso.</p>
+
+<div class="note"><strong>Nota:</strong> Los paréntesis son requeridos alrededor de las expresiones, no utilizarlos es un error.</div>
+
+<h2 id="Funciones_Multimedia">Funciones Multimedia</h2>
+
+<p>La mayoría de las funciones multimedia pueden ser precedidas por "min-" o "max-" para expresar "greater or equal to" o "less than or equal to". Esto elimina la necesidad de usar los símbolos "&lt;" y "&gt;" los cuales podrían causar conflictos con HTML y XML. Si usted usa una función multimedia sin especificarle un valor, la expresión retornara verdadero si el valor es diferente de cero.</p>
+
+<div class="note"><strong>Nota:</strong> Si una función multimedia no aplica al dispositivo donde el navegador esta corriendo, la expresión que contiene esa función siempre retornara falso. Por Ejemplo, cambiar la relación de aspecto en un dispositivo aural siempre resultara falso.</div>
+
+<h3 id="color">color</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;color&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> si</p>
+
+<p>Indica el numero de bits por componente de color del dispositivo de salida. Si el dispositivo no soporta colores, este valor es 0.</p>
+
+<div class="note"><strong>Nota:</strong> Si el componente de color tiene diferente numero de bits por color, entonces el valor mas pequeño es utilizado. Por Ejemplo, si una pantalla utiliza 5 bits para azul y rojo y 6 bits para el verde, entonces se utilizan 5 bits por componente de color. Si el dispositivo utiliza índices de color se usara el mínimo valor de bits por color en la tabla.</div>
+
+<h4 id="Ejemplos">Ejemplos</h4>
+
+<p>Para aplicar una hoja de estilo a todos los dispositivos que soporten colores:</p>
+
+<pre class="brush: css">@media all and (color) { ... }
+</pre>
+
+<p>Para aplicar una hoja de estilo a dispositivos con al menos 4 bits por componente de color:</p>
+
+<pre class="brush: css">@media all and (min-color: 4) { ... }
+</pre>
+
+<h3 id="color-index">color-index</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max</strong><strong>:</strong> sí</p>
+
+<p>Indica el numero de entradas en la tabla de colores para el dispositivo de salida.</p>
+
+<h4 id="Ejemplos_2">Ejemplos</h4>
+
+<p>Para indicar que una hoja de estilo debe aplicarse a todos los dispositivos utilizando índices de color, usted puede hacer esto:</p>
+
+<pre class="brush: css">@media all and (color-index) { ... }
+</pre>
+
+<p>Para aplicar una hoja de estilo a un dispositivo con un índice de al menos 256 colores:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /&gt;
+</pre>
+
+<h3 id="aspect-ratio">aspect-ratio</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;ratio&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Acepta prefijos min/max</strong><strong>:</strong> sí</p>
+
+<p>Describe el aspecto de una zona a mostrar en el dispositivo de salida. Este valor consiste en enteros positivos separados por una barra ("/"). Esto representa la razón de aspecto de los pixeles horizontales (primer termino) a los pixeles verticales (segundo termino).</p>
+
+<h4 id="Ejemplo">Ejemplo</h4>
+
+<p>Lo siguiente selecciona una hoja de estilo especial para ser aplicada donde la proporción del tamaño de la pantalla del dispositivo de salida es al menos la misma de ancho que de alto.</p>
+
+<pre class="brush: css">@media screen and (min-aspect-ratio: 1/1) { ... }</pre>
+
+<p>Este selecciona el estilo cuando la proporción de aspecto sea 1:1 o superior. En otras palabras este estilo solo sera aplicado cuando el área de visualización sea cuadrada u horizontal.</p>
+
+<h3 id="device-aspect-ratio">device-aspect-ratio</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;ratio&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>Describe la proporción de aspecto del dispositivo de salida. Este valor consiste de dos enteros positivos separados por una barra ("/"). Este representa la proporción de aspecto de los pixeles horizontales (primer termino) a los pixeles verticales (segundo termino).</p>
+
+<h4 id="Ejemplo_2">Ejemplo</h4>
+
+<p>El siguiente código selecciona una hoja de estilo especial para ser aplicada en pantallas panorámicas ("widescreen").</p>
+
+<pre class="brush: css">@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre>
+
+<p>Este selecciona el estilo cuando la proporción de aspecto sea 16:9 o 16:10.</p>
+
+<h3 id="device-height">device-height</h3>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>Describe la altura del dispositivo de salida (ya sea la totalidad de la pantalla o página y no el área del documento a renderizar).</p>
+
+<h3 id="device-width">device-width</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>Describe la anchura del dispositivo de salida (ya sea la totalidad de la pantalla o página y no el área del documento a renderizar).</p>
+
+<h4 id="Ejemplo_3">Ejemplo</h4>
+
+<p>Para aplicar una hoja de estilo a un documento cuando este sea mostrado en una pantalla de menos de 800px de ancho, usted puede usar esto:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="screen and (max-device-width: 799px)" /&gt;
+</pre>
+
+<h3 id="grid">grid</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> all<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Determina cuando el dispositivo de salida es un dispositivo de cuadrícula o de mapa de bits. Si el dispositivo esta basado en una cuadrícula (como una terminal TTY o una pantalla de teléfono de solo texto), el valor sera 1, de lo contrario sera 0.</p>
+
+<h4 id="Ejemplo_4">Ejemplo</h4>
+
+<p>Para aplicar una hoja de estilo a un dispositivo portátil con una pantalla de 15 caracteres o mas estrecha:</p>
+
+<pre class="brush: css">@media handheld and (grid) and (max-width: 15em) { ... }
+</pre>
+
+<div class="note"><strong>Nota:</strong> La unidad "em" tiene un significado especial para los dispositivos de cuadrícula; ya que la anchura exacta de una "em" no puede ser determinada, se asume un "em" como el ancho de una celda en la cuadrícula y el alto de una celda en la cuadrícula.</div>
+
+<h3 id="height">height</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>La función <code>height</code> describe la altura de la superficie a renderizar en el dispositivo de salida (como la altura de una ventana o la bandeja de papel en una impresora).</p>
+
+<div class="note"><strong>Nota:</strong> Cuando el usuario cambia el tamaño de una ventana Firefox también cambia las hojas de estilo para utilizar la mas adecuada basándose en los valores de <code>width</code> y <code>height</code> del query.</div>
+
+<h3 id="monochrome">monochrome</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>Indica el número de bits por pixel en un dispositivo monocromático (escala de grises). Si el dispositivo no es monocromático el valor sera 0.</p>
+
+<h4 id="Ejemplos_3">Ejemplos</h4>
+
+<p>Para aplicar una hoja de estilo a todos los dispositivos monocromáticos:</p>
+
+<pre class="brush: css">@media all and (monochrome) { ... }
+</pre>
+
+<p>Para aplicar una hoja de estilo a un dispositivo monocromático con al menos 8 bits por pixel:</p>
+
+<pre class="brush: css">@media all and (min-monochrome: 8) { ... }
+</pre>
+
+<h3 id="orientation">orientation</h3>
+
+<p><strong>Valor</strong><strong>:</strong> <code>landscape</code> | <code>portrait</code><br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Indica cuando el dispositivo esta en modo landscape (el ancho de la pantalla es mayor al alto) o modo portrait (el alto de la pantalla es mayor al ancho).</p>
+
+<h4 id="Ejemplo_5">Ejemplo</h4>
+
+<p>Para aplicar una hoja de estilo solo en orientación vertical (portrait):</p>
+
+<pre class="brush: css">@media all and (orientation: portrait) { ... }</pre>
+
+<h3 id="resolution">resolution</h3>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;resolution&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>Indica la resolución (densidad de pixeles) del dispositivo de salida. La resolución puede ser especificada en puntos por pulgada (dpi) o en puntos por centímetros (dpcm).</p>
+
+<h4 id="Ejemplo_6">Ejemplo</h4>
+
+<p>Para aplicar una hoja de estilo a dispositivos con al menos 300 dpi de resolución:</p>
+
+<pre class="brush: css">@media print and (min-resolution: 300dpi) { ... }
+</pre>
+
+<p>Para reemplazar la vieja sintaxis <span style="font-family: courier new,andale mono,monospace; line-height: normal;">(min-device-pixel-ratio: 2)</span>:</p>
+
+<pre class="brush: css">@media screen and (min-resolution: 2dppx) { ... }</pre>
+
+<h3 id="scan">scan</h3>
+
+<p><strong>Valor</strong><strong>:</strong> <code>progressive</code> | <code>interlace</code><br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/TV")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Describe el proceso de exploración de televisión de los dispositivos de salida.</p>
+
+<h4 id="Ejemplo_7">Ejemplo</h4>
+
+<p>Para aplicar una hoja de estilo solo a televisores de exploración progresiva:</p>
+
+<pre class="brush: css">@media tv and (scan: progressive) { ... }
+</pre>
+
+<h3 id="width">width</h3>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>La función <code>width</code> describe el ancho de la superficie a renderizar en el dispositivo de salida (como el ancho de una ventana de un documento o el ancho de la bandeja de papel en una impresora).</p>
+
+<div class="note"><strong>Nota:</strong> Cuando el usuario cambia el tamaño de una ventana Firefox también cambia las hojas de estilo para utilizar la mas adecuada basándose en los valores de <code>width</code> y <code>height</code> del query.</div>
+
+<h4 id="Ejemplos_4">Ejemplos</h4>
+
+<p>Si usted quiere especificar una hoja de estilo para dispositivos portátiles o pantallas con un ancho de al menos 20em, usted puede usar esta query:</p>
+
+<pre class="brush: css">@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+</pre>
+
+<p>Esta query especifica una hoja de estilo para ser aplicada a un medio impreso con un ancho mayor a 8.5 pulgadas:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" /&gt;
+</pre>
+
+<p>Esta query especifica una hoja de estilo para ser utilizada cuando la ventana tiene un ancho entre 500 y 800 pixeles:</p>
+
+<pre class="brush: css">@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+
+</pre>
+
+<ul>
+</ul>
+
+<h2 id="Específico_de_Mozilla">Específico de Mozilla</h2>
+
+<p>Mozilla ofrece varias funciones especificas de Gecko. Algunas de estas pueden ser propuestas como funcines oficiales.</p>
+
+<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Si el dispositivo acepta que haya imágenes en menús, el valor es 1; de otro modo sera 0. Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(images-in-menus)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Si el usuario ha configurado su dispositivo para usar la apariencia "Grafito" en Mac OS X, esto sera 1. Si el usuario esta usando la apariencia azul por defecto, o si no usa Mac OS X, esto sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Si el usuario esta usando Maemo con el tema original, esto sera 1; Si esta usando el nuevo tema Fremantle, sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(maemo-classic)") }}</p>
+
+<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;number&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> sí</p>
+
+<p>Da el numero de pixeles del dispositivo por pixeles de CSS.</p>
+
+<div class="geckoVersionNote style-wrap">
+<p><strong>No use esta función. </strong></p>
+
+<p>En cambio use la función <code>resolution</code> con la unidad <code>dppx</code>.<br>
+ <br>
+ <code>-moz-device-pixel-ratio</code> puede ser usada para compatibilidad con Firefox 16 o anterior; y <code>-webkit-device-pixel-ratio</code> con navegadores basados en WebKit que no soporten <code>dppx</code>.</p>
+
+<p>Ejemplo:</p>
+
+<pre class="brush: css">@media (-webkit-min-device-pixel-ratio: 2), /* Navegadores basados en WebKit */
+       (min--moz-device-pixel-ratio: 2),    /* Navegadores anteriores a Firefox 16 */
+       (min-resolution: 2dppx),             /* La forma estandar */
+       (min-resolution: 192dpi)             /* compatibilidad con dppx */ </pre>
+
+<p>Vea este <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">articulo CSSWG </a>sobre buenas practicas para compatibilidad en relación a <code>resolution</code> y <code>dppx</code>.</p>
+</div>
+
+<div class="note">Nota: Esta funcion multimedia tambien esta implementada en Webkit como <span style="font-family: courier new;">-webkit-device-pixel-ratio</span>. Los prefijos minimos y maximos de esta funcion implementados por Gecko se llaman asi: <span style="font-family: courier new;">min--moz-device-pixel-ratio</span> y <span style="font-family: courier new;">max--moz-device-pixel-ratio</span>; y los mismos prefijos implementados por Webkit se llaman asi: <span style="font-family: courier new;">-webkit-min-device-pixel-ratio</span> y <span style="font-family: courier new;">-webkit-max-device-pixel-ratio</span>.</div>
+
+<p>{{ h3_gecko_minversion("-moz-os-version", "25.0") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> <code>windows-xp</code> | <code>windows-vista</code> | <code>windows-win7</code> | <code>windows-win8</code><br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Indica que sistema operativo esta en uso actualmente. Actualmente solo es implementado en Windows. Sus posibles valores son:</p>
+
+<ul>
+ <li><code>windows-xp</code></li>
+ <li><code>windows-vista</code></li>
+ <li><code>windows-win7</code></li>
+ <li><code>windows-win8</code></li>
+ <li><code>windows-win10</code></li>
+</ul>
+
+<p>Esto se hace para permitir a los skins y a algunos códigos funcionen mejor con el sistema operativo en el que se ejecutan.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si la interfaz de usuario muestra una fecha inversa al final de la barra de desplazamiento, de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si la interfaz de usuario muestra una fecha apuntando hacia la derecha al final de la barra de desplazamiento. de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si la interfaz de usuario muestra una fecha inversa al principio de la barra de desplazamiento, de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si la interfaz de usuario muestra una fecha apuntando hacia la derecha al principio de la barra de desplazamiento, de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si la interfaz de usuario muestra la miniatura de la barra de desplazamiento de forma proporcional (basado en el porcentaje del documento que es visible), de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si el dispositivo soporta eventos táctiles (una pantalla táctil), de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(touch-enabled)") }}.</p>
+
+<h4 id="Ejemplo_8">Ejemplo</h4>
+
+<p>Usted puede usar esto para renderizar sus botones un poco mas grandes, Por Ejemplo, si el usuario se encuentra en una pantalla táctil, esto hará los botones mas fáciles de usar con los dedos.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si el usuario utiliza un windows sin temas visuales (modo clasico); de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(windows-classic)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si el usuario utiliza windows con el compositor de ventanas DWM; de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(windows-compositor)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>El valor sera 1 si el usuario actualmente esta utilizando algunos de los temas por defecto de Windows (Luna, Royale, Zune, or Aero), de lo contrario el valor sera 0.</p>
+
+<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(windows-default-theme)") }}.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p>
+
+<p><strong>Valor</strong><strong>:</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br>
+ <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<p>Indica cual tema de Windows esta en uso actualmente. Solo disponible para Windows. Sus posibles valores son:</p>
+
+<ul>
+ <li><code>aero</code></li>
+ <li><code>luna-blue</code></li>
+ <li><code>luna-olive</code></li>
+ <li><code>luna-silver</code></li>
+ <li><code>royale</code></li>
+ <li><code>generic</code></li>
+ <li><code>zune</code></li>
+</ul>
+
+<p>Esto se hace para permitir a los skins y a algunos códigos funcionen mejor con el tema utilizado por el sistema operativo en el que se ejecutan.</p>
+
+<h2 id="Específico_de_WebKit">Específico de WebKit</h2>
+
+<h3 id="-webkit-transform-3d">-webkit-transform-3d</h3>
+
+<p><strong>Vakir:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong>Medio:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<ul>
+ <li><a href="https://compat.spec.whatwg.org/#css-media-queries-webkit-transform-3d">Especificación</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transform-3d">Documentación</a></li>
+</ul>
+
+<p>Si está soportado, el valor es 1, si no, el valor es 0.</p>
+
+<p>Ejemplo</p>
+
+<pre class="brush: css"><code>@media (-webkit-transform-3d) {
+  .foo {
+    transform-style: preserve-3d;
+  }
+}
+
+@media (-webkit-transform-3d: 1) {
+  .foo {
+    transform-style: preserve-3d;
+  }
+}</code></pre>
+
+<h3 id="-webkit-transform-2d">-webkit-transform-2d</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong>Medio:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transform-2d">Documentación</a></li>
+</ul>
+
+<p>Si está soportado, el valor es 1, si no, el valor es 0.</p>
+
+<h3 id="-webkit-transition">-webkit-transition</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong>Medio:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Acepta prefijos min/max:</strong> no</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transition">Documentación</a></li>
+</ul>
+
+<p>Si está soportado, el valor es 1, si no, el valor es 0.</p>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome("21")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("9.0")}}</td>
+   <td>{{CompatOpera("9")}}</td>
+   <td>{{CompatSafari("4")}}</td>
+  </tr>
+  <tr>
+   <td><code>grid</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} <sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>resolution</code></td>
+   <td>{{CompatChrome("29")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}} <sup>[2]</sup><br>
+    {{CompatGeckoDesktop("8.0")}} <sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>scan</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-min-device-pixel-ratio</code>, <code>-webkit-max-device-pixel-ratio</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[7]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transform-3d</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup></td>
+   <td>{{CompatGeckoDesktop("49")}}<sup>[6]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup></td>
+   <td>{{CompatSafari("1.0")}}<sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transform-2d</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup></td>
+   <td>{{CompatSafari("1.0")}}<sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transition</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup></td>
+   <td>{{CompatSafari("1.0")}}<sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td><code>display-mode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("47")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>grid</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>resolution</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>scan</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-min-device-pixel-ratio</code>, <code>-webkit-max-device-pixel-ratio</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transform-3d</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transform-2d</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transition</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>display-mode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>grid</code> media type no está soportado</p>
+
+<p>[2] Soporta valores {{cssxref("&lt;integer&gt;")}}.</p>
+
+<p>[3] Soporta valores {{cssxref("&lt;number&gt;")}}, según la especificación.</p>
+
+<p>[4] <code>tv</code> media no está soportado</p>
+
+<p>[5] Ver {{WebKitBug(22494)}}.</p>
+
+<p>[6] Implementado por razones de compatibilidad web en Gecko 46.0 {{geckoRelease("46.0")}} tras tras cambiar <code>layout.css.prefixes.webkit</code> por defecto a <code>false</code> (ver {{bug(1239799)}}). Desde Gecko 49.0 {{geckoRelease("49")}} <code>layout.css.prefixes.webkit</code> por defecto es <code>true</code>.</p>
+
+<p>[7] Implementado como alias para <code>min--moz-device-pixel-ratio </code>y <code>max--moz-device-pixel-ratio</code> por razones de compatibilidad web in Gecko 45.5 {{geckoRelease("45.0")}} (ver {{bug(1176968)}}) tras cambiar <code>layout.css.prefixes.webkit</code> y <code>layout.css.prefixes.device-pixel-ratio-webkit</code> por defecto a <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49")}} <code>layout.css.prefixes.webkit</code> por defecto es <code>true</code>.</p>
+
+<h2 id="Vea_también">Vea también</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">Especificación CSS 3 media query</a></li>
+ <li><a class="internal" href="/es/docs/Web/CSS/@media">Tipos de Medios</a></li>
+ <li><a href="/es/docs/Web/Guide/CSS/probando_media_queries">Usando media queries desde código</a></li>
+</ul>
diff --git a/files/es/css/using_css_gradients/index.html b/files/es/css/using_css_gradients/index.html
new file mode 100644
index 0000000000..2e3f5e13a4
--- /dev/null
+++ b/files/es/css/using_css_gradients/index.html
@@ -0,0 +1,386 @@
+---
+title: Usando gradientes con CSS
+slug: CSS/Using_CSS_gradients
+translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
+---
+<p><a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a> posee soporte para nuevos tipos de <em>gradientes</em>  en las propiedades CSS. Usarlos <span id="result_box" lang="es"><span class="hps">en</span> <span class="hps">un</span> <span class="hps">segundo plano,</span> <span class="hps">permite mostrar</span> <span class="hps">transiciones suaves</span> <span class="hps">entre dos o</span> <span class="hps">más</span> <span class="hps">colores especificados,</span></span> <span id="result_box" lang="es"><span class="hps">evitando así</span> <span class="hps">el uso de imágenes</span> <span class="hps">para estos efectos</span></span>, lo que reduce<span id="result_box" lang="es"><span class="hps"> el tiempo</span> <span class="hps">de descarga y</span> <span class="hps">el uso de</span> <span class="hps">ancho de banda</span></span>. <span id="result_box" lang="es"><span class="hps">Además</span><span>,</span> <span class="hps">debido a que el</span> <span class="hps">gradiente</span> <span class="hps">es generado por el</span> <span class="hps">navegador</span><span>,</span></span> los <span id="result_box" lang="es"><span class="hps">objetos</span> <span class="hps">degradados</span> <span class="hps">se ven mejor</span> <span class="hps">cuando se hace un acercamiento</span></span>, y el ajuste de diseño es mucho más flexible.</p>
+
+<p>Los navegadores soportan dos tipos de gradientes: <em>lineal</em>, definido con la función <em>linear-gradient</em>, y <em>radial</em>, definido con <em>radial-gradient</em>.</p>
+
+<h2 id="Gradientes_lineales">Gradientes lineales</h2>
+
+<p>Para crear un gradiente lineal, <span id="result_box" lang="es"><span class="hps">se establece un</span> <span class="hps">punto</span> <span class="hps">de partida y una</span> <span class="hps">dirección</span> <span class="hps">(indicada por</span> <span class="hps">un ángulo)</span> <span class="hps">a lo largo de</span> <span class="hps">la cual se aplica</span> <span class="hps">el</span> <span class="hps">efecto</span></span>. Usted también puede definir <strong>paradas de color</strong>. las paradas de color son los colores que usted desea que Gecko renderise con suaves transiciones entre ellos, y usted puede específicar al menos dos de ellas, pero puede específicar más para crear efectos de gradientes más complejos.</p>
+
+<h3 id="Gradientes_lineales_simples">Gradientes lineales simples</h3>
+
+<p>Aquí está un gradiente lineal que inicia en el centro (horizontalmente) y arriba (verticalmente), e inicia en azul, transicionando a blanco.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Captura de pantalla</td>
+   <td class="header">Demo en vivo</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="/@api/deki/files/3950/=basic_linear_bluetop.png" style="text-align: center;"></td>
+   <td>
+    <div class="gradient-demo linear-top-bottom" style=""> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div style="margin-right: 255px;">
+<pre class="brush: css">/* La sintaxis vieja, obsoleta, pero todavía necesaria, con prefijo, para Opera y navegadores basados en WebKit-based */
+background: -prefix-linear-gradient(top, blue, white);
+
+/* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
+background: linear-gradient(to bottom, blue, white);
+</pre>
+</div>
+
+<h3 id="Cambiando_el_mismo_gradiente_para_correr_de_izquierda_a_derecha">Cambiando el mismo gradiente para correr de izquierda a derecha:</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Captura de pantalla</td>
+   <td class="header">Demo en vivo</td>
+  </tr>
+  <tr>
+   <td><img alt="basic_linear_blueleft.png" class="default internal" src="/@api/deki/files/3951/=basic_linear_blueleft.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">/* la vieja sintaxis, obsoleta, pero todavía necesaria, prefijada, para Opera y Navegadores basados en Webkit */
+background: -prefix-linear-gradient(left, blue, white);
+
+/* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
+background: linear-gradient(to right, blue, white);
+</pre>
+
+<p>Usted puede hace el gradiente sea generado diagonalmente mediante la especificación de la posición de inicio vertical y horizontal. Por ejemplo:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Captura de pantalla</td>
+   <td class="header">Demo en vivo</td>
+  </tr>
+  <tr>
+   <td><img alt="basic_linear_bluetopleft.png" class="default internal" src="/@api/deki/files/3952/=basic_linear_bluetopleft.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">/* la vieja sintaxis, obsoleta, pero todavía necesaria, prefijada, para Opera y Navegadores basados en Webkit */
+background: -prefix-linear-gradient(left top, blue, white);
+
+/* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
+background: linear-gradient(to bottom right, blue, white);
+</pre>
+
+<h3 id="Usando_Angulos">Usando Angulos</h3>
+
+<p>Si usted no específica un ángulo, uno es determinado automáticamente basado en la dirección dada. Si usted desea más control sobre la dirección del gradiente, usted necesita establecer el ángulo específicamente.</p>
+
+<p>Por ejemplo, aquí hay dos gradientes, el primero con una dirección hacia la derecha, y el segundo tiene un ángulo de 70 grados.</p>
+
+<p><img alt="linear_gradient_angle.png" class="default internal" src="/@api/deki/files/3953/=linear_gradient_angle.png"></p>
+
+<p>El de la derecha usa un CSS Como este:</p>
+
+<pre class="brush: css">background: linear-gradient(70deg, black, white);
+</pre>
+
+<p>El ángulo es especificado como un ángulo entre una línea vertical y la línea del gradiente, contando en el sentido horario. En otras palabras, <code>0deg crea un gradiente vertical desde el fondo hasta el tope, mientras 90deg genera un gradiente horizontal de izquierda a derecha:</code></p>
+
+<p><img alt="linear_redangles.png" class="default internal" src="/files/3811/linear_red_angles.png"></p>
+
+<pre class="brush: css">background: linear-gradient(&lt;angle&gt;, red, white);
+</pre>
+
+<div class="note style-wrap">
+<p><strong>Note:</strong> several browsers implement, prefixed, an older draft of the specification where <code>0deg</code> was pointing to the right rather than to the top. Pay attention in the value of the angle when mixing prefixed and standard linear-gradient, some may need to have <code>90deg</code> added to the <code>&lt;angle&gt;</code>.</p>
+</div>
+
+<h3 id="Color_stops">Color stops</h3>
+
+<p>Color stops are points along the gradient line that will have a specific color at that location. The location can be specified as either a percentage of the length of the line, or as an absolute length. You may specify as many color stops as you like in order to achieve the desired effect.</p>
+
+<p>If you specify the location as a percentage, <code>0%</code> represents the starting point, while <code>100%</code> represents the ending point; however, you can use values outside that range if necessary to get the effect you want.</p>
+
+<h4 id="Example_Three_color_stops">Example: Three color stops</h4>
+
+<p>This example specifies three color stops:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="linear_colorstops1.png" class="default internal" src="/@api/deki/files/3955/=linear_colorstops1.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
+background: -prefix-linear-gradient(top, blue, white 80%, orange);
+
+/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
+background: linear-gradient(to bottom, blue, white 80%, orange);
+</pre>
+
+<p>Note that the first and last color stops don't specify a location; because of that, values of 0% and 100% are assigned automatically. The middle color stop specifies a location of 80%, putting it most of the way toward the bottom.</p>
+
+<h4 id="Example_Evenly_spaced_color_stops">Example: Evenly spaced color stops</h4>
+
+<p>Here's an example using a wide variety of colors, all evenly spaced:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="linear_rainbow.png" class="default internal" src="/@api/deki/files/3956/=linear_rainbow.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
+background: -prefix-linear-gradient(left, red, orange, yellow, green, blue);
+
+/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
+background: linear-gradient(to right, red, orange, yellow, green, blue);
+</pre>
+
+<p>Notice that the color stops are automatically spaced evenly when no locations are specified.</p>
+
+<h3 id="Transparency_and_gradients">Transparency and gradients</h3>
+
+<p>Gradients support transparency. You can use this, for example, when stacking multiple backgrounds, to create fading effects on background images. For example:</p>
+
+<p><img alt="linear_multibg_transparent.png" class="default internal" src="/@api/deki/files/3957/=linear_multibg_transparent.png"></p>
+
+<pre class="brush: css">/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
+background: linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
+
+/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
+background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
+</pre>
+
+<p>The backgrounds are stacked with the first specified background on top, and each successive background farther away. By stacking backgrounds this way, you can create very creative effects as seen above.</p>
+
+<h2 id="Radial_gradients">Radial gradients</h2>
+
+<p>Radial gradients are specified using the {{ cssxref("radial-gradient") }} functional notation. The syntax is similar to that for linear gradients, except you can specify the gradient's ending shape (whether it should be a circle or ellipse) as well as its size. By default, the ending shape is an ellipse with the same proportions than the container's box.</p>
+
+<h3 id="Color_stops_2">Color stops</h3>
+
+<p>You specify color stops the same way as for linear gradients. The gradient line extends out from the starting position in all directions.</p>
+
+<h4 id="Example_Evenly_spaced_color_stops_2">Example: Evenly spaced color stops</h4>
+
+<p>By default, as with linear gradients, the color stops are evenly spaced:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="radial_gradient_even.png" class="default internal" src="/@api/deki/files/3958/=radial_gradient_even.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: radial-gradient(red, yellow, rgb(30, 144, 255));
+</pre>
+
+<h4 id="Example_Explicitly_spaced_color_stops">Example: Explicitly spaced color stops</h4>
+
+<p>Here we specify specific locations for the color stops:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="radial_gradient_varied.png" class="default internal" src="/@api/deki/files/3959/=radial_gradient_varied.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
+</pre>
+
+<h3 id="Size">Size</h3>
+
+<p>This is one of the areas in which radial gradients differ from linear gradients. You can provide a size value that specifies the point that defines the size of the circle or ellipse. See <a href="/en-US/docs/CSS/radial-gradient#Size_constants" title="en-US/docs/CSS/-moz-radial-gradient#Size constants">this description of the size constants</a> for specifics.</p>
+
+<h4 id="Example_closest-side_for_ellipses">Example: closest-side for ellipses</h4>
+
+<p>This ellipse uses the <code>closest-side</code> size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.</p>
+
+<table class="standard-table" style="width: 520px;">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="radial_ellipse_size1.png" class="default internal" src="/@api/deki/files/3960/=radial_ellipse_size1.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
+</pre>
+
+<h4 id="Example_farthest-corner_for_ellipses">Example: farthest-corner for ellipses</h4>
+
+<p>This example is similar to the previous one, except that its size is specified as <code>farthest-corner</code>, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.</p>
+
+<table class="standard-table" style="width: 520px;">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="radial_ellipse_size2.png" class="default internal" src="/@api/deki/files/3961/=radial_ellipse_size2.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);
+</pre>
+
+<h4 id="Example_closest-side_for_circles">Example: closest-side for circles</h4>
+
+<p>This example uses <code>closest-side</code>, which determines the circle's size as the distance between the start point (the center) and the closest side.</p>
+
+<table class="standard-table" style="width: 520px;">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="radial_circle_size1.png" class="default internal" src="/@api/deki/files/3962/=radial_circle_size1.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
+</pre>
+
+<p>Here, the circle's radius is half the height of the box, since the top and bottom edges are equidistant from the start point and are closer than the left and right edges.</p>
+
+<h2 id="Repeating_gradients">Repeating gradients</h2>
+
+<p>The {{ cssxref("linear-gradient") }} and {{ cssxref("radial-gradient") }} properties don't support automatically repeating the color stops. However, the {{ cssxref("repeating-linear-gradient") }} and {{ cssxref("repeating-radial-gradient") }} properties are available to offer this functionality.</p>
+
+<h3 id="Examples_Repeating_linear_gradient">Examples: Repeating linear gradient</h3>
+
+<p>This example uses {{ cssxref("repeating-linear-gradient") }} to create a gradient:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="repeating_linear_gradient.png" class="default internal" src="/@api/deki/files/3964/=repeating_linear_gradient.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
+</pre>
+
+<p>Another example using the {{ cssxref("repeating-linear-gradient") }} property.</p>
+
+<p><a href="/@api/deki/files/6192/=repeat_background_gradient_checked.png" title="repeat_background_gradient_checked.png"><img alt="repeat_background_gradient_checked.png" class="default internal" src="/@api/deki/files/6192/=repeat_background_gradient_checked.png?size=thumb" style="height: 160px; width: 160px;"></a></p>
+
+<pre class="brush: css">background-color: #000;
+background-image: repeating-linear-gradient(90deg, transparent, transparent 50px,
+      rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
+      rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
+      rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
+      rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
+      rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
+      rgba(255, 206, 0, 0.25) 166px),
+repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
+      rgba(143, 77, 63, 0.25) 10px),
+repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
+      rgba(143, 77, 63, 0.25) 10px);
+</pre>
+
+<h3 id="Example_Repeating_radial_gradient">Example: Repeating radial gradient</h3>
+
+<p>This example uses {{ cssxref("repeating-radial-gradient") }} to create a gradient:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screen Shot</td>
+   <td class="header">Live Demo</td>
+  </tr>
+  <tr>
+   <td><img alt="repeating_radial_gradient.png" class="default internal" src="/@api/deki/files/3965/=repeating_radial_gradient.png"></td>
+   <td>
+    <div> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Gradient-related reference articles: {{cssxref("&lt;image&gt;")}}, {{cssxref("&lt;gradient&gt;")}}, {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}.</li>
+</ul>