initial commit

2 files changed, 138 insertions, 0 deletions

diff --git a/files/es/web/guide/css/block_formatting_context/index.html b/files/es/web/guide/css/block_formatting_context/index.html
new file mode 100644
index 0000000000..a3edd4220f
--- /dev/null
+++ b/files/es/web/guide/css/block_formatting_context/index.html
@@ -0,0 +1,45 @@
+---
+title: Contexto de formato de bloque
+slug: Web/Guide/CSS/Block_formatting_context
+tags:
+  - CSS
+  - Guía
+  - Necesita ejemplos
+  - Referencia
+  - Web
+translation_of: Web/Guide/CSS/Block_formatting_context
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>Un <strong>contexto de formato de bloque</strong> es parte del renderizado CSS visual de una página web. Es la región en que ocurre la disposición de las cajas de bloque y en la cuál los elementos flotantes interactúan los unos con los otros.</p>
+
+<p>Un contexto de formato de bloque es creado por uno de los siguientes casos:</p>
+
+<ul>
+ <li>El elemento raiz o algo que lo contiene</li>
+ <li>flotantes (elementos donde {{ cssxref("float") }} es diferente de none)</li>
+ <li>elementos con posición absoluta (elementos donde {{ cssxref("position") }} es absolute o fixed)</li>
+ <li>bloques en línea (elementos con {{ cssxref("display") }}<code>: inline-block</code>)</li>
+ <li>Celdas de tabla (elementos con {{ cssxref("display") }}<code>: table-cell</code>, que es la propiedad por defecto de las celdas de una tabla HTML)</li>
+ <li>subtítulos de tabla (elementos con {{ cssxref("display") }}<code>: table-caption</code>, que es la propiedad por defecto de los subtítulos de tablas HTML)</li>
+ <li>elementos donde {{ cssxref("overflow") }} tiene un valor distinto a <code>visible</code></li>
+ <li>cajas flexibles (elementos con {{ cssxref("display") }}<code>: flex</code> or <code>inline-flex</code>)</li>
+</ul>
+
+<p>Un contexto de formato de bloque contiene todo dentro del elemento que lo crea que, al mismo tiempo, no se encuentra dentro de un elemento descendiente que crea un nuevo contexto de formato de bloque.</p>
+
+<p>Los contextos de formato de bloque son importantes para el posicionamiento (revisa {{ cssxref("float") }} y {{ cssxref("clear") }}) de flotantes. Las reglas para el posicionamiento y limpiado de flotantes aplican solo a elementos dentro del mismo contexto de formato de bloque. Los flotantes no afectan la disposición de los elementos en otros contexto de formato de bloque, y clear solo limpia flotantes pasados en el mismo contexto de formato de bloque.</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#block-formatting">CSS 2.1</a></li>
+</ul>
+
+<h2 id="See_Also" name="See_Also">También puedes ver</h2>
+
+<ul>
+ <li>{{ cssxref("float") }}, {{ cssxref("clear") }}</li>
+</ul>
diff --git a/files/es/web/guide/css/probando_media_queries/index.html b/files/es/web/guide/css/probando_media_queries/index.html
new file mode 100644
index 0000000000..dac4330054
--- /dev/null
+++ b/files/es/web/guide/css/probando_media_queries/index.html
@@ -0,0 +1,93 @@
+---
+title: Probando media queries
+slug: Web/Guide/CSS/probando_media_queries
+translation_of: Web/CSS/Media_Queries/Testing_media_queries
+---
+<p>{{SeeCompatTable}}</p>
+<p>El DOM proporciona características que hacen posible probar los resultados de un media query estructuradamente. Esto es hecho usando la interfaz {{domxref("MediaQueryList") }} y sus métodos y propiedades. Una vez que hayas creado el objeto {{domxref("MediaQueryList") }}, puedes revisar el resultado del query o, como alternativa, recibir notificaciones automáticamente cuando el resultado cambie.</p>
+<h2 id="Creating_a_media_query_list" name="Creating_a_media_query_list">Creando una media query list</h2>
+<p>Before you can evaluate the results of a query, you need to create the {{domxref("MediaQueryList") }} object representing the media query. To do this, use the {{domxref("window.matchMedia") }} method.</p>
+<p>For example, if you want to set up a query list that determines whether the device is in landscape or portrait orientation, you can do so like this:</p>
+<pre>var mql = window.matchMedia("(orientation: portrait)");
+</pre>
+<h2 id="Checking_the_result_of_a_query" name="Checking_the_result_of_a_query">Revisando el resultado de un query</h2>
+<p>Once your media query list has been created, you can check the result of the query by looking at the value of its <code>matches</code> property, which reflects the result of the query:</p>
+<pre class="brush: js">if (mql.matches) {
+  /* The device is currently in portrait orientation */
+} else {
+  /* The device is currently in landscape orientation */
+}
+</pre>
+<h2 id="Receiving_query_notifications" name="Receiving_query_notifications">Recibiendo notificaciones query</h2>
+<p>If you need to be aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a listener than to poll the query's result. To do this, you can call the <code>addListener()</code> method on the {{domxref("MediaQueryList") }} object, specifying an observer that implements the {{domxref("MediaQueryListListener") }} interface:</p>
+<pre class="brush: js">var mql = window.matchMedia("(orientation: portrait)");
+mql.addListener(handleOrientationChange);
+handleOrientationChange(mql);
+</pre>
+<p>This code creates the orientation testing media query list, <code>mql</code>, then adds a listener to it. Note that after adding the listener, we actually invoke the listener directly once. This lets our listener perform initial adjustments based on the current device orientation (otherwise, if our code assumes the device is in portrait mode but it's actually in landscape mode at startup, we could have inconsistencies).</p>
+<p>The <code>handleOrientationChange()</code> method we implement then would look at the result of the query and handle whatever we need to do on an orientation change:</p>
+<pre class="brush: js">function handleOrientationChange(mql) {
+  if (mql.matches) {
+    /* The device is currently in portrait orientation */
+  } else {
+    /* The device is currently in landscape orientation */
+  }
+}
+</pre>
+<h2 id="Ending_query_notifications" name="Ending_query_notifications">Terminando con las notificaciones query </h2>
+<p>Cuando ya no vayas a necesitar recibir las notificaciones sobre los cambios de valro de tu media query, simplemente llama al <code>removeListener()</code> en el {{domxref("MediaQueryList") }}:</p>
+<pre>mql.removeListener(handleOrientationChange);
+</pre>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con los navegadores</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Soporte básico</td>
+    <td>9</td>
+    <td>{{CompatGeckoDesktop("6.0") }}</td>
+    <td>10</td>
+    <td>12.1</td>
+    <td>5.1</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Soporte básico</td>
+    <td>3.0</td>
+    <td>{{CompatUnknown}}</td>
+    <td>10</td>
+    <td>12.1</td>
+    <td>5</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also" name="See_also">Ver también</h2>
+<ul>
+ <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li>
+ <li>{{domxref("window.matchMedia()") }}</li>
+ <li>{{domxref("MediaQueryList") }}</li>
+ <li>{{domxref("MediaQueryListListener") }}</li>
+</ul>