unslug es: move

11 files changed, 1318 insertions, 0 deletions

diff --git a/files/es/conflicting/web/css/@viewport/index.html b/files/es/conflicting/web/css/@viewport/index.html
new file mode 100644
index 0000000000..bb9c54b069
--- /dev/null
+++ b/files/es/conflicting/web/css/@viewport/index.html
@@ -0,0 +1,126 @@
+---
+title: height
+slug: Web/CSS/@viewport/height
+tags:
+  - Descriptor CSS
+  - Referencia
+translation_of: Web/CSS/@viewport
+translation_of_original: Web/CSS/@viewport/height
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El descriptor CSS <code><strong>height</strong></code> es un descriptor de forma reducida para establecer {{cssxref("@viewport/min-height", "min-height")}} y {{cssxref("@viewport/max-height", "max-height")}} en el viewport. Definiendo un valor de longitud para viewport se establecerán los dos, altura mínima y altura máxima, con el valor definido.</p>
+
+<p>Si se definen dos valores de viewport, el primero corresponderá a la altura mínima, y el segundo, a la altura máxima.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: css">/* Un valor */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* Dos valores */
+height: 320px 200px;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>El valor a usar es calculado con los valores de otros descriptores CSS.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un valor {{cssxref("&lt;length&gt;")}} de longitud absoluta o relativa no negativa.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un valor {{cssxref("&lt;percentage&gt;")}} del porcentaje relativo a la anchura o altura del viewport inicial, con factor de zoom de 1.0, para longitudes verticales y horizontales respectivamente. No puede ser negativo.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: css">@viewport {
+  height: 500px;
+}</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">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</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>29 (usando una bandera)</td>
+   <td>{{CompatNo}}</td>
+   <td>10 {{property_prefix("-ms")}}</td>
+   <td>11.10<br>
+    Removido en 15<br>
+    Reintroducido con una bandera en 16</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4.4</td>
+   <td>29</td>
+   <td>{{CompatNo}}</td>
+   <td>10{{property_prefix("-ms")}}</td>
+   <td>11.10<br>
+    Removido en 15<br>
+    Reintroducido con una bandera en 16</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html b/files/es/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html
new file mode 100644
index 0000000000..2c550153bc
--- /dev/null
+++ b/files/es/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html
@@ -0,0 +1,123 @@
+---
+title: width
+slug: Web/CSS/@viewport/width
+translation_of: Web/CSS/@viewport
+translation_of_original: Web/CSS/@viewport/width
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El descriptor CSS <strong>width</strong> es una forma reducida para establecer {{cssxref("@viewport/min-width", "min-width")}} y {{cssxref("@viewport/max-width", "max-width")}} en el viewport. Definiendo un valor de longitud para viewport se establecerán los dos, anchura mínima y anchura máxima, con el valor definido.</p>
+
+<p>Si se definen dos valores de viewport, el primero corresponderá a la anchura mínima, y el segundo, a la anchura máxima.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="brush: css">/* Ejemplo con un valor de viewport: */
+@viewport {
+    width: 320px;
+}
+
+/* Ejemplo con dos valores de viewport: */
+@viewport {
+    width: 320px, 120px;
+}
+
+</pre>
+
+<p> </p>
+
+<h3 id="Values" name="Values">Valores</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>El valor a usar es calculado con los valores de otros descriptores CSS.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un valor {{cssxref("&lt;length&gt;")}} de longitud absoluta o relativa no negativa.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un valor {{cssxref("&lt;percentage&gt;")}} del porcentaje relativo a la anchura o altura del viewport inicial, con factor de zoom de 1.0, para longitudes verticales y horizontales respectivamente. No puede ser negativo.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table" style="height: 93px; width: 950px;">
+ <tbody>
+  <tr>
+   <th>Característica</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>29 (usando una bandera)</td>
+   <td>{{CompatNo}}</td>
+   <td>10 {{property_prefix("-ms")}}</td>
+   <td>11.10<br>
+    Removido en 15<br>
+    Reintroducido con una bandera en 16</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table" style="height: 93px; width: 948px;">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4.4</td>
+   <td>29</td>
+   <td>{{CompatNo}}</td>
+   <td>10{{property_prefix("-ms")}}</td>
+   <td>11.10<br>
+    Removido en 15<br>
+    Reintroducido con una bandera en 16</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/es/conflicting/web/css/_colon_placeholder-shown/index.html b/files/es/conflicting/web/css/_colon_placeholder-shown/index.html
new file mode 100644
index 0000000000..c7f84a0273
--- /dev/null
+++ b/files/es/conflicting/web/css/_colon_placeholder-shown/index.html
@@ -0,0 +1,123 @@
+---
+title: ':-moz-placeholder'
+slug: 'Web/CSS/:-moz-placeholder'
+tags:
+  - CSS
+  - Marcador de Posición INPUT
+  - Marcador de posición
+  - No estándar(2)
+  - Placeholder
+  - Pseudo-Clase CSS
+  - Referencia CSS
+translation_of: 'Web/CSS/:placeholder-shown'
+translation_of_original: 'Web/CSS/:-moz-placeholder'
+---
+<div class="note"><strong>Nota:</strong> La pseudo-clase CSS <code>:-moz-placeholder</code> está depreciada desde la versión Firefox 19 siendo desde entonces sustituida por el pseudo-elemento {{cssxref('::-moz-placeholder')}}.</div>
+
+<div class="note"><strong>Nota: </strong> El CSSWG ha decidido introducir  <code>:placeholder-shown</code>. Esta funcionalidad volverá a ser incluida en Gecko en algún momento futuro, sin prefijo y con un nuevo nombre.  {{bug(1069012)}}</div>
+
+<div>{{deprecated_header}}{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><code>La </code><a href="/es/docs/CSS/Pseudo-classes">pseudo-clase </a><code>:-moz-placeholder</code> representa a cualquier elemento que muestre un  <a href="/es/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute">texto del marcador de posición (placeholder)</a>. Permite a los desarrolladores web y a los diseñadores de tema personalizar la apariencia del texto de los marcadores de posición (placeholders) que, por defecto, son grises. Puede que esto no funcione bien si ha cambiado el color de fondo de los campos de sus formularios a un color similar así que, puede usar esta pseudo-clase para cambiar el color del texto de los marcadores de posición (placeholders).,</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Ejemplo_básico">Ejemplo básico</h3>
+
+<p>Este ejemplo le da estilo a un <em>placeholder</em> (marcador de posición) haciendo que el color del texto sea verde.</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Placeholder demo&lt;/title&gt;
+  &lt;style type="text/css"&gt;
+    input::-moz-placeholder {
+      color: green;
+    }
+    input:-moz-placeholder {
+      color: green;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;input id="test" placeholder="Placeholder text!"&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Basic_example")}}</p>
+
+<h3 id="Desbordamiento">Desbordamiento</h3>
+
+<p>En numerosas ocasiones las cajas para las búsquedas y otros campos de los formularios son fuertemente acortados al ser mostrados en dispositivos móviles. Desafortunadamente , en algunas circunstancias, el texto del marcador de posición de los elementos INPUT no cabe y  es recortado de una manera poco afortunada y fea. Para evitar esto se puede usar la regla CSS <code>text-overflow: ellipsis</code> para envolverlo.</p>
+
+<pre class="brush: css">input[placeholder] { text-overflow: ellipsis; }
+::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
+input:-moz-placeholder { text-overflow: ellipsis; }
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</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>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implementado en {{bug("457801")}}.</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/Guide/HTML/Forms_in_HTML">Formularios en HTML</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
diff --git a/files/es/conflicting/web/css/_colon_placeholder-shown_f20b6cc785f9fd133a0f9fb582f36891/index.html b/files/es/conflicting/web/css/_colon_placeholder-shown_f20b6cc785f9fd133a0f9fb582f36891/index.html
new file mode 100644
index 0000000000..b83b72db1a
--- /dev/null
+++ b/files/es/conflicting/web/css/_colon_placeholder-shown_f20b6cc785f9fd133a0f9fb582f36891/index.html
@@ -0,0 +1,112 @@
+---
+title: ':-ms-input-placeholder'
+slug: 'Web/CSS/:-ms-input-placeholder'
+tags:
+  - CSS
+  - No estándar(2)
+  - Pseudo clase CSS
+  - Referencia
+translation_of: 'Web/CSS/:placeholder-shown'
+translation_of_original: 'Web/CSS/:-ms-input-placeholder'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La  <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a>propietaria y no estándar  <code>:-ms-input-placeholder</code> representa el  <a href="/es/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">texto del marcador de posición (placeholder) </a> de un elemento de un formulario. Esto permite personalizar el texto de los marcadores de posición (placeholders) a los desarrolladores web y a los diseñadores de temas. Sólo es soportada por los navegadores Internet Explorer y Microsoft Edge.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>El siguiente ejemplo destaca con un estilo personalizado los campos <em>"Branch"</em> y código "<em>ID"</em>. El texto del marcardor de posición (placeholder) se muestra con un estilo hasta que el campo obtiene el foco, momento a partir del cual podemos escribir en él. Cuando el campo obtiene el foco vuelve a tener el estilo normal para un campo input y el texto del marcador de posición (placeholder) desaparece.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre>&lt;form id="test"&gt;
+  &lt;p&gt;&lt;label&gt;Enter Student Name: &lt;input id="name" placeholder="Student Name"/&gt;&lt;/label&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;label&gt;Enter Student Branch: &lt;input id="branch" placeholder="Student Branch" /&gt;&lt;/label&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;label&gt;Enter Student ID: &lt;input type="num" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id" /&gt;&lt;/label&gt;&lt;/p&gt;
+  &lt;input type="submit" /&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input {
+   background-color:#E8E8E8;
+   color:black; }
+/* placeholder only style */
+input.studentid:-ms-input-placeholder {
+   font-style:italic;
+   color: red;
+   background-color: yellow;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12684/bandicam%202016-03-08%2001-48-59-851.jpg" style="border-style: solid; border-width: 1px; height: 160px; margin: 0px; width: 650px;"></p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación aunque  Microsoft tiene <a href="https://msdn.microsoft.com/en-us/library/hh772745(v=vs.85).aspx">una descripción en MSDN.</a></p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref("::placeholder")}}</li>
+ <li>{{cssxref("::-webkit-input-placeholder")}}</li>
+ <li>{{cssxref("::-moz-placeholder")}}</li>
+ <li><a href="/es/docs/Web/HTML/Forms_in_HTML">Formularios en HTML</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
diff --git a/files/es/conflicting/web/css/_doublecolon_placeholder/index.html b/files/es/conflicting/web/css/_doublecolon_placeholder/index.html
new file mode 100644
index 0000000000..3c8fbb8c3a
--- /dev/null
+++ b/files/es/conflicting/web/css/_doublecolon_placeholder/index.html
@@ -0,0 +1,109 @@
+---
+title: '::-moz-placeholder'
+slug: 'Web/CSS/::-moz-placeholder'
+tags:
+  - CSS
+  - No estándar(2)
+  - Pseudo-elemento CSS
+  - Referencia CSS
+translation_of: 'Web/CSS/::placeholder'
+translation_of_original: 'Web/CSS/::-moz-placeholder'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<div class="note"><strong>Nota:</strong> El pseudo-elemento <code>::-moz-placeholder</code> fue creado como sustituto de la pseudo-clase {{cssxref(':-moz-placeholder')}} que fue depreciada a partir de la versión de 19 de Firefox.</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El  <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a><code>::-moz-placeholder</code> sirve para seleccionar cualquier elemento de un formulario que esté mostrando un  <a href="/es/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">marcador de posición de texto (placeholder text) </a>. Permite a los desarrolladores web y a los diseñadores de tema personalizar la apariencia de estos elementos, cuyo estilo por defecto es de color gris claro. Puede que no funcione correctamente si se cambia el color de fondo de los campos de los formularios para que sean, por ejemplo, de un color similar, así que en ese caso se puede usar este pseudo-elemento para cambiar el color del marcador de posición de texto (placeholder text).</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En este ejemplo se da estilo al marcador de posición del texto (placeholder text) haciendo que el color del texto sea verde (green).</p>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush:html">&lt;input id="test" placeholder="Placeholder text!"&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush:css">input::-moz-placeholder {
+  color: green;
+}
+</pre>
+
+<p>Obtendremos el siguiente resultado:</p>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("19.0")}}<sup>[1]</sup></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>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("19.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox aplica un estilo por defecto de  <code>{{cssxref("opacity")}}: 0.54</code> al marcador de posición del texto (placeholder). Ver {{Bug("556145")}}. La mayoría de los demás navegadores importante no comparten este estilo ni para el pseudo-elemento ni para la pseudo-clase.</p>
+
+<p>La implementación previa en el motor Gecko era como la pseudo-clase  {{cssxref(":-moz-placeholder")}}. Ver {{Bug("737786")}}.</p>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref("::placeholder")}}</li>
+ <li>{{cssxref("::-webkit-input-placeholder")}}</li>
+ <li>{{cssxref(":-ms-input-placeholder")}}</li>
+ <li><a href="/es/docs/Web/HTML/Forms_in_HTML">Formularios en HTML</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
diff --git a/files/es/conflicting/web/css/_doublecolon_placeholder_70bda352bb504ebdd6cd3362879e2479/index.html b/files/es/conflicting/web/css/_doublecolon_placeholder_70bda352bb504ebdd6cd3362879e2479/index.html
new file mode 100644
index 0000000000..181f0a966c
--- /dev/null
+++ b/files/es/conflicting/web/css/_doublecolon_placeholder_70bda352bb504ebdd6cd3362879e2479/index.html
@@ -0,0 +1,86 @@
+---
+title: '::-webkit-input-placeholder'
+slug: 'Web/CSS/::-webkit-input-placeholder'
+tags:
+  - CSS
+  - NeedsExample
+  - No estándar(2)
+  - Pseudo-elemento
+  - Pseudo-elemento CSS
+  - Referencia
+  - Referencia CSS
+translation_of: 'Web/CSS/::placeholder'
+translation_of_original: 'Web/CSS/::-webkit-input-placeholder'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El  <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> no estándar y propietario <code>::-webkit-input-placeholder</code> representa el <a href="/es/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">marcador de posición de texto (placeholder text)</a> de un elemento formulario. Permite que desarrolladores y diseñadores de temas puedan personalizar este marcador de posición de texto (placeholder). Sólo está soportado por WebKit/Blink.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</p>
+
+<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_además">Ver además</h2>
+
+<ul>
+ <li>{{cssxref("::placeholder")}}</li>
+ <li>{{cssxref("::-moz-placeholder")}}</li>
+ <li>{{cssxref(":-ms-input-placeholder")}}</li>
+ <li><a href="/es/docs/Web/HTML/Forms_in_HTML">Formularios en HTML</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
diff --git a/files/es/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/es/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
new file mode 100644
index 0000000000..dd39986ed4
--- /dev/null
+++ b/files/es/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
@@ -0,0 +1,376 @@
+---
+title: Usando las cajas flexibles CSS
+slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">La propiedad <strong>Flexible Box</strong>, o <strong>flexbox</strong>, de CSS3 es un <a href="https://developer.mozilla.org/es/docs/Web/CSS/Layout_mode">modo de diseño</a> que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos. Para muchas aplicaciones, el modelo "caja flexible" produce una mejora sobre el modelo "bloque" porque no utiliza la propiedad <span style="font-family: courier new,andale mono,monospace;">float</span>, ni hace que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos.</span></p>
+
+<p>Muchos diseñadores verán que el modelo "caja flexible" es más sencillo de utilizar. Los elementos "hijos" de una "caja flexible" pueden colocarse en cualquier dirección y pueden tener dimensiones flexibles para adapterse al espacio visible. Posicionar los elementos "hijos" es por tanto mucho más sencillo, y los diseños complejos pueden hacerse más fácilmente y con código más limpio, ya que el orden de visualización de los elementos es independiente del orden que estos tengan en el código fuente. Esta independencia afecta intencionadamente únicamente a la representación visual, dejando el orden de locución y navegación a lo que diga el código fuente.</p>
+
+<div class="note"><strong>Nota:</strong> Aunque la especificación del diseño de "cajas flexibles" de CSS está en fase de "candidata a recomendación", no todos los navegadores la han implementado. La implementación de WebKit requiere el prefijo <code>-webkit</code>; Internet Explorer implementa una versión antigua de la especificación, con prefijo; Opera 12.10 implementa la última versión, sin prefijo. Revisa la tabla de compatibilidad de cada propiedad para saber cuál es el estado actual de compatibilidad.</div>
+
+<h2 id="El_concepto_de_cajas_flexibles">El concepto de "cajas flexibles"</h2>
+
+<p>Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.</p>
+
+<p>El algoritmo del modelo de diseño de "cajas flexibles" no parte de niguna dirección predeterminada, al contrario de lo que ocurre con el modelo "bloque", que asume una disposición vertical de los elementos, o lo que pasa con el modelo "en línea", que asume una disposición horizontal. Mientras que el modelo "bloque" funciona bien para páginas, se queda muy corto cuando se trata de aplicaciones en las que hay que tener en cuenta el cambio de orientación del dispositivo o los cambios de tamaño realizados por los gestos del usuario. El modelo de "cajas flexibles" es más apropiado para diseños de pequeña escala, mientras que el (emergente) modelo "rejilla" es adecuado para diseños de gran escala. Ambos son parte del gran esfuerzo que el "CSS Working Group" está realizando para proveer de mayor interoperabilidad a las aplicaciones web con todo tipo de usuarios, distintos modos de escritura, y otras necesidades de flexibilidad.</p>
+
+<h2 id="Vocabulario_de_cajas_flexibles">Vocabulario de "cajas flexibles"</h2>
+
+<p>Aunque al hablar de las "cajas flexibles" nos olvidamos de términos como "horizontal/en línea" y "vertical/bloque", se hace necesario emplear una nueva terminología. Fíjate en el siguiente diagrama para afianzar el vocabulario empleado en sus elementos. Se muestra un contenedor flexible que tiene una <code>flex-direction</code> de tipo <code>row</code>, que significa que los elementos flexibles se muestra uno a continuación del otro horizontalmente a lo largo del eje principal (main axis) de acuerdo con el modo de escritura preestablecido, y en este caso, la dirección en que el texto de los elementos fluye es de izquierda-a-derecha.</p>
+
+<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p>
+
+<dl>
+ <dt>Contenedor flexible (Flex container)</dt>
+ <dd>El elemento "padre" que contiene los elementos flexibles. Un contenedor flexible se define usando los valores <code>flex</code> o <code>inline-flex</code> en la propiedad <a href="/en/CSS/display" rel="internal" title="display"><code>display</code></a>.</dd>
+ <dt>Elemento flexible (Flex item)</dt>
+ <dd>
+ <p>Cada hijo de un contenedor flex se convierte en un elemento flexible. Si hay texto directamente incluido en el contenedor flexible, se envuelve automáticamente en un elemento flexible anónimo.</p>
+ </dd>
+ <dt>Ejes</dt>
+ <dd>
+ <p>Cada diseño de "caja flexible" sigue dos ejes. El <strong>eje principal</strong> es el eje a lo largo del cual los elementos flexibles se suceden unos a otros. El <strong>eje secundario</strong> es el eje perpendicular al <strong>eje principal</strong>.</p>
+
+ <ul>
+  <li>La propiedad <code><a href="/en/CSS/flex-direction" rel="internal" title="flex-direction">flex-direction</a></code> establece el eje principal.</li>
+  <li>La propiedad <a href="/en/CSS/justify-content" rel="internal" title="en/CSS/justify-content"><code>justify-content</code></a> define cómo los elementos flexibles se disponen a lo largo del eje principal en la línea en curso.</li>
+  <li>La propiedad <a href="/en/CSS/align-items" title="en/CSS/align-items"><code>align-items</code></a> define cómo los elementos flexibles se disponen a lo largo del eje secundario de la línea en curso.</li>
+  <li>La propiedad <a href="/en/CSS/align-self" title="en/CSS/align-self"><code>align-self</code></a> define cómo cada elemento flexible se alinea respecto al eje secundario, y sustituye al valor por defecto establecido por <code>align-items.</code></li>
+ </ul>
+ </dd>
+ <dt>Direcciones</dt>
+ <dd>
+ <p>Los lados <strong>inicio principal</strong>/<strong>fin principal (main start/main end) </strong>e <strong>inicio secundario</strong>/<strong>fin </strong><strong>secundario (cross start/cross end)</strong> del contenedor flexible describen el origen y final del flujo de los elementos flexibles. Estos siguen el eje principal y secundario según el vector establecido por <code>writing-mode</code> (izquierda-a-derecha, derecha-a-izquierda, etc.).</p>
+
+ <ul>
+  <li>La propiedad <a href="/en/CSS/order" rel="internal" title="en/CSS/order"><code>order</code></a> asigna elementos a grupos ordinales y determina qué elementos aparecen primero.</li>
+  <li>La propiedad <a href="/en/CSS/flex-flow" rel="internal" title="flex-flow"><code>flex-flow</code></a> combina las propiedades <a href="/en/CSS/flex-direction" rel="internal" title="flex-direction"><code>flex-direction</code></a> y <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a> para colocar los elementos flexibles.</li>
+ </ul>
+ </dd>
+ <dt>Líneas</dt>
+ <dd>
+ <p>Los elementos flexibles pueden disponerse en una sola o varias líneas de acuerdo con la propiedad <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a>, que controla la dirección del eje secundario y la dirección en la que las nuevas líneas se apilan.</p>
+ </dd>
+ <dt>Dimensiones</dt>
+ <dd>
+ <p>Los términos equivalentes a "altura" y "anchura" usados en los elementos flexibles son <strong>tamaño principal (main size)</strong> and <strong>tamaño secundario (cross size),</strong> que respectivamente siguen al eje principal y al eje secundario del contenedor flexible.</p>
+
+ <ul>
+  <li>La propiedades <code><a href="/en/CSS/min-height" title="/en/CSS/min-height">min-height</a></code> y <code><a href="/en/CSS/min-width" title="/en/CSS/min-width">min-width</a></code> tienen un nuevo valor, <code>auto</code> que establece el tamaño mínimo de un elemento flexible.</li>
+  <li>La propiedad <a href="/en/CSS/flex" rel="internal" title="en/CSS/flex"><code>flex</code></a> combina las propiedades <code><a href="/en/CSS/flex-basis" rel="internal" title="en/CSS/flex-basis">flex-basis</a></code>, <a href="/en/CSS/flex-grow" rel="internal" title="en/CSS/flex-grow"><code>flex-grow</code></a>, y <a href="/en/CSS/flex-shrink" rel="internal" title="en/CSS/flex-shrink"><code>flex-shrink</code></a> para establecer el grado de flexibilidad de los elementos flexibles.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Diseñando_una_caja_flexible">Diseñando una "caja flexible"</h2>
+
+<p>Para indicar que unos elementos tienen este estilo CSS, asigna la propiedad <a href="/en/CSS/display" title="/en/CSS/display">display</a> así:</p>
+
+<pre class="brush: css">display : flex</pre>
+
+<p>o</p>
+
+<pre class="brush: css">display : inline-flex</pre>
+
+<p>Haciendo esto, se define el elemento como contenedor flexible y todos sus "hijos" como elementos flexibles. El valor <code>flex</code> hace que el contenedor flexible sea un bloque dentro del elemento "padre" al que pertenezca. El valor <code>inline-flex</code> hace que el contenedor flexible sea un elemento "en línea" dentro del elemento "padre" al que pertenezca.</p>
+
+<div class="note"><strong>Nota:</strong> Cuando utilices un prefijo para el tipo de navegador, ponlo en la propiedad "display" no en el atributo "display". Por ejemplo, <code>display : -webkit-flex</code>.</div>
+
+<h2 id="Consideraciones_de_los_elementos_flexibles">Consideraciones de los elementos flexibles</h2>
+
+<p>El texto que se encuentre directamente dentro de un contenedor flexible, será automáticamente envuelto en un elemento flexible anónimo. Sin embargo, si un elemento flexible contiene solamente espacios en blanco no será mostrado, como si tuviera la propiedad <code style="color: rgb(93,86,54); font-size: 14px;">display:none</code>.</p>
+
+<p>Los "hijos" de un contenedor flexible que tengan un posicionamiento absoluto, se situarán de manera que su posición estática se determine en referencia a la esquina del <strong>inicio principal (main start)</strong> de su contenedor flexible.</p>
+
+<p>Actualmente, debido a un problema conocido, asignar <code style="font-size: 14px;">visibility:collapse</code> a un elemento flexible causa que sea tratado como si fuera <code style="font-size: 14px;">display:none</code> en vez de lo que se supone que debería ocurrir, es decir, como si fuera <code style="font-size: 14px;">visibility:hidden</code>. La alternativa mientras se resuelve este problema es usar <code>visibility:hidden</code> para elementos flexibles que deban comportarse como <code>visibility:collapse</code>.</p>
+
+<p>Los márgenes de elementos flexibles adyacentes no se colapsan. Usando márgenes <code>auto</code> se absorbe el espacio extra vertical y horizontalmente y puede ser utilizado para alinear o separar elementos flexibles adyacentes. Ver <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins" title="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Aligning with 'auto' margins</a> en la especificación "W3C Flexible Box Layout Model" para más detalles al respecto.</p>
+
+<p>Para asegurar un tamaño mínimo por defecto de los elementos flexibles, usa <code>min-width:auto</code> y/o <code>min-height:auto</code>. Para los elementos flexibles, el valor de atributo <code>auto</code> calcula la mínima anchura/altura del elemento para que no sea menor que la anchura/altura de su contenido, garantizando que el elemento es mostrado suficientemente grande como para que se vea su contenido. Ver {{cssxref("min-width")}}  y {{cssxref("min-height")}} para más detalles al respecto.</p>
+
+<p>Las propiedades de alineación de "cajas flexibles" realizan un "verdadero" centrado en CSS. Esto significa que los elementos flexibles permanecerán centrados, incluso si estos rebasan su contenedor flexible. Esto puede llegar a ser un problema, ya que si sobrepasan el tope superior de la página o el izquierdo (en escritura LTR de izquierda-a-derecha) o el derecho (en escritura RTL de derecha-a-izquierda), no se puede desplazar hacia ese área, incluso habiendo contenido allí. En el futuro, las propiedades de alineación se ampliarán para que tengan una opción "safe" (seguro) para controlar esta situación. De momento, si esto te preocupa, puedes usar los márgenes para conseguir el centrado, ya que estos responderán de modo seguro parando el centrado si se sobrepasan los límites. En vez de usar las propiedades <code>align-</code>, simplemente pon márgenes automáticos en los elementos flexibles que quieras centrar. En vez de usar las propiedades <code>justify-</code>, pon márgenes automáticos en los límites exteriores del primer y último elemento flexible del contenedor flexible. Los márgenes automáticos se adaptarán asumiendo el espacio sobrante, centrando los elementos flexibles donde sobre espacio, y cambiando a alineación normal donde no sobre espacio. Sin embargo, si tratas de reemplazar <code>justify-content</code> con "centrado-basado-en-márgenes" en una "caja flexible" multi-línea, probablemente no funcionará, ya que tendrías que poner márgenes en el primer y último elemento de cada línea. A menos que puedas predecir qué elementos encajarán en cada línea, no tendrás una respuesta fiable usando el "<span style="line-height: inherit;">centrado-basado-en-márgenes</span><span style="line-height: inherit;">" en el eje principal al reemplazar la propiedad </span><code style="font-size: 14px; line-height: inherit;">justify-content</code><span style="line-height: inherit;">.</span></p>
+
+<p>Recuerda que mientras el orden en que se muestran los elementos es independiente de su orden en el código fuente, esta independecia afecta solamente a la representación visual, y no al orden de locución y navegación que seguirán el orden establecido en el código fuente. Incluso la propiedad {{cssxref("order")}} no afectará a la secuencia de locución ni de navegación. Así que los desarrolladores deben preocuparse del orden de los elementos adecuadamente en el código fuente para que no se deteriore la accesibilidad del documento. </p>
+
+<h2 id="Propiedades_de_las_cajas_flexibles">Propiedades de las "cajas flexibles"</h2>
+
+<h3 id="Propiedades_que_no_afectan_a_las_cajas_flexibles">Propiedades que no afectan a las "cajas flexibles"</h3>
+
+<p>Como las "cajas flexibles" emplean un algoritmo diferente, alguna propiedades no tienen sentido para un contenedor flexible.</p>
+
+<ul>
+ <li>Propiedades column-* del <a href="/en/CSS/Using_CSS_multi-column_layouts" title="/en/CSS/Using_CSS_multi-column_layouts">Módulo Multicol</a> no tienen ningún efecto en un elemento flexible.</li>
+ <li>{{cssxref("float")}} y {{cssxref("clear")}} no tienen ningún efecto en un elemento flexible. Usar <code>float</code> causa que la propiedad <code>display</code> del elemento se comporte como <code>block</code>.</li>
+ <li>{{cssxref("vertical-align")}} no tiene efecto en la alineación de los elementos flexibles.</li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_básico_flex">Ejemplo básico "flex"</h3>
+
+<p>Este ejemplo básico muestra como aplicar "flexibilidad" a un elemento y como sus "hijos" se comportan flexiblemente. </p>
+
+<pre class="brush:html;">​&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;style&gt;
+
+   .flex
+   {
+      /* basic styling */
+      width: 350px;
+      height: 200px;
+      border: 1px solid #555;
+      font: 14px Arial;
+
+      /* flexbox setup */
+      display: -webkit-flex;
+      -webkit-flex-direction: row;
+
+      display: flex;
+      flex-direction: row;
+   }
+
+   .flex &gt; div
+   {
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto;
+
+      width: 30px; /* To make the transition work nicely.  (Transitions to/from
+                      "width:auto" are buggy in Gecko and Webkit, at least.
+                      See http://bugzil.la/731886 for more info.) */
+
+      -webkit-transition: width 0.7s ease-out;
+      transition: width 0.7s ease-out;
+   }
+
+   /* colors */
+   .flex &gt; div:nth-child(1){ background : #009246; }
+   .flex &gt; div:nth-child(2){ background : #F1F2F1; }
+   .flex &gt; div:nth-child(3){ background : #CE2B37; }
+
+   .flex &gt; div:hover
+   {
+        width: 200px;
+   }
+
+   &lt;/style&gt;
+
+ &lt;/head&gt;
+ &lt;body&gt;
+  &lt;p&gt;Flexbox nuovo&lt;/p&gt;
+  &lt;div class="flex"&gt;
+    &lt;div&gt;uno&lt;/div&gt;
+    &lt;div&gt;due&lt;/div&gt;
+    &lt;div&gt;tre&lt;/div&gt;
+  &lt;/div&gt;
+ &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Ejemplo_de_Diseño_del_Santo_Gríal">Ejemplo de "Diseño del Santo Gríal"</h3>
+
+<p>Este ejemplo muestra como la "caja flexible" proporciona la habilidad de cambiar dinámicamente el diseño para distintas resoluciones de pantalla. El diagrama siguiente ilustra la transformación.</p>
+
+<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p>
+
+<p>Aquí se muestra el caso en que el diseño de la página adaptado a un navegador tiene que mostrarse óptimamente en un smartphone. No solamente los elementos se reducen de tamaño, sino que el orden en que se muestran también cambia. La "caja flexible" lo hace muy sencillo.</p>
+
+<pre class="brush:html;">​
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;style&gt;
+
+  body {
+   font: 24px Helvetica;
+   background: #999999;
+  }
+
+  #main {
+   min-height: 800px;
+   margin: 0px;
+   padding: 0px;
+   display: -webkit-flex;
+   display:         flex;
+   -webkit-flex-flow: row;
+           flex-flow: row;
+   }
+
+  #main &gt; article {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #cccc33;
+   border-radius: 7pt;
+   background: #dddd88;
+   -webkit-flex: 3 1 60%;
+           flex: 3 1 60%;
+   -webkit-order: 2;
+           order: 2;
+   }
+
+  #main &gt; nav {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 1;
+           order: 1;
+   }
+
+  #main &gt; aside {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 3;
+           order: 3;
+   }
+
+  header, footer {
+   display: block;
+   margin: 4px;
+   padding: 5px;
+   min-height: 100px;
+   border: 1px solid #eebb55;
+   border-radius: 7pt;
+   background: #ffeebb;
+   }
+
+  /* Too narrow to support three columns */
+  @media all and (max-width: 640px) {
+
+   #main, #page {
+    -webkit-flex-flow: column;
+            flex-flow: column;
+   }
+
+   #main &gt; article, #main &gt; nav, #main &gt; aside {
+    /* Return them to document order */
+    -webkit-order: 0;
+            order: 0;
+   }
+
+   #main &gt; nav, #main &gt; aside, header, footer {
+    min-height: 50px;
+    max-height: 50px;
+   }
+  }
+
+ &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+ &lt;header&gt;header&lt;/header&gt;
+ &lt;div id='main'&gt;
+    &lt;article&gt;article&lt;/article&gt;
+    &lt;nav&gt;nav&lt;/nav&gt;
+    &lt;aside&gt;aside&lt;/aside&gt;
+ &lt;/div&gt;
+ &lt;footer&gt;footer&lt;/footer&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Área_de_juego">Área de juego</h2>
+
+<p>Hay varias áreas de juego de "cajas flexibles" disponibles on-line para experimentar:</p>
+
+<ul>
+ <li><a href="http://demo.agektmr.com/flexbox/" title="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li>
+ <li><a href="http://the-echoplex.net/flexyboxes" title="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li>
+</ul>
+
+<h2 id="Cosas_a_tener_en_mente">Cosas a tener en mente</h2>
+
+<p>El algoritmo de las "cajas flexibles" puede ser un poco complejo de entender a veces. Hay una serie de cosas a considerar para evitar "sorpresas" cuando se utilizan las "cajas flexibles".</p>
+
+<p>Las "cajas flexibles" se comportan en función del <a href="https://developer.mozilla.org/en-US/docs/CSS/writing-mode" title="https://developer.mozilla.org/en-US/docs/CSS/writing-mode">modo de escritura</a> establecido. Esto siginifica que <strong>inicio principal</strong> (<strong>main start</strong>) y <strong>fin principal</strong> (<strong>main end</strong>) se disponen de según la posición de <strong>inicio</strong> (<strong>start</strong>) y <strong>fin</strong> (<strong>end</strong>).</p>
+
+<p><strong>inicio secundario (cross start)</strong> y <strong>fin secundario</strong> (<strong>cross end)</strong> confían en la definición de la posición <strong>inicio</strong> (<strong>start)</strong> o <strong>antes</strong> (<strong>before)</strong> que depende del valor de <a href="/en/CSS/direction" title="direction"><code>direction</code></a>.</p>
+
+<p>Los saltos de página son posibles en el diseño de "cajas flexibles" siempre que la propiedad <code>break-</code> lo permita. Las propiedades CSS3 <code>break-after</code>, <code>break-before</code> y <code>break-inside</code> así como las propiedades CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code> y <code>page-break-inside</code> se aceptan en los contenedores flexibles, también en los elementos flexibles que ellos contienen, y también en los elementos que esos elementos flexibles a su vez contienen.</p>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caraterística</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatGeckoDesktop("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]<br>
+    {{ CompatGeckoDesktop("22.0") }}</td>
+   <td>21.0{{ property_prefix("-webkit") }}</td>
+   <td>10{{ property_prefix("-ms") }}(partial)</td>
+   <td>12.1</td>
+   <td>3.1{{ property_prefix("-webkit") }}(partial)<br>
+    6.1{{ property_prefix("-webkit") }}<br>
+    9</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caraterística</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{ CompatGeckoMobile("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]<br>
+    {{ CompatGeckoMobile("22.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>10{{ property_prefix("-ms") }}(partial)<br>
+    11</td>
+   <td>12.1</td>
+   <td>
+    <p>3.2{{ property_prefix("-webkit") }}(partial)<br>
+     7.1{{ property_prefix("-webkit") }}<br>
+     9.0</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notas">Notas</h3>
+
+<p>[1] Internet Explorer 10 y Safari soportan un antiguo borrador de la especificación que es incompatible. No han sido actualizados para soportar la versión final.</p>
+
+<p>[2] Firefox soporta solamente la "caja flexible" con una sola línea. Para activar el soporte de "caja flexible" el usuario tiene que cambiar la preferencia about:config "layout.css.flexbox.enabled" a <code>true</code>.</p>
+
+<p>[3] El navegador de Android hasta la versión 4.3 soporta un borrador antiguo e incompatible de la especificación. Android 4.4 ha sido actualizado para dar soporte a la versión final.</p>
+
+<p>[4] Mientras que en la implementación inicial en Opera 12.10 <code>flexbox </code>no estaba en el prefijo, obtuvo prefijos en las versiones de la 15 a la 16 de Opera y 15 a 19 de Opera Mobile con {{property_prefix("-webkit")}}. Este prefijo, fue eliminado de nuevo en Opera 17 y Opera Mobile 24.</p>
+
+<p>[5] Hasta Firefox 29, especificar <code>visibility: collapse</code> en un elemento flex causaba que fuera tratado como si fuera <code>display: none </code>en vez del comportamiento pretendido, tratándolo como si fuera <code>visibility: hidden</code>. El método alternativo sugerido es usar <code>visibility: hidden</code> para los elementos flex que debieran comportarse como si huberan sido designados <code>visibility: collapse</code>. Para más información, ver {{bug(783470)}}.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://github.com/philipwalton/flexbugs">El Proyecto Flexbugs</a> para información de errores en implementación de flexbox en navegadores.</li>
+</ul>
diff --git a/files/es/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/es/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html
new file mode 100644
index 0000000000..e42553fe97
--- /dev/null
+++ b/files/es/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html
@@ -0,0 +1,191 @@
+---
+title: Usando flexbox para componer aplicaciones web
+slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_flexbox_para_componer_aplicaciones_web
+tags:
+  - Avanzado
+  - CSS
+  - Cajas Flexibles CSS
+  - Ejemplo
+  - Guía
+  - Web
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
+translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications
+---
+<p>{{CSSRef}}</p>
+
+<p>Usar <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">flexbox</a> puede ayudarte a diseñar atractivas composiciones en aplicaciones web que escalen mejor de escritorio a móvil. Pon fin a los elementos flotantes {{HTMLElement("div")}}, <a href="/en-US/docs/Web/CSS/position#Absolute_positioning">el posicionamiento absoluto</a>, y los <em>hacks</em> de JavaScript, y comienza a construir composiciones fluidas en horizontal y vertical en apenas unas líneas de <a href="/es/docs/Web/CSS">CSS</a>. Algunos ejemplos básicos de casos de uso:</p>
+
+<ul>
+ <li>Quieres centrar un elemento en la mitad de una página</li>
+ <li>Quieres un conjunto de contenedores que fluyan verticalmente, uno tras otro</li>
+ <li>Quieres crear una fila de botones u otros elementos que colapse verticalmente en tamaños menores de pantalla</li>
+</ul>
+
+<p>Este artículo sólo aborda el uso de <em>flexbox</em> con navegadores que soportan la implementación moderna y sin prefijos del estándar. Para información sobre prefijos de proveedores para navegadores más antiguos, por favor lee <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">la guía más general para usar cajas flexibles de CSS</a>.</p>
+
+<h2 id="Conceptos_básicos">Conceptos básicos</h2>
+
+<p>Con flexbox puedes hacer que los elementos dentro de cualquier {{HTMLElement("div")}} fluyan estableciendo la propiedad {{cssxref("display")}} como <code>flex</code> y luego dando a la propiedad {{cssxref("flex-flow")}} el valor <code>row</code>, si deseas que los elementos fluyan horizontalmente, o el valor <code>column</code>, si quieres que lo hagan verticalmente. Si estás usando un flexbox horizontal y deseas que tus contenidos queden envueltos verticalmente, especifica además el valor <code>wrap</code>.</p>
+
+<p>Después, para cada elemento que desees sea parte del flujo de cajas, establece la propiedad {{cssxref("flex")}}. Generalmente querrás utilizar uno de los tres siguientes valores:</p>
+
+<ul>
+ <li>Si quieres un elemento que sólo ocupa su ancho asignado, como un botón, utiliza <code>flex: none</code> que se expande a <code>0 0 auto</code>.</li>
+ <li>Si deseas explícitamente dimensionar un elemento, usa <code>flex: 0 0 <em>tamaño</em></code>. Por ejemplo: <code>flex 0 0 60px</code>.</li>
+ <li>Si necesitas un elemento que se expanda para rellenar el espacio disponible, compartiendo el espacio igualmente si hay múltiples elementos de este tipo dentro del flujo, utiliza <code>flex: auto</code>. Se expande a <code>1 1 auto</code>.</li>
+</ul>
+
+<p>Por supuesto, hay otras posibilidades, pero estas deberían cubrir los casos de uso básicos. Veamos cómo se aplica esto en algunos ejemplos.</p>
+
+<h2 id="Centrando_un_elemento_en_una_página">Centrando un elemento en una página</h2>
+
+<p>Para este caso, el método más sencillo es crear dos cajas flexibles, una dentro de otra. Cada flexbox tendrá tres elementos: dos de ellos conteniendo el elemento centrado y después el propio elemento centrado.</p>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css;">.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.horizontal-box {
+  display: flex;
+  flex-flow: row;
+}
+.spacer {
+  flex: auto;
+  background-color: black;
+}
+.centered-element {
+  flex: none;
+  background-color: white;
+}
+</pre>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html;">&lt;div class="vertical-box"&gt;
+  &lt;div class="spacer"&gt;&lt;/div&gt;
+  &lt;div class="centered-element horizontal-box"&gt;
+    &lt;div class="spacer"&gt;&lt;/div&gt;
+    &lt;div class="centered-element"&gt;Centered content&lt;/div&gt;
+     &lt;div class="spacer"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="spacer"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Centering_an_element_inside_a_page', 500, 500) }}</p>
+
+<h2 id="Haciendo_fluir_verticalmente_un_conjunto_de_contenedores">Haciendo fluir verticalmente un conjunto de contenedores</h2>
+
+<p>Imagina que tienes la composición de una página con una sección de cabecera, una de contenidos y un pie. La cabecera y el pie deberían tener un tamaño fijo, pero la sección de contenidos se debería redimensionar según el espacio disponible. Esto puede lograrse estableciendo la propiedad {{cssxref("flex")}} del contenido como <code>auto</code> y la misma propiedad {{cssxref("flex")}} de la cabecera y el pie como <code>none</code>.</p>
+
+<h3 id="Contenido_CSS_2">Contenido CSS</h3>
+
+<pre class="brush: css;highlight:[8,14,18]">.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.fixed-size {
+  flex: none;
+  height: 30px;
+  background-color: black;
+  text-align: center;
+}
+.flexible-size {
+  flex: auto;
+  background-color: white;
+}
+</pre>
+
+<h3 id="Contenido_HTML_2">Contenido HTML</h3>
+
+<pre class="brush: html;">&lt;div id="document" class="vertical-box"&gt;
+  &lt;div class="fixed-size"&gt;&lt;button id="increase-size"&gt;Increase container size&lt;/button&gt;&lt;/div&gt;
+  &lt;div id="flexible-content" class="flexible-size"&gt;&lt;/div&gt;
+  &lt;div class="fixed-size"&gt;&lt;button id="decrease-size"&gt;Decrease container size&lt;/button&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenido_JavaScript">Contenido JavaScript</h3>
+
+<pre class="brush: js;">var height = 400;
+document.getElementById('increase-size').onclick=function() {
+  height += 10;
+  if (height &gt; 500) height = 500;
+  document.getElementById('document').style.height = (height + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  height -= 10;
+  if (height &lt; 300) height = 300;
+  document.getElementById('document').style.height = (height + "px");
+}</pre>
+
+<h3 id="Resultado_2">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Flowing_a_set_of_containers_vertically', 500, 500) }}</p>
+
+<p>Este ejemplo se ha creado para que clicar en el encabezamiento incremente el tamaño y clicar en el pie lo reduzca. Observa cómo el contenido se redimensiona automática y adecuadamente, mientras las dimensiones del encabezamiento y el pie se mantienen constantes.</p>
+
+<h2 id="Creando_un_contenedor_que_colapse_horizontalmente">Creando un contenedor que colapse horizontalmente</h2>
+
+<p>En algunos casos podrías querer componer horizontalmente un conjunto de información donde el tamaño de pantalla lo permita, pero colapsar los contenidos horizontalmente donde no. Esto es bastate sencillo con flexbox. Puedes conseguirlo añadiendo a la propiedad {{cssxref("flex-flow")}} el valor <code>wrap</code>.</p>
+
+<h3 id="Contenido_CSS_3">Contenido CSS</h3>
+
+<pre class="brush: css;highlight:[4]">.horizontal-container {
+  display: flex;
+  width: 300px;
+  flex-flow: row wrap;
+}
+.fixed-size {
+  flex: none;
+  width: 100px;
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+</pre>
+
+<h3 id="Contenido_HTML_3">Contenido HTML</h3>
+
+<pre class="brush: html;">&lt;div id="container" class="horizontal-container"&gt;
+  &lt;div class="fixed-size"&gt;Element 1&lt;/div&gt;
+  &lt;div class="fixed-size"&gt;Element 2&lt;/div&gt;
+  &lt;div class="fixed-size"&gt;Element 3&lt;/div&gt;
+&lt;/div&gt;&lt;button id="increase-size"&gt;Increase container size&lt;/button&gt;&lt;button id="decrease-size"&gt;Decrease container size&lt;/button&gt;
+</pre>
+
+<h3 id="Contenido_JavaScript_2">Contenido JavaScript</h3>
+
+<pre class="brush: js;">var width = 300;
+
+document.getElementById('increase-size').onclick=function() {
+  width += 100;
+  if (width &gt; 300) width = 300;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  width -= 100;
+  if (width &lt; 100) width = 100;
+  document.getElementById('container').style.width = (width + "px");
+}
+</pre>
+
+<h3 id="Resultado_3">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Creating_a_collapsing_horizontal_container', 500, 200) }}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">Usando cajas flexibles CSS</a></li>
+</ul>
diff --git a/files/es/conflicting/web/css/cursor/index.html b/files/es/conflicting/web/css/cursor/index.html
new file mode 100644
index 0000000000..213b3607c0
--- /dev/null
+++ b/files/es/conflicting/web/css/cursor/index.html
@@ -0,0 +1,11 @@
+---
+title: '-moz-cell'
+slug: Web/CSS/-moz-cell
+tags:
+  - CSS
+translation_of: Web/CSS/cursor
+translation_of_original: Web/CSS/-moz-cell
+---
+<div>{{CSSRef}}{{obsolete_header}}</div>
+
+<p><em>¡No uses este valor!Don't use this value! </em> Usa el valor  {{cssxref("cursor#cell","cell")}} en su lugar.</p>
diff --git a/files/es/conflicting/web/css/font-variant/index.html b/files/es/conflicting/web/css/font-variant/index.html
new file mode 100644
index 0000000000..332e284385
--- /dev/null
+++ b/files/es/conflicting/web/css/font-variant/index.html
@@ -0,0 +1,11 @@
+---
+title: normal
+slug: Web/CSS/normal
+translation_of: Web/CSS/font-variant
+translation_of_original: Web/CSS/normal
+---
+<h2 id="Sumario" name="Sumario">Sumario</h2>
+<p>El valor <i>normal</i> en una propiedad CSS, es normalmente el valor medio de entre los posibles valores que puede tomar. Es el valor por defecto, es decir, el que tiene la propiedad si no establecemos uno distinto.</p>
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+<p>En la propiedad <code>font-style:</code> <code>normal</code> establece que el tipo de fuente no es <code>italic</code> ni <code>oblique</code>.</p>
+<p>El la propiedad <code>font-size:</code> <code>normal</code>se establece al tamaño de la fuente al tamaño que esté establecido en el User Agent.</p>
diff --git a/files/es/conflicting/web/css/width/index.html b/files/es/conflicting/web/css/width/index.html
new file mode 100644
index 0000000000..c380b1b891
--- /dev/null
+++ b/files/es/conflicting/web/css/width/index.html
@@ -0,0 +1,50 @@
+---
+title: auto
+slug: Web/CSS/auto
+tags:
+  - CSS
+  - 'CSS:Referencias'
+  - Todas_las_Categorías
+translation_of: Web/CSS/width
+translation_of_original: Web/CSS/auto
+---
+<p>
+</p><p>&lt;&lt; <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a>
+</p>
+<h3 id="Resumen" name="Resumen"> Resumen </h3>
+<p>Un valor computado automáticamente por el 'useragent.'
+</p><p>Usando el valor <i>auto</i> en cualquier propiedad, dejamos al navegador que calcule el valor requerido. </p><p><br>
+FIXME
+</p>
+<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3>
+<pre class="eval">div {
+   height: 600px;
+   border: 1px solid #000;
+}
+</pre>
+<pre class="eval">div img {
+   height: auto;
+   border: 1px solid red;
+}
+</pre>
+<h3 id="Se_utiliza_en" name="Se_utiliza_en"> Se utiliza en </h3>
+<ul><li> {{ Cssxref("overflow") }}
+</li><li> {{ Cssxref("cursor") }}
+</li><li> {{ Cssxref("width") }}
+</li><li> {{ Cssxref("marker-offset") }}
+</li><li> {{ Cssxref("margin") }}
+</li><li> margin-* (left|bottom|top|right|start|end)
+</li><li> {{ Cssxref("bottom") }}
+</li><li> {{ Cssxref("left") }}
+</li><li> {{ Cssxref("table-layout") }}
+</li><li> {{ Cssxref("z-index") }}
+</li><li> {{ Cssxref("-moz-column-width") }}
+</li></ul>
+<p><br>
+</p>
+<div class="noinclude">
+<p><span class="comment">Categorías</span>
+<span class="comment">Interwiki Languages</span>
+</p>
+</div>
+{{ languages( { "en": "en/CSS/auto" } ) }}