delete pages that were never translated from en-US (es, part 2) (#1550)

7 files changed, 0 insertions, 4022 deletions

diff --git a/files/es/learn/forms/property_compatibility_table_for_form_controls/index.html b/files/es/learn/forms/property_compatibility_table_for_form_controls/index.html
deleted file mode 100644
index a5c7202d69..0000000000
--- a/files/es/learn/forms/property_compatibility_table_for_form_controls/index.html
+++ /dev/null
@@ -1,2004 +0,0 @@
----
-title: Tabla de compatibilidad de propiedades CSS para controles de formulario
-slug: Learn/Forms/Property_compatibility_table_for_form_controls
-translation_of: Learn/Forms/Property_compatibility_table_for_form_controls
-original_slug: Learn/HTML/Forms/Property_compatibility_table_for_form_controls
----
-<div>{{learnsidebar}}</div>
-
-<p class="summary">Las siguientes tablas de compatibilidad intentan resumir el estado del soporte de CSS para formularios HTML. Debido a la complejidad de los formularios CSS y HTML, estas tablas no se pueden considerar una referencia perfecta. Sin embargo, le darán una buena idea de lo que se puede y no se puede hacer, lo que le ayudará al aprender a hacer las cosas.</p>
-
-<h2 id="Cómo_leer_las_tablas">Cómo leer las tablas</h2>
-
-<h3 id="Valores">Valores</h3>
-
-<p>Para cada propiedad, hay cuatro valores posibles:</p>
-
-<dl>
- <dt>Si</dt>
- <dd>Existe un soporte razonablemente consistente para la propiedad en todos los navegadores. Es posible que aún enfrente efectos secundarios extraños en ciertos casos extremos.</dd>
- <dt>Parcial</dt>
- <dd>Si bien la propiedad funciona, con frecuencia puede enfrentar efectos secundarios extraños o inconsistencias. Probablemente debería evitar estas propiedades a menos que primero domine esos efectos secundarios.</dd>
- <dt>No</dt>
- <dd>La propiedad simplemente no funciona o es tan inconsistente que no es confiable.</dd>
- <dt>n.a.</dt>
- <dd>La propiedad no tiene ningún significado para este tipo de widget.</dd>
-</dl>
-
-<h3 id="Representación">Representación</h3>
-
-<p>Para cada propiedad hay dos representaciones posibles:</p>
-
-<dl>
- <dt>N (Normal)</dt>
- <dd>Indica que la propiedad se aplica tal cual</dd>
- <dt>T (Retocada)</dt>
- <dd>Indica que la propiedad se aplica con la regla adicional como se muestra a continuación:</dd>
-</dl>
-
-<pre class="brush: css notranslate">* {
-  /* Turn off the native look and feel */
-  -webkit-appearance: none;
-  appearance: none;
-
-/* for Internet Explorer */
-  background: none;
-}</pre>
-
-<h2 id="Tablas_de_compatibilidad">Tablas de compatibilidad</h2>
-
-<h3 id="Comportamientos_globales">Comportamientos globales</h3>
-
-<p>Algunos comportamientos son comunes a muchos navegadores a nivel global::</p>
-
-<dl>
- <dt>{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}</dt>
- <dd>El uso de una de estas propiedades puede desactivar parcial o totalmente la apariencia nativa de los widgets en algunos navegadores. Tenga cuidado cuando los use.</dd>
- <dt>{{cssxref("line-height")}}</dt>
- <dd>Esta propiedad se admite de forma inconsistente en todos los navegadores y debe evitarla.</dd>
- <dt>{{cssxref("text-decoration")}}</dt>
- <dd>Esta propiedad no es compatible con el navegador Opera en widgets de formulario.</dd>
- <dt>{{cssxref("text-overflow")}}</dt>
- <dd>Opera, Safari, y IE9 no admiten esta propiedad en widgets de formulario.</dd>
- <dt>{{cssxref("text-shadow")}}</dt>
- <dd>Opera no admite {{cssxref("text-shadow")}} en widgets de formularios e IE9 no lo admite en absoluto.</dd>
-</dl>
-
-<h3 id="Text_fields">Text fields</h3>
-
-<p>See the <code>{{htmlelement("input/text", "text")}}</code>, <code>{{htmlelement("input/search", "search")}}</code>, and <code>{{htmlelement("input/password", "password")}}</code> input types.</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col" style="text-align: center;">N</th>
-   <th scope="col" style="text-align: center;">T</th>
-   <th scope="col">Note</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>CSS box model</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td>
-    <ol>
-     <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look &amp; feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields.</li>
-     <li>On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td>
-    <ol>
-     <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look &amp; feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields.</li>
-     <li>On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td>
-    <ol>
-     <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look &amp; feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields.</li>
-     <li>On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li>
-    </ol>
-   </td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Text and font</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}<sup>[1]</sup></th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td>
-    <ol>
-     <li>If the {{cssxref("border-color")}} property is not set, some WebKit based browsers will apply the {{cssxref("color")}} property to the border as well as the font on <code>{{htmlelement("textarea")}}</code>s.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td>See the note about {{cssxref("line-height")}}</td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
-   <td>See the note about Opera</td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>IE9 supports this property only on <code>{{htmlelement("textarea")}}</code>s, whereas Opera only supports it on single line text fields.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Border and background</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td>
-    <ol>
-     <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look &amp; feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td>
-    <ol>
-     <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look &amp; feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li>
-     <li>On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>IE9 does not support this property.</li>
-    </ol>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Buttons">Buttons</h3>
-
-<p>See the <code>{{htmlelement("input/button", "button")}}</code>,  <code>{{htmlelement("input/submit", "submit")}}</code>, and <code>{{htmlelement("input/reset", "reset")}}</code> input types and the <code>{{htmlelement("button")}}</code> element.</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col" style="text-align: center;">N</th>
-   <th scope="col" style="text-align: center;">T</th>
-   <th scope="col">Note</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>CSS box model</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td>
-    <ol>
-     <li>This property is not applied on WebKit based browsers on Mac OSX or iOS.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td>
-    <ol>
-     <li>This property is not applied on WebKit based browsers on Mac OSX or iOS.</li>
-    </ol>
-   </td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Text and font</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td>See the note about {{cssxref("line-height")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Border and background</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>IE9 does not support this property.</li>
-    </ol>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Number">Number</h3>
-
-<p>See the  <code>{{htmlelement("input/number", "number")}}</code> input type. There is no standard way to change the style of spinners used to change the value of the field, with the spinners on Safari being outside the field.</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col" style="text-align: center;">N</th>
-   <th scope="col" style="text-align: center;">T</th>
-   <th scope="col">Note</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>CSS box model</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>On Opera, the spinners are zoomed in, which can hide the content of the field.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>On Opera, the spinners are zoomed in, which can hide the content of the field.</li>
-    </ol>
-   </td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Text and font</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td>See the note about {{cssxref("line-height")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Border and background</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td colspan="1" rowspan="3">
-    <p>Supported but there is too much inconsistency between browsers to be reliable.</p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Check_boxes_and_radio_buttons">Check boxes and radio buttons</h3>
-
-<p>See the <code>{{htmlelement("input/checkbox", "checkbox")}}</code> and <code>{{htmlelement("input/radio", "radio")}}</code> input types.</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col" style="text-align: center;">N</th>
-   <th scope="col" style="text-align: center;">T</th>
-   <th scope="col">Note</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>CSS box model</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>Some browsers add extra margins and others stretch the widget.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>Some browsers add extra margins and others stretch the widget.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Text and font</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Border and background</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Select_boxes_single_line">Select boxes (single line)</h3>
-
-<p>See the <code>{{htmlelement("select")}}</code>,  <code>{{htmlelement("optgroup")}}</code> and  <code>{{htmlelement("option")}}</code> elements.</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col" style="text-align: center;">N</th>
-   <th scope="col" style="text-align: center;">T</th>
-   <th scope="col">Note</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>CSS box model</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>This property is okay on the <code>{{htmlelement("select")}}</code> element, but it cannot be the case on the <code>{{htmlelement("option")}}</code> or <code>{{htmlelement("optgroup")}}</code> elements.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[2]</sup></td>
-   <td>
-    <ol>
-     <li>The property is applied, but in an inconsistent way between browsers on Mac OSX.</li>
-     <li>The property is well applied on the <code>{{htmlelement("select")}}</code> element, but is inconsistently handled on <code>{{htmlelement("option")}}</code> and <code>{{htmlelement("optgroup")}}</code> elements.</li>
-    </ol>
-   </td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Text and font</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on <code>{{htmlelement("option")}}</code> and <code>{{htmlelement("optgroup")}}</code> elements.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on <code>{{htmlelement("option")}}</code> and <code>{{htmlelement("optgroup")}}</code> elements.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>IE9 does not support this property on <code>{{htmlelement("select")}}</code>, <code>{{htmlelement("option")}}</code>, and <code>{{htmlelement("optgroup")}}</code> elements; WebKit based browsers on Mac OSX do not support this property on <code>{{htmlelement("option")}}</code> and <code>{{htmlelement("optgroup")}}</code> elements.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>IE9 on Windows 7 and WebKit based browsers on Mac OSX do not support this property on this widget.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>Only Firefox provides full support for this property. Opera does not support this property at all and other browsers only support it on the <code>{{htmlelement("select")}}</code> element.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
-   <td>
-    <ol>
-     <li>Most of the browsers only support this property on the <code>{{htmlelement("select")}}</code> element.</li>
-     <li>IE9 does not support this property.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
-   <td>
-    <ol>
-     <li>Most of the browsers only support this property on the <code>{{htmlelement("select")}}</code> element.</li>
-     <li>IE9 does not support this property.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>Most of the browsers only support this property on the <code>{{htmlelement("select")}}</code> element.</li>
-    </ol>
-   </td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Border and background</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td colspan="1" rowspan="3">
-    <ol>
-     <li>Most of the browsers only support this property on the <code>{{htmlelement("select")}}</code> element.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-  </tr>
- </tbody>
-</table>
-
-<p>Note Firefox does not provide any way to change the down arrow on the <code>{{htmlelement("select")}}</code> element.</p>
-
-<h3 id="Select_boxes_multiline">Select boxes (multiline)</h3>
-
-<p>See the <code>{{htmlelement("select")}}</code>, <code>{{htmlelement("optgroup")}}</code> and  <code>{{htmlelement("option")}}</code> elements and the <a href="/en-US/docs/Web/HTML/Attributes/size"><code>size</code> attribute</a>.</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col" style="text-align: center;">N</th>
-   <th scope="col" style="text-align: center;">T</th>
-   <th scope="col">Note</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>CSS box model</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>Opera does not support {{cssxref("padding-top")}} and {{cssxref("padding-bottom")}} on the <code>{{htmlelement("select")}}</code> element.</li>
-    </ol>
-   </td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Text and font</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td>See the note about {{cssxref("line-height")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>IE9 does not support this property on <code>{{htmlelement("select")}}</code>, <code>{{htmlelement("option")}}</code>, and <code>{{htmlelement("optgroup")}}</code> elements; WebKit based browsers on Mac OSX do not support this property on <code>{{htmlelement("option")}}</code> and <code>{{htmlelement("optgroup")}}</code> elements.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>IE9 on Windows 7 and WebKit based browser on Mac OSX do not support this property on this widget.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>Only supported by Firefox and IE9+.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>Most of the browsers only support this property on the <code>{{htmlelement("select")}}</code> element.</li>
-    </ol>
-   </td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Border and background</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>IE9 does not support this property.</li>
-    </ol>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Datalist">Datalist</h3>
-
-<p>See the <code>{{htmlelement("datalist")}}</code> and <code>{{htmlelement("input")}}</code> elements and the <a href="/en-US/docs/Web/HTML/Attributes/list"><code>list</code> attribute</a>.</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col" style="text-align: center;">N</th>
-   <th scope="col" style="text-align: center;">T</th>
-   <th scope="col">Note</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>CSS box model</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Text and font</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Border and background</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="File_picker">File picker</h3>
-
-<p>See the <code>{{htmlelement("input/file", "file")}}</code> input type.</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col" style="text-align: center;">N</th>
-   <th scope="col" style="text-align: center;">T</th>
-   <th scope="col">Note</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>CSS box model</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Text and font</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>Supported, but there is too much inconsistency between browsers to be reliable.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>Many browsers apply this property to the select button.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>It acts more or less like an extra left margin outside the widget.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Border and background</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>Supported, but there is too much inconsistency between browsers to be reliable.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>IE9 does not support this property.</li>
-    </ol>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Date_pickers">Date pickers</h3>
-
-<p>See the <code>{{htmlelement("input/date", "date")}}</code> and <code>{{htmlelement("input/time", "time")}}</code> input types. Many properties are supported, but there is too much inconstency between browsers to be reliable.</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col" style="text-align: center;">N</th>
-   <th scope="col" style="text-align: center;">T</th>
-   <th scope="col">Note</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>CSS box model</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Text and font</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Border and background</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Color_pickers">Color pickers</h3>
-
-<p>See the <code>{{htmlelement("input/color", "color")}}</code> input type:</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col" style="text-align: center;">N</th>
-   <th scope="col" style="text-align: center;">T</th>
-   <th scope="col">Note</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>CSS box model</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td>
-    <ol>
-     <li>Opera handles this like a select widget with the same restriction.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td>
-    <ol>
-     <li>Opera handles this like a select widget with the same restriction.</li>
-    </ol>
-   </td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Text and font</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Border and background</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td colspan="1" rowspan="3">
-    <ol>
-     <li>Supported, but there is too much inconsistency between browsers to be reliable.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Meters_and_progress">Meters and progress</h3>
-
-<p>See the <code>{{htmlelement("meter")}}</code> and <code>{{htmlelement("progress")}}</code> elements:</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col" style="text-align: center;">N</th>
-   <th scope="col" style="text-align: center;">T</th>
-   <th scope="col">Note</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>CSS box model</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>Chrome hides the <code>{{htmlelement("progress")}}</code> and <code>{{htmlelement("meter")}}</code> element when the {{cssxref("padding")}} property is applied on a tweaked element.</li>
-    </ol>
-   </td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Text and font</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Border and background</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td colspan="1" rowspan="3">
-    <ol>
-     <li>Supported, but there is too much inconsistency between browsers to be reliable.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Range">Range</h3>
-
-<p>See the <code>{{htmlelement("input/range", "range")}}</code> input type. There is no standard way to change the style of the range grip and Opera has no way to tweak the default rendering of the range widget.</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col" style="text-align: center;">N</th>
-   <th scope="col" style="text-align: center;">T</th>
-   <th scope="col">Note</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>CSS box model</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td>
-    <ol>
-     <li>Chrome and Opera add some extra space around the widget, whereas Opera on Windows 7 stretches the range grip.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td>
-    <ol>
-     <li>The {{cssxref("padding")}} is applied, but has no visual effect.</li>
-    </ol>
-   </td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Text and font</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Border and background</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td colspan="1" rowspan="3">
-    <ol>
-     <li>Supported, but there is too much inconsistency between browsers to be reliable.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Image_buttons">Image buttons</h3>
-
-<p>See the <code>{{htmlelement("input/image", "image")}}</code> input type:</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col" style="text-align: center;">N</th>
-   <th scope="col" style="text-align: center;">T</th>
-   <th scope="col">Note</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>CSS box model</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td></td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Text and font</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td style="text-align: center; vertical-align: top;">N.A.</td>
-   <td></td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <th colspan="4" scope="col"><em>Border and background</em></th>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
-   <td colspan="1"></td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td colspan="1">
-    <ol>
-     <li>IE9 does not support this property.</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
-   <td colspan="1">
-    <ol>
-     <li>IE9 does not support this property.</li>
-    </ol>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="See_also">See also</h2>
-
-<h3 id="Learning_path">Learning path</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/HTML5_input_types">HTML5 input types</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Additional_form_controls">Additional form controls</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/UI_pseudo-classes">UI pseudo-classes</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
-</ul>
-
-<h3 id="Advanced_Topics">Advanced Topics</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
-</ul>
diff --git a/files/es/learn/javascript/asynchronous/async_await/index.html b/files/es/learn/javascript/asynchronous/async_await/index.html
deleted file mode 100644
index 3487b11664..0000000000
--- a/files/es/learn/javascript/asynchronous/async_await/index.html
+++ /dev/null
@@ -1,411 +0,0 @@
----
-title: Haciendo la programación asíncrona más fácil con async y await
-slug: Learn/JavaScript/Asynchronous/Async_await
-translation_of: Learn/JavaScript/Asynchronous/Async_await
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary">Las incorporaciones más recientes al lenguaje JavaScript, son las <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">funciones async</a> y la palabra clave <code>await</code>, parte de la edición ECMAScript 2017 (véase <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support in Mozilla</a>). Estas características, básicamente, actúan como azúcar sintáctico, haciendo el código asíncrono fácil de escribir y leer más tarde. Hacen que el código asíncrono se parezca más al código síncrono de la vieja escuela, por lo que merece la pena aprenderlo. </p>
-
-<p>Este artículo le da lo que usted necesita saber. </p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Requisitos previos:</th>
-   <td>Conocimientos básicos de informática, entender de manera razonable los fundamentos de JavaScript y entender el código asíncrono en general y las promesas. </td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Entender las promesas y cómo usarlas</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Los_fundamentos_de_asyncawait">Los fundamentos de async/await</h2>
-
-<p>Hay dos partes a la hora de usar async/await en su código.</p>
-
-<h3 id="La_palabra_clave_async">La palabra clave async</h3>
-
-<p>Primero tenemos la palabra clave "async", que se coloca delante de la declaración de una función, para convertirla en función "async"(asíncrona). Una función "async", es una función que sabe cómo esperar la posibilidad de que la palabra clave "await" sea utilizada para invocar código asíncrono. </p>
-
-<p>Intenta escribir las siguientes líneas en la consola de tu navegador. </p>
-
-<pre class="brush: js notranslate">function hello() { return "Hello" };
-hello();</pre>
-
-<p>La función returna "Hello" — nada especial, verdad?</p>
-
-<p>Pero, qué pasa si convertimos esto en una función async? Trata lo siguiente:</p>
-
-<pre class="brush: js notranslate">async function hello() { return "Hello" };
-hello();</pre>
-
-<p>Ah!. Ahora cuando invocamos la función, retorna una promesa(promise). Esta es una de las características particulares de las funciones async —  los valores que retornan están garantizados para ser convertidos en promesas.</p>
-
-<p>También puedes crear una <a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">expresión de función async</a>, así:</p>
-
-<pre class="brush: js notranslate">let hello = async function() { return "Hello" };
-hello();</pre>
-
-<p>Y puedes utilizar funciones flecha(arrow functions):</p>
-
-<pre class="brush: js notranslate">let hello = async () =&gt; { return "Hello" };</pre>
-
-<p>Todos estos hacen básicamente lo mismo.</p>
-
-<p>Para realmente consumir el valor retornado cuando la promesa se cumple, ya que se está devolviendo una promesa, podemos utilizar un bloque <code>then()</code>: </p>
-
-<pre class="brush: js notranslate">hello().then((value) =&gt; console.log(value))</pre>
-
-<p>o incluso sólo un shorthand como</p>
-
-<pre class="brush: js notranslate">hello().then(console.log)</pre>
-
-<p>Como vimos en el último artículo.</p>
-
-<p>La palabra clave <code>async</code> se añade a las funciones para decirles que devuelvan una promesa en lugar de devolver directamente el valor. Adicionamente, esto permite que las funciones síncronas eviten cualquier potencial sobrecarga que viene con correr con el soporte por usar <code>async</code>. Cuando una función es declarada <code>async</code> con sólo añadir la manipulación necesaria, el motor de JavaScript puede optimizar su programa por usted. Dulce!</p>
-
-<p>So the <code>async</code> keyword is added to functions to tell them to return a promise rather than directly returning the value. In addition, this lets synchronous functions avoid any potential overhead that comes with running with support for using <code>await</code>. By only adding the necessary handling when the function is declared <code>async</code>, the JavaScript engine can optimize your program for you. Sweet!</p>
-
-<h3 id="La_palabra_clave_await">La palabra clave await</h3>
-
-<p>La ventaja real de las funciones asincronas aparecen cuando las combinas con la palabra clave <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a> — en efecto, <strong><code>await</code> solo trabaja dentro de las funciones async</strong>. Esta puede ser puesta frente a cualquier funcion async basada en una promesa para pausar tu codigo en esa linea hasta que se cumpla la promesa, entonces retorna el valor resultante. Mientras tanto, otro código que puede estar esperando una oportunidad para ejecutarse, puede hacerlo.</p>
-
-<p>Puedes usar <code>await</code> cuando llames cualquier funcion que retorna una Promesa, incluyendo funciones web API.</p>
-
-<p>Este es un ejemplo trivial:</p>
-
-<pre class="brush: js notranslate">async function hello() {
-  return greeting = await Promise.resolve("Hello");
-};
-
-hello().then(alert);</pre>
-
-<p>Por supuesto, el ejemplo anterior no es muy util, aunque este sirve para ilustrar la syntaxis. Vamos a ver un ejemplo real.</p>
-
-<h2 id="Reescribiendo_el_código_de_las_promesas_con_asyncawait">Reescribiendo el código de las promesas con async/await</h2>
-
-<p>Let's look back at a simple fetch example that we saw in the previous article:</p>
-
-<pre class="brush: js notranslate">fetch('coffee.jpg')
-.then(response =&gt; {
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  } else {
-    return response.blob();
-  }
-})
-.then(myBlob =&gt; {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<p>By now, you should have a reasonable understanding of promises and how they work, but let's convert this to use async/await to see how much simpler it makes things:</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  } else {
-    let myBlob = await response.blob();
-
-    let objectURL = URL.createObjectURL(myBlob);
-    let image = document.createElement('img');
-    image.src = objectURL;
-    document.body.appendChild(image);
-  }
-}
-
-myFetch()
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<p>It makes code much simpler and easier to understand — no more <code>.then()</code> blocks everywhere!</p>
-
-<p>Since an <code>async</code> keyword turns a function into a promise, you could refactor your code to use a hybrid approach of promises and await, bringing the second half of the function out into a new block to make it more flexible:</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  } else {
-    return await response.blob();
-  }
-}
-
-myFetch().then((blob) =&gt; {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}).catch(e =&gt; console.log(e));</pre>
-
-<p>You can try typing in the example yourself, or running our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">live example</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">source code</a>).</p>
-
-<h3 id="But_how_does_it_work">But how does it work?</h3>
-
-<p>You'll note that we've wrapped the code inside a function, and we've included the <code>async</code> keyword before the <code>function</code> keyword. This is necessary — you have to create an async function to define a block of code in which you'll run your async code; as we said earlier, <code>await</code> only works inside of async functions.</p>
-
-<p>Inside the <code>myFetch()</code> function definition you can see that the code closely resembles the previous promise version, but there are some differences. Instead of needing to chain a <code>.then()</code> block on to the end of each promise-based method, you just need to add an <code>await</code> keyword before the method call, and then assign the result to a variable. The <code>await</code> keyword causes the JavaScript runtime to pause your code on this line, allowing other code to execute in the meantime, until the async function call has returned its result. Once that's complete, your code continues to execute starting on the next line. For example:</p>
-
-<pre class="brush: js notranslate">let response = await fetch('coffee.jpg');</pre>
-
-<p>The response returned by the fulfilled <code>fetch()</code> promise is assigned to the <code>response</code> variable when that response becomes available, and the parser pauses on this line until that occurs. Once the response is available, the parser moves to the next line, which creates a <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> out of it. This line also invokes an async promise-based method, so we use <code>await</code> here as well. When the result of operation returns, we return it out of the <code>myFetch()</code> function.</p>
-
-<p>This means that when we call the <code>myFetch()</code> function, it returns a promise, so we can chain a <code>.then()</code> onto the end of it inside which we handle displaying the blob onscreen.</p>
-
-<p>You are probably already thinking "this is really cool!", and you are right — fewer <code>.then()</code> blocks to wrap around code, and it mostly just looks like synchronous code, so it is really intuitive.</p>
-
-<h3 id="Adding_error_handling">Adding error handling</h3>
-
-<p>And if you want to add error handling, you've got a couple of options.</p>
-
-<p>You can use a synchronous <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> structure with <code>async</code>/<code>await</code>. This example expands on the first version of the code we showed above:</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  try {
-    let response = await fetch('coffee.jpg');
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    } else {
-      let myBlob = await response.blob();
-      let objectURL = URL.createObjectURL(myBlob);
-      let image = document.createElement('img');
-      image.src = objectURL;
-      document.body.appendChild(image);
-    }
-  } catch(e) {
-    console.log(e);
-  }
-}
-
-myFetch();</pre>
-
-<p>The <code>catch() {}</code> block is passed an error object, which we've called <code>e</code>; we can now log that to the console, and it will give us a detailed error message showing where in the code the error was thrown.</p>
-
-<p>If you wanted to use the second (refactored) version of the code that we showed above, you would be better off just continuing the hybrid approach and chaining a <code>.catch()</code> block onto the end of the <code>.then()</code> call, like this:</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  } else {
-    return await response.blob();
-  }
-}
-
-myFetch().then((blob) =&gt; {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch((e) =&gt;
-  console.log(e)
-);</pre>
-
-<p>This is because the <code>.catch()</code> block will catch errors occurring in both the async function call and the promise chain. If you used the <code>try</code>/<code>catch</code> block here, you might still get unhandled errors in the <code>myFetch()</code> function when it's called.</p>
-
-<p>You can find both of these examples on GitHub:</p>
-
-<ul>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">source code</a>)</li>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">source code</a>)</li>
-</ul>
-
-<h2 id="Awaiting_a_Promise.all">Awaiting a Promise.all()</h2>
-
-<p>async/await is built on top of <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, so it's compatible with all the features offered by promises. This includes <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> — you can quite happily await a <code>Promise.all()</code> call to get all the results returned into a variable in a way that looks like simple synchronous code. Again, let's return to <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">an example we saw in our previous article</a>. Keep it open in a separate tab so you can compare and contrast with the new version shown below.</p>
-
-<p>Converting this to async/await (see <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">live demo</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">source code</a>), this now looks like so:</p>
-
-<pre class="brush: js notranslate">async function fetchAndDecode(url, type) {
-  let response = await fetch(url);
-
-  let content;
-
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  } else {
-    if(type === 'blob') {
-      content = await response.blob();
-    } else if(type === 'text') {
-      content = await response.text();
-    }
-
-    return content;
-  }
-
-}
-
-async function displayContent() {
-  let coffee = fetchAndDecode('coffee.jpg', 'blob');
-  let tea = fetchAndDecode('tea.jpg', 'blob');
-  let description = fetchAndDecode('description.txt', 'text');
-
-  let values = await Promise.all([coffee, tea, description]);
-
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-}
-
-displayContent()
-.catch((e) =&gt;
-  console.log(e)
-);</pre>
-
-<p>You'll see that the <code>fetchAndDecode()</code> function has been converted easily into an async function with just a few changes. See the <code>Promise.all()</code> line:</p>
-
-<pre class="brush: js notranslate">let values = await Promise.all([coffee, tea, description]);</pre>
-
-<p>By using <code>await</code> here we are able to get all the results of the three promises returned into the <code>values</code> array, when they are all available, in a way that looks very much like sync code. We've had to wrap all the code in a new async function, <code>displayContent()</code>, and we've not reduced the code by a lot of lines, but being able to move the bulk of the code out of the <code>.then()</code> block provides a nice, useful simplification, leaving us with a much more readable program.</p>
-
-<p>For error handling, we've included a <code>.catch()</code> block on our <code>displayContent()</code> call; this will handle errors ocurring in both functions.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: It is also possible to use a sync <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_finally_clause">finally</a></code> block within an async function, in place of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> async block, to show a final report on how the operation went — you can see this in action in our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">live example</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">source code</a>).</p>
-</div>
-
-<h2 id="The_downsides_of_asyncawait">The downsides of async/await</h2>
-
-<p>Async/await is really useful to know about, but there are a couple of downsides to consider.</p>
-
-<p>Async/await makes your code look synchronous, and in a way it makes it behave more synchronously. The <code>await</code> keyword blocks execution of all the code that follows until the promise fulfills, exactly as it would with a synchronous operation. It does allow other tasks to continue to run in the meantime, but your own code is blocked.</p>
-
-<p>This means that your code could be slowed down by a significant number of awaited promises happening straight after one another. Each <code>await</code> will wait for the previous one to finish, whereas actually what you want is for the promises to begin processing simultaneously, like they would do if we weren't using async/await.</p>
-
-<p>There is a pattern that can mitigate this problem — setting off all the promise processes by storing the <code>Promise</code> objects in variables, and then awaiting them all afterwards. Let's have a look at some examples that prove the concept.</p>
-
-<p>We've got two examples available — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>) and <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>). Both of them start off with a custom promise function that fakes an async process with a <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> call:</p>
-
-<pre class="brush: js notranslate">function timeoutPromise(interval) {
-  return new Promise((resolve, reject) =&gt; {
-    setTimeout(function(){
-      resolve("done");
-    }, interval);
-  });
-};</pre>
-
-<p>Then each one includes a <code>timeTest()</code> async function that awaits three <code>timeoutPromise()</code> calls:</p>
-
-<pre class="brush: js notranslate">async function timeTest() {
-  ...
-}</pre>
-
-<p>Each one ends by recording a start time, seeing how long the <code>timeTest()</code> promise takes to fulfill, then recording an end time and reporting how long the operation took in total:</p>
-
-<pre class="brush: js notranslate">let startTime = Date.now();
-timeTest().then(() =&gt; {
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  alert("Time taken in milliseconds: " + timeTaken);
-})</pre>
-
-<p>It is the <code>timeTest()</code> function that differs in each case.</p>
-
-<p>In the <code>slow-async-await.html</code> example, <code>timeTest()</code> looks like this:</p>
-
-<pre class="brush: js notranslate">async function timeTest() {
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-}</pre>
-
-<p>Here we simply await all three <code>timeoutPromise()</code> calls directly, making each one alert for 3 seconds. Each subsequent one is forced to wait until the last one finished — if you run the first example, you'll see the alert box reporting a total run time of around 9 seconds.</p>
-
-<p>In the <code>fast-async-await.html</code> example, <code>timeTest()</code> looks like this:</p>
-
-<pre class="brush: js notranslate">async function timeTest() {
-  const timeoutPromise1 = timeoutPromise(3000);
-  const timeoutPromise2 = timeoutPromise(3000);
-  const timeoutPromise3 = timeoutPromise(3000);
-
-  await timeoutPromise1;
-  await timeoutPromise2;
-  await timeoutPromise3;
-}</pre>
-
-<p>Here we store the three <code>Promise</code> objects in variables, which has the effect of setting off their associated processes all running simultaneously.</p>
-
-<p>Next, we await their results — because the promises all started processing at essentially the same time, the promises will all fulfill at the same time; when you run the second example, you'll see the alert box reporting a total run time of just over 3 seconds!</p>
-
-<p>You'll have to test your code carefully, and bear this in mind if performance starts to suffer.</p>
-
-<p>Another minor inconvenience is that you have to wrap your awaited promises inside an async function.</p>
-
-<h2 id="Asyncawait_class_methods">Async/await class methods</h2>
-
-<p>As a final note before we move on, you can even add <code>async</code> in front of class/object methods to make them return promises, and <code>await</code> promises inside them. Take a look at the <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code we saw in our object-oriented JavaScript article</a>, and then look at our modified version with an <code>async</code> method:</p>
-
-<pre class="brush: js notranslate">class Person {
-  constructor(first, last, age, gender, interests) {
-    this.name = {
-      first,
-      last
-    };
-    this.age = age;
-    this.gender = gender;
-    this.interests = interests;
-  }
-
-  async greeting() {
-    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
-  };
-
-  farewell() {
-    console.log(`${this.name.first} has left the building. Bye for now!`);
-  };
-}
-
-let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
-
-<p>The first class method could now be used something like this:</p>
-
-<pre class="brush: js notranslate">han.greeting().then(console.log);</pre>
-
-<h2 id="Browser_support">Browser support</h2>
-
-<p>One consideration when deciding whether to use async/await is support for older browsers. They are available in modern versions of most browsers, the same as promises; the main support problems come with Internet Explorer and Opera Mini.</p>
-
-<p>If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers. On encountering a browser that does not support async/await, Babel's polyfill can automatically provide fallbacks that work in older browsers.</p>
-
-<h2 id="Conclusion">Conclusion</h2>
-
-<p>And there you have it — async/await provide a nice, simplified way to write async code that is simpler to read and maintain. Even with browser support being more limited than other async code mechanisms at the time of writing, it is well worth learning and considering for use, both for now and in the future.</p>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
diff --git a/files/es/learn/javascript/building_blocks/events/index.html b/files/es/learn/javascript/building_blocks/events/index.html
deleted file mode 100644
index 5fc7ee8df5..0000000000
--- a/files/es/learn/javascript/building_blocks/events/index.html
+++ /dev/null
@@ -1,579 +0,0 @@
----
-title: Introducción a eventos
-slug: Learn/JavaScript/Building_blocks/Events
-translation_of: Learn/JavaScript/Building_blocks/Events
-original_slug: Learn/JavaScript/Building_blocks/Eventos
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div>
-
-<p class="summary">Los eventos son acciones u ocurrencias que suceden en el sistema que está programando y que el sistema le informa para que pueda responder de alguna manera si lo desea. Por ejemplo, si el usuario hace clic en un botón en una página web, es posible que desee responder a esa acción mostrando un cuadro de información. En este artículo, discutiremos algunos conceptos importantes que rodean los eventos y veremos cómo funcionan en los navegadores. Este no será un estudio exhaustivo; solo lo que necesitas saber en esta etapa.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerrequisitos:</th>
-   <td>Conocimientos básicos de informática, entendimiento básico de HTML y CSS, <a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps">Primeros pasos con JavaScript</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Comprender la teoría fundamental de los eventos, cómo funcionan en los navegadores y cómo los eventos pueden diferir en distintos entornos de programación.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Una_serie_de_eventos_afortunados">Una serie de eventos afortunados</h2>
-
-<p>Como se mencionó anteriormente, los <strong>eventos</strong> son acciones u ocurrencias que suceden en el sistema que está programando — el sistema disparará una señal de algún tipo cuando un evento ocurra y también proporcionará un mecanismo por el cual se puede tomar algún tipo de acción automáticamente (p.e., ejecutando algún código) cuando se produce el evento. Por ejemplo, en un aeropuerto cuando la pista está despejada para que despegue un avión, se comunica una señal al piloto y, como resultado, comienzan a pilotar el avión.</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/14077/MDN-mozilla-events-runway.png" style="display: block; margin: 0px auto;"></p>
-
-<p>En el caso de la Web, los eventos se desencadenan dentro de la ventana del navegador y tienden a estar unidos a un elemento específico que reside en ella — podría ser un solo elemento, un conjunto de elementos, el documento HTML cargado en la pestaña actual o toda la ventana del navegador. Hay muchos tipos diferentes de eventos que pueden ocurrir, por ejemplo:</p>
-
-<ul>
- <li>El usuario hace clic con el mouse sobre un elemento determinado o coloca el cursor sobre un elemento determinado.</li>
- <li>El usuario presiona una tecla en el teclado.</li>
- <li>El usuario cambia el tamaño o cierra la ventana del navegador.</li>
- <li>Una página web termina de cargar.</li>
- <li>Un formulario se envía</li>
- <li>Un video se reproduce, pausa o finaliza la reproducción.</li>
- <li>Un error ocurre.</li>
-</ul>
-
-<p>Se deducirá de esto (y echar un vistazo a MDN <a href="https://developer.mozilla.org/es/docs/Web/Events">Referencia de eventos</a>) que hay <strong>muchos</strong> eventos a los que se puede responder.</p>
-
-<p>Cada evento disponible tiene un <strong>controlador de eventos</strong>, que es un bloque de código (generalmente una función JavaScript definida por el usuario) que se ejecutará cuando se active el evento. Cuando dicho bloque de código se define para ejecutarse en respuesta a un disparo de evento, decimos que estamos <strong>registrando un controlador de eventos</strong>. Tenga en cuenta que los controladores de eventos a veces se llaman <strong>oyentes de eventos</strong> — son bastante intercambiables para nuestros propósitos, aunque estrictamente hablando, trabajan juntos. El oyente escucha si ocurre el evento y el controlador es el código que se ejecuta en respuesta a que ocurra.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Es útil tener en cuenta que los eventos web no son parte del lenguaje central de JavaScript: se definen como parte de las API integradas en el navegador.</p>
-</div>
-
-<h3 id="Un_ejemplo_simple">Un ejemplo simple</h3>
-
-<p>Veamos un ejemplo simple para explicar lo que queremos decir aquí. Ya has visto eventos y controladores de eventos en muchos de los ejemplos de este curso, pero vamos a recapitular solo para consolidar nuestro conocimiento. En el siguiente ejemplo, tenemos un solo {{htmlelement ("button")}}, que cuando se presiona, hará que el fondo cambie a un color aleatorio:</p>
-
-<pre class="brush: html notranslate">&lt;button&gt;Cambiar color&lt;/button&gt;</pre>
-
-<div class="hidden">
-<pre class="brush: css notranslate">button { margin: 10px };</pre>
-</div>
-
-<p>El JavaScript se ve así:</p>
-
-<pre class="brush: js notranslate">const btn = document.querySelector('button');
-
-function random(number) {
-  return Math.floor(Math.random() * (number+1));
-}
-
-btn.onclick = function() {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}</pre>
-
-<p>En este código, almacenamos una referencia al botón dentro de una variable llamada <code>btn</code>, usando la función {{domxref ("Document.querySelector ()")}}. También definimos una función que devuelve un número aleatorio. La tercera parte del código es el controlador de eventos. La variable <code>btn</code> apunta a un elemento <code>&lt;button&gt;</code>, y este tipo de objeto tiene una serie de eventos que pueden activarse y, por lo tanto, los controladores de eventos están disponibles. Estamos escuchando el disparo del evento "click", estableciendo la propiedad del controlador de eventos <code>onclick</code> para que sea igual a una función anónima que contiene código que generó un color RGB aleatorio y establece el <code>&lt;body&gt;</code> color de fondo igual a este.</p>
-
-<p>Este código ahora se ejecutará cada vez que se active el evento "click" en el elemento <code>&lt;button&gt;</code>, es decir, cada vez que un usuario haga clic en él.</p>
-
-<p>El resultado de ejemplo es el siguiente:</p>
-
-<p>{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h3 id="No_son_solo_páginas_web">No son solo páginas web</h3>
-
-<p>Otra cosa que vale la pena mencionar en este punto es que los eventos no son particulares de JavaScript — la mayoría de los lenguajes de programación tienen algún tipo de modelo de eventos, y la forma en que funciona a menudo diferirá de la forma en que funciona en JavaScript. De hecho, el modelo de eventos en JavaScript para páginas web difiere del modelo de eventos para JavaScript, ya que se utiliza en otros entornos.</p>
-
-<p>Por ejemplo, <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Node.js</a> es un entorno en tiempo de ejecución de JavaScript muy popular que permite a los desarrolladores usar JavaScript para crear aplicaciones de red y del lado del servidor. El <a href="https://nodejs.org/docs/latest-v5.x/api/events.html">modelo de eventos de Node.js</a> se basa en que los oyentes (<em>listeners</em>) escuchen eventos y los emisores (<em>emitters</em>) emitan eventos periódicamente — no suena tan diferentes, pero el código es bastante diferente, haciendo uso de funciones como <code>on()</code> para registrar un oyente de eventos, y <code>once()</code> para registrar un oyente de eventos que anula el registro después de que se haya ejecutado una vez. The <a href="https://nodejs.org/docs/latest-v8.x/api/http.html#http_event_connect">documentos de eventos de conexión HTTP</a> proporcionan un buen ejemplo de uso.</p>
-
-<p>Como otro ejemplo, ahora también puede usar JavaScript para crear complementos de navegadores — mejoras de funcionalidad del navegador — utilizando una tecnología llamada <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>. El modelo de eventos es similar al modelo de eventos web, pero un poco diferente — las propiedades de los oyentes de eventos se escriben en <em>camel-case</em> (ej. <code>onMessage</code> en lugar de <code>onmessage</code>), y deben combinarse con la función <code>addListener</code>. Consulte la página <a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage#Examples">runtime.onMessage </a>para ver un ejemplo.</p>
-
-<p>No necesita comprender nada sobre otros entornos en esta etapa de su aprendizaje; solo queríamos dejar en claro que los eventos pueden diferir en diferentes entornos de programación.</p>
-
-<h2 id="Diferentes_formas_de_uso_de_eventos">Diferentes formas de uso de eventos</h2>
-
-<p>Hay muchas maneras distintas en las que puedes agregar event listeners a los sitios web, que se ejecutara cuando el evento asociado se dispare. En esta sección, revisaremos los diferentes mecanismos y discutiremos cuales deberias usar..</p>
-
-<h3 id="Propiedades_de_manejadores_de_eventos">Propiedades de manejadores de eventos</h3>
-
-<p>Estas son las propiedades que existen, que contienen codigo de manejadores de eventos(Event Handler)  que vemos frecuentemente durante el curso.. Volviendo al ejemplo de arriba:</p>
-
-<pre class="brush: js notranslate">var btn = document.querySelector('button');
-
-btn.onclick = function() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}</pre>
-
-<p>La propiedad <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> es la propiedad del manejador de eventos que está siendo usada en esta situación. Es escencialmente una propiedad como cualquier otra disponible en el botón (por ejemplo: <code><a href="/en-US/docs/Web/API/Node/textContent">btn.textContent</a></code>, or <code><a href="/en-US/docs/Web/API/HTMLElement/style">btn.style</a></code>), pero es de un tipo especial — cuando lo configura para ser igual a algún código, ese código se ejecutará cuando el evento se dispare en el botón.</p>
-
-<p>You could also set the handler property to be equal to a named function name (like we saw in <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a>). The following would work just the same:</p>
-
-<pre class="brush: js notranslate">var btn = document.querySelector('button');
-
-function bgChange() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
-
-btn.onclick = bgChange;</pre>
-
-<p>There are many different event handler properties available. Let's do an experiment.</p>
-
-<p>First of all, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a>, and open it in your browser. It's just a copy of the simple random color example we've been playing with already in this article. Now try changing <code>btn.onclick</code> to the following different values in turn, and observing the results in the example:</p>
-
-<ul>
- <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> and <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — The color will change when the button is focused and unfocused (try pressing tab to tab on to the button and off again). These are often used to display information about how to fill in form fields when they are focused, or display an error message if a form field has just been filled in with an incorrect value.</li>
- <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — The color will change only when it is double-clicked.</li>
- <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeypress">window.onkeypress</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — The color will change when a key is pressed on the keyboard. <code>keypress</code> refers to a general press (button down and then up), while <code>keydown</code> and <code>keyup</code> refer to just the key down and key up parts of the keystroke, respectively. Note that it doesn't work if you try to register this event handler on the button itself — we've had to register it on the <a href="/en-US/docs/Web/API/Window">window</a> object, which represents the entire browser window.</li>
- <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> and <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — The color will change when the mouse pointer is moved so it begins hovering over the button, or when it stops hovering over the button and moves off of it, respectively.</li>
-</ul>
-
-<p>Some events are very general and available nearly anywhere (for example an <code>onclick</code> handler can be registered on nearly any element), whereas some are more specific and only useful in certain situations (for example it makes sense to use <a href="/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay</a> only on specific elements, such as {{htmlelement("video")}}).</p>
-
-<h3 id="Inline_event_handlers_—_dont_use_these">Inline event handlers — don't use these</h3>
-
-<p>You might also see a pattern like this in your code:</p>
-
-<pre class="brush: html notranslate">&lt;button onclick="bgChange()"&gt;Press me&lt;/button&gt;
-</pre>
-
-<pre class="brush: js notranslate">function bgChange() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}</pre>
-
-<div class="note">
-<p><strong>Note</strong>: You can find the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">full source code</a> for this example on GitHub (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">see it running live</a>).</p>
-</div>
-
-<p>The earliest method of registering event handlers found on the Web involved <strong>event handler HTML attributes</strong> (aka <strong>inline event handlers</strong>) like the one shown above — the attribute value is literally the JavaScript code you want to run when the event occurs. The above example invokes a function defined inside a {{htmlelement("script")}} element on the same page, but you could also insert JavaScript directly inside the attribute, for example:</p>
-
-<pre class="brush: html notranslate">&lt;button onclick="alert('Hello, this is my old-fashioned event handler!');"&gt;Press me&lt;/button&gt;</pre>
-
-<p>You'll find HTML attribute equivalents for many of the event handler properties; however, you shouldn't use these — they are considered bad practice. It might seem easy to use an event handler attribute if you are just doing something really quick, but they very quickly become unmanageable and inefficient.</p>
-
-<p>For a start, it is not a good idea to mix up your HTML and your JavaScript, as it becomes hard to parse — keeping your JavaScript all in one place is better; if it is in a separate file you can apply it to multiple HTML documents.</p>
-
-<p>Even in a single file, inline event handlers are not a good idea. One button is OK, but what if you had 100 buttons? You'd have to add 100 attributes to the file; it would very quickly turn into a maintenance nightmare. With JavaScript, you could easily add an event handler function to all the buttons on the page no matter how many there were, using something like this:</p>
-
-<pre class="brush: js notranslate">var buttons = document.querySelectorAll('button');
-
-for (var i = 0; i &lt; buttons.length; i++) {
-  buttons[i].onclick = bgChange;
-}</pre>
-
-<p class="brush: js">Note that another option here would be to use the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a></code> built-in method available on all Array objects:</p>
-
-<pre class="brush: js notranslate">buttons.forEach(function(button) {
-  button.onclick = bgChange;
-});</pre>
-
-<div class="note">
-<p><strong>Note</strong>: Separating your programming logic from your content also makes your site more friendly to search engines.</p>
-</div>
-
-<h3 id="addEventListener_and_removeEventListener">addEventListener() and removeEventListener()</h3>
-
-<p>The newest type of event mechanism is defined in the <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a> Specification, which provides browsers with a new function — <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>. This functions in a similar way to the event handler properties, but the syntax is obviously different. We could rewrite our random color example to look like this:</p>
-
-<pre class="brush: js notranslate">var btn = document.querySelector('button');
-
-function bgChange() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
-
-btn.addEventListener('click', bgChange);</pre>
-
-<div class="note">
-<p><strong>Note</strong>: You can find the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">full source code</a> for this example on GitHub (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">see it running live</a>).</p>
-</div>
-
-<p>Inside the <code>addEventListener()</code> function, we specify two parameters — the name of the event we want to register this handler for, and the code that comprises the handler function we want to run in response to it. Note that it is perfectly appropriate to put all the code inside the <code>addEventListener()</code> function, in an anonymous function, like this:</p>
-
-<pre class="brush: js notranslate">btn.addEventListener('click', function() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-});</pre>
-
-<p>This mechanism has some advantages over the older mechanisms discussed earlier. For a start, there is a counterpart function, <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>, which removes a previously added listener. For example, this would remove the listener set in the first code block in this section:</p>
-
-<pre class="brush: js notranslate">btn.removeEventListener('click', bgChange);</pre>
-
-<p>This isn't significant for simple, small programs, but for larger, more complex programs it can improve efficiency to clean up old unused event handlers. Plus, for example, this allows you to have the same button performing different actions in different circumstances — all you've got to do is add/remove event handlers as appropriate.</p>
-
-<p>Second, you can also register multiple handlers for the same listener. The following two handlers would not be applied:</p>
-
-<pre class="brush: js notranslate">myElement.onclick = functionA;
-myElement.onclick = functionB;</pre>
-
-<p>As the second line would overwrite the value of <code>onclick</code> set by the first. This would work, however:</p>
-
-<pre class="brush: js notranslate">myElement.addEventListener('click', functionA);
-myElement.addEventListener('click', functionB);</pre>
-
-<p>Both functions would now run when the element is clicked.</p>
-
-<p>In addition, there are a number of other powerful features and options available with this event mechanism. These are a little out of scope for this article, but if you want to read up on them, have a look at the <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> and <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code> reference pages.</p>
-
-<h3 id="What_mechanism_should_I_use">What mechanism should I use?</h3>
-
-<p>Of the three mechanisms, you definitely shouldn't use the HTML event handler attributes — these are outdated, and bad practice, as mentioned above.</p>
-
-<p>The other two are relatively interchangeable, at least for simple uses:</p>
-
-<ul>
- <li>Event handler properties have less power and options, but better cross-browser compatibility (being supported as far back as Internet Explorer 8). You should probably start with these as you are learning.</li>
- <li>DOM Level 2 Events (<code>addEventListener()</code>, etc.) are more powerful, but can also become more complex and are less well supported (supported as far back as Internet Explorer 9). You should also experiment with these, and aim to use them where possible.</li>
-</ul>
-
-<p>The main advantages of the third mechanism are that you can remove event handler code if needed, using <code>removeEventListener()</code>, and you can add multiple listeners of the same type to elements if required. For example, you can call <code>addEventListener('click', function() { ... })</code> on an element multiple times, with different functions specified in the second argument. This is impossible with event handler properties because any subsequent attempts to set a property will overwrite earlier ones, e.g.:</p>
-
-<pre class="brush: js notranslate">element.onclick = function1;
-element.onclick = function2;
-etc.</pre>
-
-<div class="note">
-<p><strong>Note</strong>: If you are called upon to support browsers older than Internet Explorer 8 in your work, you may run into difficulties, as such ancient browsers use different event models from newer browsers. But never fear, most JavaScript libraries (for example <code>jQuery</code>) have built-in functions that abstract away cross-browser differences. Don't worry about this too much at this stage in your learning journey.</p>
-</div>
-
-<h2 id="Other_event_concepts">Other event concepts</h2>
-
-<p>In this section, we will briefly cover some advanced concepts that are relevant to events. It is not important to understand these fully at this point, but it might serve to explain some code patterns you'll likely come across from time to time.</p>
-
-<h3 id="Event_objects">Event objects</h3>
-
-<p>Sometimes inside an event handler function, you might see a parameter specified with a name such as <code>event</code>, <code>evt</code>, or simply <code>e</code>. This is called the <strong>event object</strong>, and it is automatically passed to event handlers to provide extra features and information. For example, let's rewrite our random color example again slightly:</p>
-
-<pre class="brush: js notranslate">function bgChange(e) {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  e.target.style.backgroundColor = rndCol;
-  console.log(e);
-}
-
-btn.addEventListener('click', bgChange);</pre>
-
-<div class="note">
-<p><strong>Note</strong>: You can find the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">full source code</a> for this example on GitHub (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">see it running live</a>).</p>
-</div>
-
-<p>Here you can see that we are including an event object, <strong>e</strong>, in the function, and in the function setting a background color style on <code>e.target</code> — which is the button itself. The <code>target</code> property of the event object is always a reference to the element that the event has just occurred upon. So in this example, we are setting a random background color on the button, not the page.</p>
-
-<div class="note">
-<p><strong>Note</strong>: You can use any name you like for the event object — you just need to choose a name that you can then use to reference it inside the event handler function. <code>e</code>/<code>evt</code>/<code>event</code> are most commonly used by developers because they are short and easy to remember. It's always good to stick to a standard.</p>
-</div>
-
-<p><code>e.target</code> is incredibly useful when you want to set the same event handler on multiple elements and do something to all of them when an event occurs on them. You might, for example, have a set of 16 tiles that disappear when they are clicked on. It is useful to always be able to just set the thing to disappear as <code>e.target</code>, rather than having to select it in some more difficult way. In the following example (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a> for the full source code; also see it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">running live</a> here), we create 16 {{htmlelement("div")}} elements using JavaScript. We then select all of them using {{domxref("document.querySelectorAll()")}}, then loop through each one, adding an <code>onclick</code> handler to each that makes it so that a random color is applied to each one when clicked:</p>
-
-<pre class="brush: js notranslate">var divs = document.querySelectorAll('div');
-
-for (var i = 0; i &lt; divs.length; i++) {
-  divs[i].onclick = function(e) {
-    e.target.style.backgroundColor = bgChange();
-  }
-}</pre>
-
-<p>The output is as follows (try clicking around on it — have fun):</p>
-
-<div class="hidden">
-<h6 id="Hidden_example">Hidden example</h6>
-
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Useful event target example&lt;/title&gt;
-    &lt;style&gt;
-      div {
-        height: 100px;
-        width: 25%;
-        float: left;
-      }
-    &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;script&gt;
-      for (var i = 1; i &lt;= 16; i++) {
-        var myDiv = document.createElement('div');
-        myDiv.style.backgroundColor = "red";
-        document.body.appendChild(myDiv);
-      }
-
-      function random(number) {
-        return Math.floor(Math.random()*number);
-      }
-
-      function bgChange() {
-        var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-        return rndCol;
-      }
-
-      var divs = document.querySelectorAll('div');
-
-      for (var i = 0; i &lt; divs.length; i++) {
-        divs[i].onclick = function(e) {
-          e.target.style.backgroundColor = bgChange();
-        }
-      }
-    &lt;/script&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<p>Most event handlers you'll encounter just have a standard set of properties and functions (methods) available on the event object (see the {{domxref("Event")}} object reference for a full list). Some more advanced handlers, however, add specialist properties containing extra data that they need to function. The <a href="/en-US/docs/Web/API/MediaRecorder_API">Media Recorder API</a>, for example, has a <code>dataavailable</code> event, which fires when some audio or video has been recorded and is available for doing something with (for example saving it, or playing it back). The corresponding <a href="/en-US/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a> handler's event object has a <code>data</code> property available containing the recorded audio or video data to allow you to access it and do something with it.</p>
-
-<h3 id="Preventing_default_behavior">Preventing default behavior</h3>
-
-<p>Sometimes, you'll come across a situation where you want to stop an event doing what it does by default. The most common example is that of a web form, for example, a custom registration form. When you fill in the details and press the submit button, the natural behaviour is for the data to be submitted to a specified page on the server for processing, and the browser to be redirected to a "success message" page of some kind (or the same page, if another is not specified.)</p>
-
-<p>The trouble comes when the user has not submitted the data correctly — as a developer, you'll want to stop the submission to the server and give them an error message telling them what's wrong and what needs to be done to put things right. Some browsers support automatic form data validation features, but since many don't, you are advised to not rely on those and implement your own validation checks. Let's look at a simple example.</p>
-
-<p>First, a simple HTML form that requires you to enter your first and last name:</p>
-
-<pre class="brush: html notranslate">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="fname"&gt;First name: &lt;/label&gt;
-    &lt;input id="fname" type="text"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;label for="lname"&gt;Last name: &lt;/label&gt;
-    &lt;input id="lname" type="text"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-     &lt;input id="submit" type="submit"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;
-&lt;p&gt;&lt;/p&gt;</pre>
-
-<div class="hidden">
-<pre class="brush: css notranslate">div {
-  margin-bottom: 10px;
-}
-</pre>
-</div>
-
-<p>Now some JavaScript — here we implement a very simple check inside an <a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> event handler (the submit event is fired on a form when it is submitted) that tests whether the text fields are empty. If they are, we call the <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> function on the event object — which stops the form submission — and then display an error message in the paragraph below our form to tell the user what's wrong:</p>
-
-<pre class="brush: js notranslate">var form = document.querySelector('form');
-var fname = document.getElementById('fname');
-var lname = document.getElementById('lname');
-var submit = document.getElementById('submit');
-var para = document.querySelector('p');
-
-form.onsubmit = function(e) {
-  if (fname.value === '' || lname.value === '') {
-    e.preventDefault();
-    para.textContent = 'You need to fill in both names!';
-  }
-}</pre>
-
-<p>Obviously, this is pretty weak form validation — it wouldn't stop the user validating the form with spaces or numbers entered into the fields, for example — but it is ok for example purposes. The output is as follows:</p>
-
-<p>{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<div class="note">
-<p><strong>Note</strong>: for the full source code, see <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a> (also see it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">running live</a> here.)</p>
-</div>
-
-<h3 id="Event_bubbling_and_capture">Event bubbling and capture</h3>
-
-<p>The final subject to cover here is something that you'll not come across often, but it can be a real pain if you don't understand it. Event bubbling and capture are two mechanisms that describe what happens when two handlers of the same event type are activated on one element. Let's look at an example to make this easier — open up the <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> example in a new tab (and the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">source code</a> in another tab.) It is also available live below:</p>
-
-<div class="hidden">
-<h6 id="Hidden_video_example">Hidden video example</h6>
-
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Show video box example&lt;/title&gt;
-    &lt;style&gt;
-      div {
-        position: absolute;
-        top: 50%;
-        transform: translate(-50%,-50%);
-        width: 480px;
-        height: 380px;
-        border-radius: 10px;
-        background-color: #eee;
-        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1));
-      }
-
-      .hidden {
-        left: -50%;
-      }
-
-      .showing {
-        left: 50%;
-      }
-
-      div video {
-        display: block;
-        width: 400px;
-        margin: 40px auto;
-      }
-
-    &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;button&gt;Display video&lt;/button&gt;
-
-    &lt;div class="hidden"&gt;
-      &lt;video&gt;
-        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"&gt;
-        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm"&gt;
-        &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
-      &lt;/video&gt;
-    &lt;/div&gt;
-
-    &lt;script&gt;
-
-      var btn = document.querySelector('button');
-      var videoBox = document.querySelector('div');
-      var video = document.querySelector('video');
-
-      btn.onclick = function() {
-        displayVideo();
-      }
-
-      function displayVideo() {
-        if(videoBox.getAttribute('class') === 'hidden') {
-          videoBox.setAttribute('class','showing');
-        }
-      }
-
-      videoBox.addEventListener('click',function() {
-        videoBox.setAttribute('class','hidden');
-      });
-
-      video.addEventListener('click',function() {
-        video.play();
-      });
-
-    &lt;/script&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<p>This is a pretty simple example that shows and hides a {{htmlelement("div")}} with a {{htmlelement("video")}} element inside it:</p>
-
-<pre class="brush: html notranslate">&lt;button&gt;Display video&lt;/button&gt;
-
-&lt;div class="hidden"&gt;
-  &lt;video&gt;
-    &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
-    &lt;source src="rabbit320.webm" type="video/webm"&gt;
-    &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
-  &lt;/video&gt;
-&lt;/div&gt;</pre>
-
-<p>When the {{htmlelement("button")}} is clicked, the video is displayed, by changing the class attribute on the <code>&lt;div&gt;</code> from <code>hidden</code> to <code>showing</code> (the example's CSS contains these two classes, which position the box off the screen and on the screen, respectively):</p>
-
-<pre class="brush: js notranslate">btn.onclick = function() {
-  videoBox.setAttribute('class', 'showing');
-}</pre>
-
-<p>We then add a couple more <code>onclick</code> event handlers — the first one to the <code>&lt;div&gt;</code> and the second one to the <code>&lt;video&gt;</code>. The idea is that when the area of the <code>&lt;div&gt;</code> outside the video is clicked, the box should be hidden again; when the video itself is clicked, the video should start to play.</p>
-
-<pre class="brush: js notranslate">videoBox.onclick = function() {
-  videoBox.setAttribute('class', 'hidden');
-};
-
-video.onclick = function() {
-  video.play();
-};</pre>
-
-<p>But there's a problem — currently, when you click the video it starts to play, but it causes the <code>&lt;div&gt;</code> to also be hidden at the same time. This is because the video is inside the <code>&lt;div&gt;</code> — it is part of it — so clicking on the video actually runs <em>both</em> the above event handlers.</p>
-
-<h4 id="Bubbling_and_capturing_explained">Bubbling and capturing explained</h4>
-
-<p>When an event is fired on an element that has parent elements (e.g. the {{htmlelement("video")}} in our case), modern browsers run two different phases — the <strong>capturing</strong> phase and the <strong>bubbling</strong> phase.</p>
-
-<p>In the <strong>capturing</strong> phase:</p>
-
-<ul>
- <li>The browser checks to see if the element's outer-most ancestor ({{htmlelement("html")}}) has an <code>onclick</code> event handler registered on it in the capturing phase, and runs it if so.</li>
- <li>Then it moves on to the next element inside <code>&lt;html&gt;</code> and does the same thing, then the next one, and so on until it reaches the element that was actually clicked on.</li>
-</ul>
-
-<p>In the <strong>bubbling</strong> phase, the exact opposite occurs:</p>
-
-<ul>
- <li>The browser checks to see if the element that was actually clicked on has an <code>onclick</code> event handler registered on it in the bubbling phase, and runs it if so.</li>
- <li>Then it moves on to the next immediate ancestor element and does the same thing, then the next one, and so on until it reaches the <code>&lt;html&gt;</code> element.</li>
-</ul>
-
-<p><a href="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png"><img alt="" src="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png" style="display: block; height: 452px; margin: 0px auto; width: 960px;"></a></p>
-
-<p>(Click on image for bigger diagram)</p>
-
-<p>In modern browsers, by default, all event handlers are registered in the bubbling phase. So in our current example, when you click the video, the click event bubbles from the <code>&lt;video&gt;</code> element outwards to the <code>&lt;html&gt;</code> element. Along the way:</p>
-
-<ul>
- <li>It finds the <code>video.onclick...</code> handler and runs it, so the video first starts playing.</li>
- <li>It then finds the <code>videoBox.onclick...</code> handler and runs it, so the video is hidden as well.</li>
-</ul>
-
-<h4 id="Fixing_the_problem_with_stopPropagation">Fixing the problem with stopPropagation()</h4>
-
-<p>This is annoying behavior, but there is a way to fix it! The standard event object has a function available on it called <code><a href="/en-US/docs/Web/API/Event/stopPropagation">stopPropagation()</a></code>, which when invoked on a handler's event object makes it so that handler is run, but the event doesn't bubble any further up the chain, so no more handlers will be run.</p>
-
-<p>We can, therefore, fix our current problem by changing the second handler function in the previous code block to this:</p>
-
-<pre class="brush: js notranslate">video.onclick = function(e) {
-  e.stopPropagation();
-  video.play();
-};</pre>
-
-<p>You can try making a local copy of the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">show-video-box.html source code</a> and having a go at fixing it yourself, or looking at the fixed result in <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">show-video-box-fixed.html</a> (also see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">source code</a> here).</p>
-
-<div class="note">
-<p><strong>Note</strong>: Why bother with both capturing and bubbling? Well, in the bad old days when browsers were much less cross-compatible than they are now, Netscape only used event capturing, and Internet Explorer used only event bubbling. When the W3C decided to try to standardize the behavior and reach a consensus, they ended up with this system that included both, which is the one modern browsers implemented.</p>
-</div>
-
-<div class="note">
-<p><strong>Note</strong>: As mentioned above, by default all event handlers are registered in the bubbling phase, and this makes more sense most of the time. If you really want to register an event in the capturing phase instead, you can do so by registering your handler using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>, and setting the optional third property to <code>true</code>.</p>
-</div>
-
-<h4 id="Event_delegation">Event delegation</h4>
-
-<p>Bubbling also allows us to take advantage of <strong>event delegation</strong> — this concept relies on the fact that if you want some code to run when you click on any one of a large number of child elements, you can set the event listener on their parent and have events that happen on them bubble up to their parent rather than having to set the event listener on every child individually. Remember earlier that we said bubbling involves checking the element the event is fired on for an event handler first, then moving up to the element's parent, etc.?</p>
-
-<p>A good example is a series of list items — if you want each one of them to pop up a message when clicked, you can set the <code>click</code> event listener on the parent <code>&lt;ul&gt;</code>, and events will bubble from the list items to the <code>&lt;ul&gt;</code>.</p>
-
-<p>This concept is explained further on David Walsh's blog, with multiple examples — see <a href="https://davidwalsh.name/event-delegate">How JavaScript Event Delegation Works</a>.</p>
-
-<h2 id="Conclusion">Conclusion</h2>
-
-<p>You should now know all you need to know about web events at this early stage. As mentioned above, events are not really part of the core JavaScript — they are defined in browser Web APIs.</p>
-
-<p>Also, it is important to understand that the different contexts in which JavaScript is used tend to have different event models — from Web APIs to other areas such as browser WebExtensions and Node.js (server-side JavaScript). We are not expecting you to understand all these areas now, but it certainly helps to understand the basics of events as you forge ahead with learning web development.</p>
-
-<p>If there is anything you didn't understand, feel free to read through the article again, or <a href="/en-US/Learn#Contact_us">contact us</a> to ask for help.</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="http://www.quirksmode.org/js/events_order.html">Event order</a> (discussion of capturing and bubbling) — an excellently detailed piece by Peter-Paul Koch.</li>
- <li><a href="http://www.quirksmode.org/js/events_access.html">Event accessing</a> (discussion of the event object) — another excellently detailed piece by Peter-Paul Koch.</li>
- <li><a href="/en-US/docs/Web/Events">Event reference</a></li>
-</ul>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
-</ul>
diff --git a/files/es/learn/javascript/building_blocks/functions/index.html b/files/es/learn/javascript/building_blocks/functions/index.html
deleted file mode 100644
index d05ae34969..0000000000
--- a/files/es/learn/javascript/building_blocks/functions/index.html
+++ /dev/null
@@ -1,400 +0,0 @@
----
-title: Funciones — bloques de código reutilizables
-slug: Learn/JavaScript/Building_blocks/Functions
-tags:
-  - API
-  - Funciones
-  - JavaScript
-  - Métodos
-  - Navegador
-translation_of: Learn/JavaScript/Building_blocks/Functions
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div>
-
-<p class="summary">Otro concepto esencial en la codificación son las <strong>funciones</strong>, que te permiten almacenar un fragmento de código que realiza una única tarea dentro de un bloque definido, y luego llamar a ese código siempre que lo necesites utilizando un único comando breve -- en lugar de tener que escribir el mismo codigo varias veces. En este artículo exploraremos conceptos fundamentales detrás de funciones tales como sintaxis básica, cómo invocarlas y definirlas, alcance(scope) y parámetros.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Conocimientos basicos de informatica, conocimiento basico de   HTML y CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>Entender los conceptos fundamentales detras de las funciones JavaScript.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="¿Dónde_encuentro_las_funciones">¿Dónde encuentro las funciones? </h2>
-
-<p>En JavaScript vas a encontrar funciones por todos lados. De hecho, nosotros hemos usados funciones todo el tiempo a lo largo del curso; solo que no hemos hablado mucho sobre ellas. Ahora es el momento, igual, para comenzar a hablar explicitamente sobre las funciones y explorar su sintaxis.</p>
-
-<p>Básicamente cada vez que haces uso de código JavaScript que contiene parentesis como () y no estás usando estructuras de lenguaje como for loop, while, do, do while, estás usando una función! </p>
-
-<p>Funciones incluídas en los navegadores</p>
-
-<p>A lo largo de este curso hemos usado muchas funciones incluídas del navegador. Por ejemplo, cuando manipulamos una cadena de texto o <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/String">string</a>:</p>
-
-<pre class="brush: js notranslate">let miTexto = 'Soy una cadena de texto!';
-let nuevaCadena = miTexto.replace('cadena', 'ensalada');
-console.log(nuevaCadena);
-// la función de cadena de texto <strong>replace()</strong> toma una cadena,
-// reemplaza una palabra por otra, y devuelve
-// una nueva cadena con el reemplazo hecho.</pre>
-
-<p>O cada vez que manipulamos un <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array">array</a>:</p>
-
-<pre class="brush: js notranslate">let miArray = ['Yo', 'amo', 'el', 'chocolate', 'y', 'las', 'ranas'];
-let armarCadena = miArray.join(' ');
-console.log(armarCadena);
-// La función join() toma un array,
-// une todos sus elementos en una cadena o string
-// y devuelve esta nueva cadena.</pre>
-
-<p>O cada vez que generamos un número al azar:</p>
-
-<pre class="brush: js notranslate">var miNumero = Math.random();
-console.log(miNumero);
-// La función <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/random">Math.random()</a> genera un número aleatorio
-// entre 0 and 1 y devuelve ese número.
-</pre>
-
-<p>...estamos usando una función!</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Sientase libre de ingresar esas líneas de código en la consola JavaScript de su navegador, para familiarizarse con sus funcionalidades. </p>
-</div>
-
-<p>El lenguaje JavaScript contiene muchas funciones integradas que te permiten realizar cosas muy utilies sin escribir el código tu mismo. De hecho, parte del código que llamas (una palabra elegante para decir correr o ejecutar) cuando invocas una función integrada puede no estar escrita en JavaScript —muchas de estas funciones están llamando partes del código del navegador de fondo, que está escrito principalmente en lenguajes de sistema de bajo nivel como C ++, no en lenguajes web como JavaScript.</p>
-
-<p>Bear in mind that some built-in browser functions are not part of the core JavaScript language — some are defined as part of browser APIs, which build on top of the default language to provide even more functionality (refer to <a href="/en-US/Learn/JavaScript/First_steps/What_is_JavaScript#So_what_can_it_really_do">this early section of our course</a> for more descriptions). We'll look at using browser APIs in more detail in a later module.</p>
-
-<h2 id="Functions_versus_methods">Functions versus methods</h2>
-
-<p>One thing we need to clear up before we move on — technically speaking, built in browser functions are not functions — they are <strong>methods</strong>. This sounds a bit scary and confusing, but don't worry — the words function and method are largely interchangeable, at least for our purposes, at this stage in your learning.</p>
-
-<p>The distinction is that methods are functions defined inside objects. Built-in browser functions (methods) and variables (which are called <strong>properties</strong>) are stored inside structured objects, to make the code more efficient and easier to handle.</p>
-
-<p>You don't need to learn about the inner workings of structured JavaScript objects yet — you can wait until our later module that will teach you all about the inner workings of objects, and how to create your own. For now, we just wanted to clear up any possible confusion of method versus function — you are likely to meet both terms as you look at the available related resources across the Web.</p>
-
-<h2 id="Custom_functions">Custom functions</h2>
-
-<p>You've also seen a lot of <strong>custom functions</strong> in the course so far — functions defined in your code, not inside the browser. Anytime you saw a custom name with parentheses straight after it, you were using a custom function. In our <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> example (see also the full <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">source code</a>) from our <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">loops article</a>, we included a custom <code>draw()</code> function that looked like this:</p>
-
-<pre class="brush: js notranslate">function draw() {
-  ctx.clearRect(0,0,WIDTH,HEIGHT);
-  for (var i = 0; i &lt; 100; i++) {
-    ctx.beginPath();
-    ctx.fillStyle = 'rgba(255,0,0,0.5)';
-    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
-    ctx.fill();
-  }
-}</pre>
-
-<p>This function draws 100 random circles inside an {{htmlelement("canvas")}} element. Every time we want to do that, we can just invoke the function with this</p>
-
-<pre class="brush: js notranslate">draw();</pre>
-
-<p>rather than having to write all that code out again every time we want to repeat it. And functions can contain whatever code you like — you can even call other functions from inside functions. The above function for example calls the <code>random()</code> function three times, which is defined by the following code:</p>
-
-<pre class="brush: js notranslate">function random(number) {
-  return Math.floor(Math.random()*number);
-}</pre>
-
-<p>We needed this function because the browser's built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> function only generates a random decimal number between 0 and 1. We wanted a random whole number between 0 and a specified number.</p>
-
-<h2 id="Invoking_functions">Invoking functions</h2>
-
-<p>You are probably clear on this by now, but just in case ... to actually use a function after it has been defined, you've got to run — or invoke — it. This is done by including the name of the function in the code somewhere, followed by parentheses.</p>
-
-<pre class="brush: js notranslate">function myFunction() {
-  alert('hello');
-}
-
-myFunction()
-// calls the function once</pre>
-
-<h2 id="Anonymous_functions">Anonymous functions</h2>
-
-<p>You may see functions defined and invoked in slightly different ways. So far we have just created a function like so:</p>
-
-<pre class="brush: js notranslate">function myFunction() {
-  alert('hello');
-}</pre>
-
-<p>But you can also create a function that doesn't have a name:</p>
-
-<pre class="brush: js notranslate">function() {
-  alert('hello');
-}</pre>
-
-<p>This is called an <strong>anonymous function</strong> — it has no name! It also won't do anything on its own. You generally use an anonymous function along with an event handler, for example the following would run the code inside the function whenever the associated button is clicked:</p>
-
-<pre class="brush: js notranslate">var myButton = document.querySelector('button');
-
-myButton.onclick = function() {
-  alert('hello');
-}</pre>
-
-<p>The above example would require there to be a {{htmlelement("button")}} element available on the page to select and click. You've already seen this structure a few times throughout the course, and you'll learn more about and see it in use in the next article.</p>
-
-<p>You can also assign an anonymous function to be the value of a variable, for example:</p>
-
-<pre class="brush: js notranslate">var myGreeting = function() {
-  alert('hello');
-}</pre>
-
-<p>This function could now be invoked using:</p>
-
-<pre class="brush: js notranslate">myGreeting();</pre>
-
-<p>This effectively gives the function a name; you can also assign the function to be the value of multiple variables, for example:</p>
-
-<pre class="brush: js notranslate">var anotherGreeting = function() {
-  alert('hello');
-}</pre>
-
-<p>This function could now be invoked using either of</p>
-
-<pre class="brush: js notranslate">myGreeting();
-anotherGreeting();</pre>
-
-<p>But this would just be confusing, so don't do it! When creating functions, it is better to just stick to this form:</p>
-
-<pre class="brush: js notranslate">function myGreeting() {
-  alert('hello');
-}</pre>
-
-<p>You will mainly use anonymous functions to just run a load of code in response to an event firing — like a button being clicked — using an event handler. Again, this looks something like this:</p>
-
-<pre class="brush: js notranslate">myButton.onclick = function() {
-  alert('hello');
-  // I can put as much code
-  // inside here as I want
-}</pre>
-
-<h2 id="Function_parameters">Function parameters</h2>
-
-<p>Some functions require <strong>parameters</strong> to be specified when you are invoking them — these are values that need to be included inside the function parentheses, which it needs to do its job properly.</p>
-
-<div class="note">
-<p><strong>Note</strong>: Parameters are sometimes called arguments, properties, or even attributes.</p>
-</div>
-
-<p>As an example, the browser's built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> function doesn't require any parameters. When called, it always returns a random number between 0 and 1:</p>
-
-<pre class="brush: js notranslate">var myNumber = Math.random();</pre>
-
-<p>The browser's built-in string <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> function however needs two parameters — the substring to find in the main string, and the substring to replace that string with:</p>
-
-<pre class="brush: js notranslate">var myText = 'I am a string';
-var newString = myText.replace('string', 'sausage');</pre>
-
-<div class="note">
-<p><strong>Note</strong>: When you need to specify multiple parameters, they are separated by commas.</p>
-</div>
-
-<p>It should also be noted that sometimes parameters are optional — you don't have to specify them. If you don't, the function will generally adopt some kind of default behavior. As an example, the array <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> function's parameter is optional:</p>
-
-<pre class="brush: js notranslate">var myArray = ['I', 'love', 'chocolate', 'frogs'];
-var madeAString = myArray.join(' ');
-// returns 'I love chocolate frogs'
-var madeAString = myArray.join();
-// returns 'I,love,chocolate,frogs'</pre>
-
-<p>If no parameter is included to specify a joining/delimiting character, a comma is used by default.</p>
-
-<h2 id="Function_scope_and_conflicts">Function scope and conflicts</h2>
-
-<p>Let's talk a bit about {{glossary("scope")}} — a very important concept when dealing with functions. When you create a function, the variables and other things defined inside the function are inside their own separate <strong>scope</strong>, meaning that they are locked away in their own separate compartments, unreachable from inside other functions or from code outside the functions.</p>
-
-<p>The top level outside all your functions is called the <strong>global scope</strong>. Values defined in the global scope are accessible from everywhere in the code.</p>
-
-<p>JavaScript is set up like this for various reasons — but mainly because of security and organization. Sometimes you don't want variables to be accessible from everywhere in the code — external scripts that you call in from elsewhere could start to mess with your code and cause problems because they happen to be using the same variable names as other parts of the code, causing conflicts. This might be done maliciously, or just by accident.</p>
-
-<p>For example, say you have an HTML file that is calling in two external JavaScript files, and both of them have a variable and a function defined that use the same name:</p>
-
-<pre class="brush: html notranslate">&lt;!-- Excerpt from my HTML --&gt;
-&lt;script src="first.js"&gt;&lt;/script&gt;
-&lt;script src="second.js"&gt;&lt;/script&gt;
-&lt;script&gt;
-  greeting();
-&lt;/script&gt;</pre>
-
-<pre class="brush: js notranslate">// first.js
-var name = 'Chris';
-function greeting() {
-  alert('Hello ' + name + ': welcome to our company.');
-}</pre>
-
-<pre class="brush: js notranslate">// second.js
-var name = 'Zaptec';
-function greeting() {
-  alert('Our company is called ' + name + '.');
-}</pre>
-
-<p>Both functions you want to call are called <code>greeting()</code>, but you can only ever access the <code>second.js</code> file's <code>greeting()</code> function — it is applied to the HTML later on in the source code, so its variable and function overwrite the ones in <code>first.js</code>.</p>
-
-<div class="note">
-<p><strong>Note</strong>: You can see this example <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">running live on GitHub</a> (see also the <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">source code</a>).</p>
-</div>
-
-<p>Keeping parts of your code locked away in functions avoids such problems, and is considered best practice.</p>
-
-<p>It is a bit like a zoo. The lions, zebras, tigers, and penguins are kept in their own enclosures, and only have access to the things inside their enclosures — in the same manner as the function scopes. If they were able to get into other enclosures, problems would occur. At best, different animals would feel really uncomfortable inside unfamiliar habitats — a lion or tiger would feel terrible inside the penguins' watery, icy domain. At worst, the lions and tigers might try to eat the penguins!</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p>
-
-<p>The zoo keeper is like the global scope — he or she has the keys to access every enclosure, to restock food, tend to sick animals, etc.</p>
-
-<h3 id="Active_learning_Playing_with_scope">Active learning: Playing with scope</h3>
-
-<p>Let's look at a real example to demonstrate scoping.</p>
-
-<ol>
- <li>First, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a> example. This contains two functions called <code>a()</code> and <code>b()</code>, and three variables — <code>x</code>, <code>y</code>, and <code>z</code> — two of which are defined inside the functions, and one in the global scope. It also contains a third function called <code>output()</code>, which takes a single parameter and outputs it in a paragraph on the page.</li>
- <li>Open the example up in a browser and in your text editor.</li>
- <li>Open the JavaScript console in your browser developer tools. In the JavaScript console, enter the following command:
-  <pre class="brush: js notranslate">output(x);</pre>
-  You should see the value of variable <code>x</code> output to the screen.</li>
- <li>Now try entering the following in your console
-  <pre class="brush: js notranslate">output(y);
-output(z);</pre>
-  Both of these should return an error along the lines of "<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>". Why is that? Because of function scope — <code>y</code> and <code>z</code> are locked inside the <code>a()</code> and <code>b()</code> functions, so <code>output()</code> can't access them when called from the global scope.</li>
- <li>However, what about when it's called from inside another function? Try editing <code>a()</code> and <code>b()</code> so they look like this:
-  <pre class="brush: js notranslate">function a() {
-  var y = 2;
-  output(y);
-}
-
-function b() {
-  var z = 3;
-  output(z);
-}</pre>
-  Save the code and reload it in your browser, then try calling the <code>a()</code> and <code>b()</code> functions from the JavaScript console:
-
-  <pre class="brush: js notranslate">a();
-b();</pre>
-  You should see the <code>y</code> and <code>z</code> values output in the page. This works fine, as the <code>output()</code> function is being called inside the other functions — in the same scope as the variables it is printing are defined in, in each case. <code>output()</code> itself is available from anywhere, as it is defined in the global scope.</li>
- <li>Now try updating your code like this:
-  <pre class="brush: js notranslate">function a() {
-  var y = 2;
-  output(x);
-}
-
-function b() {
-  var z = 3;
-  output(x);
-}</pre>
-  Save and reload again, and try this again in your JavaScript console:
-
-  <pre class="brush: js notranslate">a();
-b();</pre>
-  Both the <code>a()</code> and <code>b()</code> call should output the value of x — 1. These work fine because even though the <code>output()</code> calls are not in the same scope as <code>x</code> is defined in, <code>x</code> is a global variable so is available inside all code, everywhere.</li>
- <li>Finally, try updating your code like this:
-  <pre class="brush: js notranslate">function a() {
-  var y = 2;
-  output(z);
-}
-
-function b() {
-  var z = 3;
-  output(y);
-}</pre>
-  Save and reload again, and try this again in your JavaScript console:
-
-  <pre class="brush: js notranslate">a();
-b();</pre>
-  This time the <code>a()</code> and <code>b()</code> calls will both return that annoying "<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: z is not defined</a>" error — this is because the <code>output()</code> calls and the variables they are trying to print are not defined inside the same function scopes — the variables are effectively invisible to those function calls.</li>
-</ol>
-
-<div class="note">
-<p><strong>Note</strong>: The same scoping rules do not apply to loop (e.g. <code>for() { ... }</code>) and conditional blocks (e.g. <code>if() { ... }</code>) — they look very similar, but they are not the same thing! Take care not to get these confused.</p>
-</div>
-
-<div class="note">
-<p><strong>Note</strong>: The <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> error is one of the most common you'll encounter. If you get this error and you are sure that you have defined the variable in question, check what scope it is in.</p>
-</div>
-
-<ul>
-</ul>
-
-<h3 id="Functions_inside_functions">Functions inside functions</h3>
-
-<p>Keep in mind that you can call a function from anywhere, even inside another function.  This is often used as a way to keep code tidy — if you have a big complex function, it is easier to understand if you break it down into several sub-functions:</p>
-
-<pre class="brush: js notranslate">function myBigFunction() {
-  var myValue;
-
-  subFunction1();
-  subFunction2();
-  subFunction3();
-}
-
-function subFunction1() {
-  console.log(myValue);
-}
-
-function subFunction2() {
-  console.log(myValue);
-}
-
-function subFunction3() {
-  console.log(myValue);
-}
-</pre>
-
-<p>Just make sure that the values being used inside the function are properly in scope. The example above would throw an error <code>ReferenceError: myValue is not defined</code>, because although the <code>myValue</code> variable is defined in the same scope as the function calls, it is not defined inside the function definitions — the actual code that is run when the functions are called. To make this work, you'd have to pass the value into the function as a parameter, like this:</p>
-
-<pre class="brush: js notranslate">function myBigFunction() {
-  var myValue = 1;
-
-  subFunction1(myValue);
-  subFunction2(myValue);
-  subFunction3(myValue);
-}
-
-function subFunction1(value) {
-  console.log(value);
-}
-
-function subFunction2(value) {
-  console.log(value);
-}
-
-function subFunction3(value) {
-  console.log(value);
-}</pre>
-
-<h2 id="Conclusion">Conclusion</h2>
-
-<p>This article has explored the fundamental concepts behind functions, paving the way for the next one in which we get practical and take you through the steps to building up your own custom function.</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions detailed guide</a> — covers some advanced features not included here.</li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions reference</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a> — advanced concept references</li>
-</ul>
-
-<ul>
-</ul>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
-</ul>
-&lt;gdiv&gt;&lt;/gdiv&gt;
diff --git a/files/es/learn/javascript/building_blocks/image_gallery/index.html b/files/es/learn/javascript/building_blocks/image_gallery/index.html
deleted file mode 100644
index a4bad1842e..0000000000
--- a/files/es/learn/javascript/building_blocks/image_gallery/index.html
+++ /dev/null
@@ -1,145 +0,0 @@
----
-title: Galería de imágenes
-slug: Learn/JavaScript/Building_blocks/Image_gallery
-translation_of: Learn/JavaScript/Building_blocks/Image_gallery
-original_slug: Learn/JavaScript/Building_blocks/Galeria_de_imagenes
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div>
-
-<p class="summary"><span class="tlid-translation translation" lang="es"><span title="">Ahora que hemos analizado los bloques de construcción fundamentales de JavaScript, pongamos a prueba tu conocimiento de bucles, funciones, condicionales y eventos, creando un elemento que comumente vemos en muchos sitios web, una </span> <span title="">Galería de imágenes "motorizada" por JavaScript .</span></span></p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisitos:</th>
-   <td>Antes de intentar esta evaluación deberías de haber trabajado con todos los artículos en éste módulo.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Evaluar la comprensión de los bucles, funciones, condicionales y eventos de JavaScript..</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Punto_de_partida">Punto de partida</h2>
-
-<p>Para realizar esta evaluación, debería descárgarse <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true">archivoZip</a> para el ejemplo, descomprímalo en algún lugar de su computadora y haga el ejercicio localmente para empezar.</p>
-
-<p>Opcionalmente, puedes usar un sitio como <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a href="https://glitch.com/">Glitch</a> para realizar tu evaluación. Puede pegar el HTML, CSS y JavaScript dentro de uno de estos editores online. <span class="tlid-translation translation" lang="es"><span title="">Si el editor en línea que está utilizando no tiene paneles JavaScript / CSS separados, siéntase libre de ponerlos en línea &lt;script&gt; / &lt;style&gt; elementos dentro de la página HTML.</span></span></p>
-
-<div class="blockIndicator note">
-<p><strong>Nota</strong>: Si se atascascas con algo, entonces pregúntenos para ayudarlo — vea la sección de {{anch("evaluación o ayuda adicional")}} al final de esta página.</p>
-</div>
-
-<h2 id="Resumen_del_proyecto">Resumen del proyecto</h2>
-
-<p>Ha sido provisto con algún contenido de HTML, CSS e imágenes, también algunas líneas de código en JavaScript; necesitas escribir las líneas de código en JavaScript necesatio para transformarse en un programa funcional. El  HTML body luce así:</p>
-
-<pre class="brush: html">&lt;h1&gt;Image gallery example&lt;/h1&gt;
-
-&lt;div class="full-img"&gt;
-  &lt;img class="displayed-img" src="images/pic1.jpg"&gt;
-  &lt;div class="overlay"&gt;&lt;/div&gt;
-  &lt;button class="dark"&gt;Darken&lt;/button&gt;
-&lt;/div&gt;
-
-&lt;div class="thumb-bar"&gt;
-
-&lt;/div&gt;</pre>
-
-<p>El ejemplo se ve así:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/13787/gallery.png" style="display: block; margin: 0 auto;"></p>
-
-<ul>
-</ul>
-
-<p>Las partes más interesantes del archivo example's CSS :</p>
-
-<ul>
- <li>It absolutely positions the three elements inside the <code>full-img &lt;div&gt;</code> — the <code>&lt;img&gt;</code> in which the full-sized image is displayed, an empty <code>&lt;div&gt;</code> that is sized to be the same size as the <code>&lt;img&gt;</code> and put right over the top of it (this is used to apply a darkening effect to the image via a semi-transparent background color), and a <code>&lt;button&gt;</code> that is used to control the darkening effect.</li>
- <li>It sets the width of any images inside the <code>thumb-bar &lt;div&gt;</code> (so-called "thumbnail" images) to 20%, and floats them to the left so they sit next to one another on a line.</li>
-</ul>
-
-<p>Your JavaScript needs to:</p>
-
-<ul>
- <li>Loop through all the images, and for each one insert an <code>&lt;img&gt;</code> element inside the <code>thumb-bar &lt;div&gt;</code> that embeds that image in the page.</li>
- <li>Attach an <code>onclick</code> handler to each <code>&lt;img&gt;</code> inside the <code>thumb-bar &lt;div&gt;</code> so that when they are clicked, the corresponding image is displayed in the <code>displayed-img &lt;img&gt;</code> element.</li>
- <li>Attach an <code>onclick</code> handler to the <code>&lt;button&gt;</code> so that when it is clicked, a darken effect is applied to the full-size image. When it is clicked again, the darken effect is removed again.</li>
-</ul>
-
-<p>To give you more of an idea, have a look at the <a href="http://mdn.github.io/learning-area/javascript/building-blocks/gallery/">finished example</a> (no peeking at the source code!)</p>
-
-<h2 id="Steps_to_complete">Steps to complete</h2>
-
-<p>The following sections describe what you need to do.</p>
-
-<h3 id="Looping_through_the_images">Looping through the images</h3>
-
-<p>We've already provided you with lines that store a reference to the <code>thumb-bar &lt;div&gt;</code> inside a constant called <code>thumbBar</code>, create a new <code>&lt;img&gt;</code> element, set its <code>src</code> attribute to a placeholder value <code>xxx</code>, and append this new <code>&lt;img&gt;</code> element inside <code>thumbBar</code>.</p>
-
-<p>You need to:</p>
-
-<ol>
- <li>Put the section of code below the "Looping through images" comment inside a loop that loops through all 5 images — you just need to loop through five numbers, one representing each image.</li>
- <li>In each loop iteration, replace the <code>xxx</code> placeholder value with a string that will equal the path to the image in each case. We are setting the value of the <code>src</code> attribute to this value in each case. Bear in mind that in each case, the image is inside the images directory and its name is <code>pic1.jpg</code>, <code>pic2.jpg</code>, etc.</li>
-</ol>
-
-<h3 id="Adding_an_onclick_handler_to_each_thumbnail_image">Adding an onclick handler to each thumbnail image</h3>
-
-<p>In each loop iteration, you need to add an <code>onclick</code> handler to the current <code>newImage</code> — this handler should find the value of the <code>src</code> attribute of the current image. Set the <code>src</code> attribute value of the <code>displayed-img &lt;img&gt;</code> to the <code>src</code> value passed in as a parameter.</p>
-
-<h3 id="Writing_a_handler_that_runs_the_darkenlighten_button">Writing a handler that runs the darken/lighten button</h3>
-
-<p>That just leaves our darken/lighten <code>&lt;button&gt;</code> — we've already provided a line that stores a reference to the <code>&lt;button&gt;</code> in a constant called <code>btn</code>. You need to add an <code>onclick</code> handler that:</p>
-
-<ol>
- <li>Checks the current class name set on the <code>&lt;button&gt;</code> — you can again achieve this by using <code>getAttribute()</code>.</li>
- <li>If the class name is <code>"dark"</code>, changes the <code>&lt;button&gt;</code> class to <code>"light"</code> (using <code><a href="/en-US/docs/Web/API/Element/setAttribute">setAttribute()</a></code>), its text content to "Lighten", and the {{cssxref("background-color")}} of the overlay <code>&lt;div&gt;</code> to <code>"rgba(0,0,0,0.5)"</code>.</li>
- <li>If the class name not <code>"dark"</code>, changes the <code>&lt;button&gt;</code> class to <code>"dark"</code>, its text content back to "Darken", and the {{cssxref("background-color")}} of the overlay <code>&lt;div&gt;</code> to <code>"rgba(0,0,0,0)"</code>.</li>
-</ol>
-
-<p>The following lines provide a basis for achieving the changes stipulated in points 2 and 3 above.</p>
-
-<pre class="brush: js">btn.setAttribute('class', xxx);
-btn.textContent = xxx;
-overlay.style.backgroundColor = xxx;</pre>
-
-<h2 id="Hints_and_tips">Hints and tips</h2>
-
-<ul>
- <li>You don't need to edit the HTML or CSS in any way.</li>
-</ul>
-
-<h2 id="Assessment_or_further_help">Assessment or further help</h2>
-
-<p>If you would like your work assessed, or are stuck and want to ask for help:</p>
-
-<ol>
- <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>.</li>
- <li>Write a post asking for assessment and/or help at the <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a>. Your post should include:
-  <ul>
-   <li>A descriptive title such as "Assessment wanted for Image gallery".</li>
-   <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li>
-   <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li>
-   <li>A link to the actual task or assessment page, so we can find the question you want help with.</li>
-  </ul>
- </li>
-</ol>
-
-<p>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
-</ul>
diff --git a/files/es/learn/server-side/django/django_assessment_blog/index.html b/files/es/learn/server-side/django/django_assessment_blog/index.html
deleted file mode 100644
index cb5ac7ad88..0000000000
--- a/files/es/learn/server-side/django/django_assessment_blog/index.html
+++ /dev/null
@@ -1,307 +0,0 @@
----
-title: 'Evaluación: DIY Django mini blog'
-slug: Learn/Server-side/Django/django_assessment_blog
-translation_of: Learn/Server-side/Django/django_assessment_blog
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenu("Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}</div>
-
-<p class="summary">En esta evaluación usarás el conocimiento de Django que has adquirido en el módulo <a href="/es/docs/Learn/Server-side/Django" style="font-size: 1.25rem;">Framework Web Django (Python)</a> para crear un blog muy básico<span style="font-size: 1.25rem;">.</span></p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Requisitos Previos:</th>
-   <td>Before attempting this assessment you should have already worked through all the articles in this module.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Comprender los fundamentos de Django , incluidos las configuraciones de URL , modelos, vistas, formularios y  templates.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Resumen_del_proyecto">Resumen del proyecto</h2>
-
-<p>Las paginas que necesitan ser mostradas, sus URLs, y otros requisitos son listados debajo: </p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Pagina</th>
-   <th scope="col">URL</th>
-   <th scope="col">Requisitos</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>Home page</td>
-   <td><code>/</code> and <code>/blog/</code></td>
-   <td>Una pagina inicial que describa el sitio</td>
-  </tr>
-  <tr>
-   <td>Lista de todos las publicaciones del blog</td>
-   <td><code>/blog/blogs/</code></td>
-   <td>
-    <p>Lista de todos las publicaciones del blog:</p>
-
-    <ul>
-     <li>Accessible to all users from a sidebar link.</li>
-     <li>List sorted by post date (newest to oldest).</li>
-     <li>List paginated in groups of 5 articles.</li>
-     <li>List items display the blog title, post date, and author.</li>
-     <li>Blog post names are linked to blog detail pages.</li>
-     <li>Blogger (author names) are linked to blog author detail pages.</li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <td>Blog autor (blogger) pagina de detalles</td>
-   <td><code>/blog/blogger/<em>&lt;author-id&gt;</em></code></td>
-   <td>
-    <p>Information for a specified author (by id) and list of their blog posts:</p>
-
-    <ul>
-     <li>Accessible to all users from author links in blog posts etc.</li>
-     <li>Contains some biographical information about the blogger/author.</li>
-     <li>List sorted by post date (newest to oldest).</li>
-     <li>Not paginated.</li>
-     <li>List items display just the blog post name and post date.</li>
-     <li>Blog post names are linked to blog detail pages.</li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <td>Blog post detail page</td>
-   <td><code>/blog/<em>&lt;blog-id&gt;</em></code></td>
-   <td>
-    <p>Blog post details.</p>
-
-    <ul>
-     <li>Accessible to all users from blog post lists.</li>
-     <li>Page contains the blog post: name, author, post date, and content.</li>
-     <li>Comments for the blog post should be displayed at bottom.</li>
-     <li>Comments should be sorted in order: oldest to most recent.</li>
-     <li>Contains link to add comments at end for logged in users (see Comment form page)</li>
-     <li>Blog posts and comments need only display plain text. There is no need to support any sort of HTML markup (e.g. links, images, bold/italic, etc).</li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <td>List of all bloggers</td>
-   <td><code>/blog/bloggers/</code></td>
-   <td>
-    <p>List of bloggers on system:</p>
-
-    <ul>
-     <li>Accessible to all users from site sidebar</li>
-     <li>Blogger names are linked to Blog author detail pages.</li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <td>Comment form page</td>
-   <td><code>/blog/<em>&lt;blog-id&gt;</em>/create</code></td>
-   <td>
-    <p>Create comment for blog post:</p>
-
-    <ul>
-     <li>Accessible to logged-in users (only) from link at bottom of blog post detail pages.</li>
-     <li>Displays form with description for entering comments (post date and blog is not editable).</li>
-     <li>After a comment has been posted, the page will redirect back to the associated blog post page.</li>
-     <li>Users cannot edit or delete their posts.</li>
-     <li>Logged out users will be directed to the login page to log in, before they can add comments. After logging in, they will be redirected back to the blog page they wanted to comment on.</li>
-     <li>Comment pages should include the name/link to the blogpost being commented on.</li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <td>User authentication pages</td>
-   <td><code>/accounts/<em>&lt;standard urls&gt;</em></code></td>
-   <td>
-    <p>Standard Django authentication pages for logging in, out and setting the password:</p>
-
-    <ul>
-     <li>Login/out should be accessible via sidebar links.</li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <td>Admin site</td>
-   <td><code>/admin/<em>&lt;standard urls&gt;</em></code></td>
-   <td>
-    <p>Admin site should be enabled to allow create/edit/delete of blog posts, blog authors and blog comments (this is the mechanism for bloggers to create new blog posts):</p>
-
-    <ul>
-     <li>Admin site blog posts records should display the list of associated comments inline (below each blog post).</li>
-     <li>Comment names in the Admin site are created by truncating the comment description to 75 characters.</li>
-     <li>Other types of records can use basic registration.</li>
-    </ul>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>In addition you should write some basic tests to verify:</p>
-
-<ul>
- <li>All model fields have the correct label and length.</li>
- <li>All models have the expected object name (e.g.<code> __str__()</code> returns the expected value).</li>
- <li>Models have the expected URL for individual Blog and Comment records (e.g. <code>get_absolute_url()</code> returns the expected URL).</li>
- <li>The BlogListView (all-blog page) is accessible at the expected location (e.g. /blog/blogs)</li>
- <li>The BlogListView (all-blog page) is accessible at the expected named url (e.g. 'blogs')</li>
- <li>The BlogListView (all-blog page) uses the expected template (e.g. the default)</li>
- <li>The BlogListView paginates records by 5 (at least on the first page)</li>
-</ul>
-
-<div class="note">
-<p><strong>Note</strong>: There are of course many other tests you can run. Use your discretion, but we'll expect you to do at least the tests above.</p>
-</div>
-
-<p>The following section shows <a href="#Screenshots">screenshots</a> of a site that implements the requirements above.</p>
-
-<h2 id="Screenshots">Screenshots</h2>
-
-<p>The following screenshot provide an example of what the finished program should output.</p>
-
-<h3 id="List_of_all_blog_posts">List of all blog posts</h3>
-
-<p>This displays the list of all blog posts (accessible from the "All blogs" link in the sidebar). Things to note:</p>
-
-<ul>
- <li>The sidebar also lists the logged in user.</li>
- <li>Individual blog posts and bloggers are accessible as links in the page.</li>
- <li>Pagination is enabled (in groups of 5)</li>
- <li>Ordering is newest to oldest.</li>
-</ul>
-
-<p><img alt="List of all blogs" src="https://mdn.mozillademos.org/files/14319/diyblog_allblogs.png" style="border-style: solid; border-width: 1px; display: block; height: 363px; margin: 0px auto; width: 986px;"></p>
-
-<h3 id="List_of_all_bloggers">List of all bloggers</h3>
-
-<p>This provides links to all bloggers, as linked from the "All bloggers" link in the sidebar. In this case we can see from the sidebar that no user is logged in.</p>
-
-<p><img alt="List of all bloggers" src="https://mdn.mozillademos.org/files/14321/diyblog_blog_allbloggers.png" style="border-style: solid; border-width: 1px; display: block; height: 256px; margin: 0px auto; width: 493px;"></p>
-
-<h3 id="Blog_detail_page">Blog detail page</h3>
-
-<p>This shows the detail page for a particular blog.</p>
-
-<p><img alt="Blog detail with add comment link" src="https://mdn.mozillademos.org/files/14323/diyblog_blog_detail_add_comment.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 986px;"></p>
-
-<p>Note that the comments have a date <em>and</em> time, and are ordered from oldest to newest (opposite of blog ordering). At the end we have a link for accessing the form to add a new comment. If a user is not logged in we'd instead see a suggestion to log in.</p>
-
-<p><img alt="Comment link when not logged in" src="https://mdn.mozillademos.org/files/14325/diyblog_blog_detail_not_logged_in.png" style="border-style: solid; border-width: 1px; display: block; height: 129px; margin: 0px auto; width: 646px;"></p>
-
-<h3 id="Add_comment_form">Add comment form</h3>
-
-<p>This is the form to add comments. Note that we're logged in. When this succeeds we should be taken back to the associated blog post page.</p>
-
-<p><img alt="Add comment form" src="https://mdn.mozillademos.org/files/14329/diyblog_comment_form.png" style="border-style: solid; border-width: 1px; display: block; height: 385px; margin: 0px auto; width: 778px;"></p>
-
-<h3 id="Author_bio">Author bio</h3>
-
-<p>This displays bio information for a blogger along with their blog posts list.</p>
-
-<p><img alt="Blogger detail page" src="https://mdn.mozillademos.org/files/14327/diyblog_blogger_detail.png" style="border-style: solid; border-width: 1px; display: block; height: 379px; margin: 0px auto; width: 982px;"></p>
-
-<h2 id="Steps_to_complete">Steps to complete</h2>
-
-<p>The following sections describe what you need to do.</p>
-
-<ol>
- <li>Create a skeleton project and web application for the site (as described in <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a>). You might use 'diyblog' for the project name and 'blog' for the application name.</li>
- <li>Create models for the Blog posts, Comments, and any other objects needed. When thinking about your design, remember:
-  <ul>
-   <li>Each comment will have only one blog, but a blog may have many comments.</li>
-   <li>Blog posts and comments must be sorted by post date.</li>
-   <li>Not every user will necessarily be a blog author though any user may be a commenter.</li>
-   <li>Blog authors must also include bio information.</li>
-  </ul>
- </li>
- <li>Run migrations for your new models and create a superuser.</li>
- <li>Use the admin site to create some example blog posts and blog comments.</li>
- <li>Create views, templates, and URL configurations for blog post and blogger list pages.</li>
- <li>Create views, templates, and URL configurations for blog post and blogger detail pages.</li>
- <li>Create a page with a form for adding new comments (remember to make this only available to logged in users!)</li>
-</ol>
-
-<h2 id="Hints_and_tips">Hints and tips</h2>
-
-<p>This project is very similar to the <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> tutorial. You will be able to set up the skeleton, user login/logout behaviour, support for static files, views, URLs, forms, base templates and admin site configuration using almost all the same approaches.</p>
-
-<p>Some general hints:</p>
-
-<ol>
- <li>The index page can be implemented as a basic function view and template (just like for the locallibrary).</li>
- <li>The list view for blog posts and bloggers, and the detail view for blog posts can be created using the <a href="/en-US/docs/Learn/Server-side/Django/Generic_views">generic list and detail views</a>.</li>
- <li>The list of blog posts for a particular author can be created by using a generic list Blog list view and filtering for blog object that match the specified author.
-  <ul>
-   <li>You will have to implement <code>get_queryset(self)</code> to do the filtering (much like in our library class <code>LoanedBooksAllListView</code>) and get the author information from the URL.</li>
-   <li>You will also need to pass the name of the author to the page in the context. To do this in a class-based view you need to implement <code>get_context_data()</code> (discussed below).</li>
-  </ul>
- </li>
- <li>The <em>add comment</em> form can be created using a function-based view (and associated model and form) or using a generic <code>CreateView</code>. If you use a <code>CreateView</code> (recommended) then:
-  <ul>
-   <li>You will also need to pass the name of the blog post to the comment page in the context (implement <code>get_context_data()</code> as discussed below).</li>
-   <li>The form should only display the comment "description" for user entry (date and associated blog post should not be editable). Since they won't be in the form itself, your code will need to set the comment's author in the<code> form_valid()</code> function so it can be saved into the model (<a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-editing/#models-and-request-user">as described here</a> — Django docs). In that same function we set the associated blog. A possible implementation is shown below (<code>pk</code> is a blog id passed in from the URL/URL configuration).
-    <pre class="brush: python">    def form_valid(self, form):
-        """
-        Add author and associated blog to form data before setting it as valid (so it is saved to model)
-        """
-        #Add logged-in user as author of comment
-        form.instance.author = self.request.user
-        #Associate comment with blog based on passed id
-        form.instance.blog=get_object_or_404(Blog, pk = self.kwargs['pk'])
-        # Call super-class form validation behaviour
-        return super(BlogCommentCreate, self).form_valid(form)
-</pre>
-   </li>
-   <li>You will need to provide a success URL to redirect to after the form validates; this should be the original blog. To do this you will need to override <code>get_success_url()</code> and "reverse" the URL for the original blog. You can get the required blog ID using the <code>self.kwargs</code> attribute, as shown in the <code>form_valid()</code> method above.</li>
-  </ul>
- </li>
-</ol>
-
-<p>We briefly talked about passing a context to the template in a class-based view in the <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Generic_views#Overriding_methods_in_class-based_views">Django Tutorial Part 6: Generic list and detail views</a> topic. To do this you need to override <code>get_queryset()</code> (first getting the existing context, updating it with whatever additional variables you want to pass to the template, and then returning the updated context. For example, the code fragment below shows how you can add a blogger object to the context based on their <code>BlogAuthor</code> id.</p>
-
-<pre class="brush: python">class SomeView(generic.ListView):
-    ...
-
-    def get_context_data(self, **kwargs):
-        # Call the base implementation first to get a context
-        context = super(SomeView, self).get_context_data(**kwargs)
-        # Get the blogger object from the "pk" URL parameter and add it to the context
-        context['blogger'] = get_object_or_404(BlogAuthor, pk = self.kwargs['pk'])
-        return context
-</pre>
-
-<h2 id="Assessment">Assessment</h2>
-
-<p>The assessment for this task is <a href="https://github.com/mdn/django-diy-blog/blob/master/MarkingGuide.md">available on Github here</a>. This assessment is primarily based on how well your application meets the requirements we listed above, though there are some parts of the assessment that check your code uses appropriate models, and that you have written at least some test code. When you're done, you can check out our <a href="https://github.com/mdn/django-diy-blog">the finished example</a> which reflects a "full marks" project.</p>
-
-<p>Once you've completed this module you've also finished all the MDN content for learning basic Django server-side website programming! We hope you enjoyed this module and feel you have a good grasp of the basics!</p>
-
-<p>{{PreviousMenu("Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}</p>
-
-<p> </p>
-
-<h2 id="En_este_modulo">En este modulo</h2>
-
-<ul>
- <li><a href="/es/docs/Learn/Server-side/Django/Introducción">Introducción a Django</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/development_environment">Configurando un entorno de desarrollo Django</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial de Django: El sito web de la Biblioteca Local</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial de Django Parte 2: Creando el esqueleto de un sitio web</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/Models">Tutorial de Django Parte 3: Usando modelos</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de administración de Django</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creando nuestra página de inicio</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/Generic_views">Tutorial de Django Parte 6: Listas genéricas y vistas de detalle</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/Sessions">Tutorial de Django Parte 7: Framework de sesiones</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/Authentication">Tutorial de Django Parte 8: Autenticación de usuarios y permisos</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajando con formularios</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/Testing">Tutorial de Django Parte 10: Probando una aplicación web de Django</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/Deployment">Tutorial de Django Parte 11: Poniendo Django en producción</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/web_application_security">Seguridad en aplicaciones web Django</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
-</ul>
diff --git a/files/es/learn/server-side/django/web_application_security/index.html b/files/es/learn/server-side/django/web_application_security/index.html
deleted file mode 100644
index e00a1771bb..0000000000
--- a/files/es/learn/server-side/django/web_application_security/index.html
+++ /dev/null
@@ -1,176 +0,0 @@
----
-title: Seguridad de las aplicaciones web Django
-slug: Learn/Server-side/Django/web_application_security
-translation_of: Learn/Server-side/Django/web_application_security
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}</div>
-
-<p class="summary">Proteger los datos de los usuarios es una parte esencial de cualquier diseño de un sitio web. Previamente ya explicamos algunas de las amenazas de seguridad más comunes en el artículo <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Seguridad Web</a> — este artículo proporciona una demostración práctica de cómo las protecciones integradas de Django gestionan estas amenazas.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerrequisitos:</th>
-   <td>Lee la documentación de la Programación del Lado del servidor "<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Seguridad de la aplicación web de Django</a>". Completa todos los temas del Tutorial de Django (incluyendo este) o por lo menos el <a href="/en-US/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajar con formularios web</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Comprender las cosas principales que debes hacer (y las que no debes) para proteger su aplicación web de Django.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Overview">Overview</h2>
-
-<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Website security</a> topic provides an overview of what website security means for server-side design, and some of the more common threats that you may need to protect against. One of the key messages in that article is that almost all attacks are successful when the web application trusts data from the browser.</p>
-
-<div class="warning">
-<p><strong>Important:</strong> The single most important lesson you can learn about website security is to <strong>never trust data from the browser</strong>. This includes <code>GET</code> request data in URL parameters, <code>POST</code> data, HTTP headers and cookies, user-uploaded files, etc. Always check and sanitize all incoming data. Always assume the worst.</p>
-</div>
-
-<p>The good news for Django users is that many of the more common threats are handled by the framework! The <a href="https://docs.djangoproject.com/en/1.10/topics/security/">Security in Django</a> (Django docs) article explains Django's security features and how to secure a Django-powered website.</p>
-
-<h2 id="Common_threatsprotections">Common threats/protections</h2>
-
-<p>Rather than duplicate the Django documentation here, in this article we'll demonstrate just a few of the security features in the context of our Django <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> tutorial.</p>
-
-<h3 id="Cross_site_scripting_(XSS)">Cross site scripting (XSS)</h3>
-
-<p>XSS is a term used to describe a class of attacks that allow an attacker to inject client-side scripts <em>through</em> the website into the browsers of other users. This is usually achieved by storing malicious scripts in the database where they can be retrieved and displayed to other users, or by getting users to click a link that will cause the attacker’s JavaScript to be executed by the user’s browser.</p>
-
-<p>Django's template system protects you against the majority of XSS attacks by <a href="https://docs.djangoproject.com/en/1.10/ref/templates/language/#automatic-html-escaping">escaping specific characters</a> that are "dangerous" in HTML. We can demonstrate this by attempting to inject some JavaScript into our LocalLibrary website using the Create-author form we set up in <a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a>.</p>
-
-<ol>
- <li>Start the website using the development server (<code>python3 manage.py runserver</code>).</li>
- <li>Open the site in your local browser and login to your superuser account.</li>
- <li>Navigate to the author-creation page (which should be at URL: <code><a href="http://127.0.0.1:8000/catalog/author/create/">http://127.0.0.1:8000/catalog/author/create/</a></code>).</li>
- <li>Enter names and date details for a new user, and then append the following text to the Last Name field:<br>
-  <code>&lt;script&gt;alert('Test alert');&lt;/script&gt;</code>.<br>
-  <img alt="Author Form XSS test" src="https://mdn.mozillademos.org/files/14305/author_create_form_alert_xss.png" style="border-style: solid; border-width: 1px; height: 245px; width: 594px;">
-  <div class="note">
-  <p><strong>Note:</strong> This is a harmless script that, if executed, will display an alert box in your browser. If the alert is displayed when you submit the record then the site is vulnerable to XSS threats.</p>
-  </div>
- </li>
- <li>Press <strong>Submit</strong> to save the record.</li>
- <li>When you save the author it will be displayed as shown below. Because of the XSS protections the <code>alert()</code> should not be run. Instead the script is displayed as plain text.<img alt="Author detail view XSS test" src="https://mdn.mozillademos.org/files/14307/author_detail_alert_xss.png" style="border-style: solid; border-width: 1px; height: 248px; width: 986px;"></li>
-</ol>
-
-<p>If you view the page HTML source code, you can see that the dangerous characters for the script tags have been turned into their harmless escape code equivalents (e.g. <code>&gt;</code> is now <code>&amp;gt;</code>)</p>
-
-<pre class="brush: html">&lt;h1&gt;Author: Boon&amp;lt;script&amp;gt;alert(&amp;#39;Test alert&amp;#39;);&amp;lt;/script&amp;gt;, David (Boonie) &lt;/h1&gt;
-</pre>
-
-<p>Using Django templates protects you against the majority of XSS attacks. However it is possible to turn off this protection, and the protection isn't automatically applied to all tags that wouldn't normally be populated by user input (for example, the <code>help_text</code> in a form field is usually not user-supplied, so Django doesn't escape those values).</p>
-
-<p>It is also possible for XSS attacks to originate from other untrusted source of data, such as cookies, Web services or uploaded files (whenever the data is not sufficiently sanitized before including in a page). If you're displaying data from these sources, then you may need to add your own sanitisation code.</p>
-
-<h3 id="Cross_site_request_forgery_(CSRF)_protection">Cross site request forgery (CSRF) protection</h3>
-
-<p>CSRF attacks allow a malicious user to execute actions using the credentials of another user without that user’s knowledge or consent. For example consider the case where we have a hacker who wants to create additional authors for our LocalLibrary.</p>
-
-<div class="note">
-<p><strong>Note:</strong> Obviously our hacker isn't in this for the money! A more ambitious hacker could use the same approach on other sites to perform much more harmful tasks (e.g. transfer money to their own accounts, etc.)</p>
-</div>
-
-<p>In order to do this, they might create an HTML file like the one below, which contains an author-creation form (like the one we used in the previous section) that is submitted as soon as the file is loaded. They would then send the file to all the Librarians and suggest that they open the file (it contains some harmless information, honest!). If the file is opened by any logged in librarian, then the form would be submitted with their credentials and a new author would be created.</p>
-
-<pre class="brush: html">&lt;html&gt;
-&lt;body onload='document.EvilForm.submit()'&gt;
-
-&lt;form action="http://127.0.0.1:8000/catalog/author/create/" method="post" name='EvilForm'&gt;
-  &lt;table&gt;
-    &lt;tr&gt;&lt;th&gt;&lt;label for="id_first_name"&gt;First name:&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="id_first_name" maxlength="100" name="first_name" type="text" value="Mad" required /&gt;&lt;/td&gt;&lt;/tr&gt;
-    &lt;tr&gt;&lt;th&gt;&lt;label for="id_last_name"&gt;Last name:&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="id_last_name" maxlength="100" name="last_name" type="text" value="Man" required /&gt;&lt;/td&gt;&lt;/tr&gt;
-    &lt;tr&gt;&lt;th&gt;&lt;label for="id_date_of_birth"&gt;Date of birth:&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="id_date_of_birth" name="date_of_birth" type="text" /&gt;&lt;/td&gt;&lt;/tr&gt;
-    &lt;tr&gt;&lt;th&gt;&lt;label for="id_date_of_death"&gt;Died:&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="id_date_of_death" name="date_of_death" type="text" value="12/10/2016" /&gt;&lt;/td&gt;&lt;/tr&gt;
-  &lt;/table&gt;
-  &lt;input type="submit" value="Submit" /&gt;
-&lt;/form&gt;
-
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<p>Run the development web server, and log in with your superuser account. Copy the text above into a file and then open it in the browser. You should get a CSRF error, because Django has protection against this kind of thing!</p>
-
-<p>The way the protection is enabled is that you include the <code>{% csrf_token %}</code> template tag in your form definition. This token is then rendered in your HTML as shown below, with a value that is specific to the user on the current browser.</p>
-
-<pre class="brush: html">&lt;input type='hidden' name='csrfmiddlewaretoken' value='0QRWHnYVg776y2l66mcvZqp8alrv4lb8S8lZ4ZJUWGZFA5VHrVfL2mpH29YZ39PW' /&gt;
-</pre>
-
-<p>Django generates a user/browser specific key and will reject forms that do not contain the field, or that contain an incorrect field value for the user/browser.</p>
-
-<p>To use this type of attack the hacker now has to discover and include the CSRF key for the specific target user. They also can't use the "scattergun" approach of sending a malicious file to all librarians and hoping that one of them will open it, since the CSRF key is browser specific.</p>
-
-<p>Django's CSRF protection is turned on by default. You should always use the <code>{% csrf_token %}</code> template tag in your forms and use <code>POST</code> for requests that might change or add data to the database.</p>
-
-<h3 id="Other_protections">Other protections</h3>
-
-<p>Django also provides other forms of protection (most of which would be hard or not particularly useful to demonstrate):</p>
-
-<dl>
- <dt>SQL injection protection</dt>
- <dd>SQL injection vulnerabilities enable malicious users to execute arbitrary SQL code on a database, allowing data to be accessed, modified, or deleted irrespective of the user's permissions. In almost every case you'll be accessing the database using Django’s querysets/models, so the resulting SQL will be properly escaped by the underlying database driver. If you do need to write raw queries or custom SQL then you'll need to explicitly think about preventing SQL injection.</dd>
- <dt>Clickjacking protection</dt>
- <dd>In this attack a malicious user hijacks clicks meant for a visible top level site and routes them to a hidden page beneath. This technique might be used, for example, to display a legitimate bank site but capture the login credentials in an invisible <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="The HTML Inline Frame Element (&lt;iframe>) represents a nested browsing context, effectively embedding another HTML page into the current page. In HTML 4.01, a document may contain a head and a body or a head and a frameset, but not both a body and a frameset. However, an &lt;iframe> can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window."><code>&lt;iframe&gt;</code></a> controlled by the attacker. Django contains <a href="https://docs.djangoproject.com/en/1.10/ref/clickjacking/#clickjacking-prevention">clickjacking protection</a> in the form of the <a href="https://docs.djangoproject.com/en/1.10/ref/middleware/#django.middleware.clickjacking.XFrameOptionsMiddleware" title="django.middleware.clickjacking.XFrameOptionsMiddleware"><code>X-Frame-Options middleware</code></a> which, in a supporting browser, can prevent a site from being rendered inside a frame.</dd>
- <dt>Enforcing SSL/HTTPS</dt>
- <dd>SSL/HTTPS can be enabled on the web server in order to encrypt all traffic between the site and browser, including authentication credentials that would otherwise be sent in plain text (enabling HTTPS is highly recommended). If HTTPS is enabled then Django provides a number of other protections you can use:</dd>
-</dl>
-
-<ul>
- <li><a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-SECURE_PROXY_SSL_HEADER"><code>SECURE_PROXY_SSL_HEADER</code></a> can be used to check whether content is secure, even if it is incoming from a non-HTTP proxy.</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-SECURE_SSL_REDIRECT"><code>SECURE_SSL_REDIRECT</code></a> is used to redirect all HTTP requests to HTTPS.</li>
- <li>Use <a href="https://docs.djangoproject.com/en/1.10/ref/middleware/#http-strict-transport-security">HTTP Strict Transport Security</a> (HSTS). This is an HTTP header that informs a browser that all future connections to a particular site should always use HTTPS. Combined with redirecting HTTP requests to HTTPS, this setting ensures that HTTPS is always used after a successful connection has occurred. HSTS may either be configured with <a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-SECURE_HSTS_SECONDS"><code>SECURE_HSTS_SECONDS</code></a> and <a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-SECURE_HSTS_INCLUDE_SUBDOMAINS"><code>SECURE_HSTS_INCLUDE_SUBDOMAINS</code></a> or on the Web server.</li>
- <li>Use ‘secure’ cookies by setting <a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-SESSION_COOKIE_SECURE"><code>SESSION_COOKIE_SECURE</code></a> and <a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-CSRF_COOKIE_SECURE"><code>CSRF_COOKIE_SECURE</code></a> to <code>True</code>. This will ensure that cookies are only ever sent over HTTPS.</li>
-</ul>
-
-<dl>
- <dt>Host header validation</dt>
- <dd>Use <a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-ALLOWED_HOSTS"><code>ALLOWED_HOSTS</code></a> to only accept requests from trusted hosts.</dd>
-</dl>
-
-<p>There are many other protections, and caveats to the usage of the above mechanisms. While we hope that this has given you an overview of what Django offers, you should still read the Django security documentation.</p>
-
-<ul>
-</ul>
-
-<h2 id="Summary">Summary</h2>
-
-<p>Django has effective protections against a number of common threats, including XSS and CSRF attacks. In this article we've demonstrated how those particular threats are handled by Django in our <em>LocalLibrary</em> website. We've also provided a brief overview of some of the other protections.</p>
-
-<p>This has been a very brief foray into web security. We strongly recommend that you read <a href="https://docs.djangoproject.com/en/1.10/topics/security/">Security in Django</a> to gain a deeper understanding.</p>
-
-<p>The next and final step in this module about Django is to complete the <a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">assessment task</a>.</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="https://docs.djangoproject.com/en/1.10/topics/security/">Security in Django</a> (Django docs)</li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Web/Security">Server side website security</a> (MDN)</li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> (MDN)</li>
- <li><a href="/en-US/docs/Web/Security/Securing_your_site">Securing your site</a> (MDN)</li>
-</ul>
-
-<p>{{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}</p>
-
-<h2 id="En_este_módulo">En este módulo</h2>
-
-<ul>
- <li><a href="/es/docs/Learn/Server-side/Django/Introducción">Introducción a Django</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/development_environment">Configurando un entorno de desarrollo Django</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial de Django: El sito web de la Biblioteca Local</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial de Django Parte 2: Creando el esqueleto de un sitio web</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/Models">Tutorial de Django Parte 3: Usando modelos</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de administración de Django</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creando nuestra página de inicio</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/Generic_views">Tutorial de Django Parte 6: Listas genéricas y vistas de detalle</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/Sessions">Tutorial de Django Parte 7: Framework de sesiones</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/Authentication">Tutorial de Django Parte 8: Autenticación de usuarios y permisos</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajando con formularios</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/Testing">Tutorial de Django Parte 10: Probando una aplicación web de Django</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/Deployment">Tutorial de Django Parte 11: Poniendo Django en producción</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/web_application_security">Seguridad en aplicaciones web Django</a></li>
- <li><a href="/es/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
-</ul>