diff options
Diffstat (limited to 'files/es/web/css')
| -rw-r--r-- | files/es/web/css/@document/index.html | 82 | ||||
| -rw-r--r-- | files/es/web/css/background-position-x/index.html | 126 | ||||
| -rw-r--r-- | files/es/web/css/border-radius/index.html | 320 | ||||
| -rw-r--r-- | files/es/web/css/cascade/index.html | 202 | ||||
| -rw-r--r-- | files/es/web/css/clip-path/index.html | 179 | ||||
| -rw-r--r-- | files/es/web/css/media_queries/testing_media_queries/index.html | 94 |
6 files changed, 0 insertions, 1003 deletions
diff --git a/files/es/web/css/@document/index.html b/files/es/web/css/@document/index.html deleted file mode 100644 index 8c1ead6ac3..0000000000 --- a/files/es/web/css/@document/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: '@document' -slug: Web/CSS/@document -translation_of: Web/CSS/@document ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p>The <strong><code>@document</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/At-rule">at-rule</a> restricts the style rules contained within it based on the URL of the document. It is designed primarily for user-defined style sheets, though it can be used on author-defined style sheets, too.</p> - -<pre class="brush: css no-line-numbers">@document url("https://www.example.com/") { - h1 { - color: green; - } -} -</pre> - -<ul> -</ul> - -<h2 id="Syntax">Syntax</h2> - - - -<p>Una regla @document puede especificar una o más funciones coincidentes. Si alguna de las funciones se aplica a una URL determinada, la regla tendrá efecto en esa URL. Las funciones disponibles son:</p> - -<ul> - <li><code>url()</code>, which matches an exact URL.</li> - <li><code>url-prefix()</code>, which matches if the document URL starts with the value provided.</li> - <li><code>domain()</code>, which matches if the document URL is on the domain provided (or a subdomain of it).</li> - <li><code>regexp()</code>, which matches if the document URL is matched by the <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expression</a> provided. The expression must match the entire URL.</li> -</ul> - -<p>The values provided to the <code>url()</code>, <code>url-prefix()</code>, and <code>domain()</code> functions can be optionally enclosed by single or double quotes. The values provided to the <code>regexp()</code> function <em>must</em> be enclosed in quotes.</p> - -<p>Escaped values provided to the <code>regexp()</code> function must additionally be escaped from the CSS. For example, a <code>.</code> (period) matches any character in regular expressions. To match a literal period, you would first need to escape it using regular expression rules (to <code>\.</code>), then escape that string using CSS rules (to <code>\\.</code>).</p> - -<div class="note"> -<p><strong>Note</strong>: There is a -moz-prefixed version of this property — <code>@-moz-document</code>. This has been limited to use only in user and UA sheets in Firefox 59 in Nightly and Beta — an experiment designed to mitigate potential CSS injection attacks ({{bug(1035091)}}).</p> -</div> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Example">Example</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">@document url(http://www.w3.org/), - url-prefix(http://www.w3.org/Style/), - domain(mozilla.org), - regexp("https:.*") { - /* CSS rules here apply to: - - The page "http://www.w3.org/" - - Any page whose URL begins with "http://www.w3.org/Style/" - - Any page whose URL's host is "mozilla.org" - or ends with ".mozilla.org" - - Any page whose URL starts with "https:" */ - - /* Make the above-mentioned pages really ugly */ - body { - color: purple; - background: yellow; - } -} -</pre> - -<h2 id="Specifications">Specifications</h2> - -<p><a href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document">Initially</a> in {{SpecName('CSS3 Conditional')}}, <code>@document</code> has been <a href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes">postponed</a> to Level 4.</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("css.at-rules.document")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="external" href="http://lists.w3.org/Archives/Public/www-style/2004Aug/0135">Per-site user style sheet rules</a> on the www-style mailing list.</li> -</ul> diff --git a/files/es/web/css/background-position-x/index.html b/files/es/web/css/background-position-x/index.html deleted file mode 100644 index 16f74f3cb7..0000000000 --- a/files/es/web/css/background-position-x/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: background-position-x -slug: Web/CSS/background-position-x -translation_of: Web/CSS/background-position-x ---- -<div>{{CSSRef}}</div> - -<p>El <strong><code>background-position-x</code></strong> propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> coloca la posicion horizontal inicial por cada imagen de fondo. La posicion es relativa a la posicion de la capa puesta por {{cssxref("background-origin")}}.</p> - -<div>{{EmbedInteractiveExample("pages/css/background-position-x.html")}}</div> - -<p class="hidden">El recurso para este ejemplo interactivo es almacenado en un repositorio GitHub. Si te gustaría contrubuir al proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envianos una solicitud.</p> - -<p>The value of this property is overridden by any declaration of the {{cssxref("background")}} or {{cssxref("background-position")}} shorthand properties applied to the element after it.</p> - -<h2 id="Syntax" name="Syntax">Syntax</h2> - -<pre class="brush: css no-line-numbers notranslate">/* Keyword values */ -background-position-x: left; -background-position-x: center; -background-position-x: right; - -/* <percentage> values */ -background-position-x: 25%; - -/* <length> values */ -background-position-x: 0px; -background-position-x: 1cm; -background-position-x: 8em; - -/* Side-relative values */ -background-position-x: right 3px; -background-position-x: left 25%; - -/* Multiple values */ -background-position-x: 0px, center; - -/* Global values */ -background-position-x: inherit; -background-position-x: initial; -background-position-x: unset; -</pre> - -<p>The <code>background-position-x</code> property is specified as one or more values, separated by commas.</p> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code>left</code></dt> - <dd>Aligns the left edge of the background image with the left edge of the background position layer.</dd> - <dt><code>center</code></dt> - <dd>Aligns the center of the background image with the center of the background position layer.</dd> - <dt><code>right</code></dt> - <dd>Aligns the right edge of the background image with the right edge of the background position layer.</dd> - <dt>{{cssxref("<length>")}}</dt> - <dd>The offset of the given background image's left vertical edge from the background position layer's left vertical edge. (Some browsers allow assigning the right edge for offset).</dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>The offset of the given background image's horizontal position relative to the container. A value of 0% means that the left edge of the background image is aligned with the left edge of the container, and a value of 100% means that the <em>right</em> edge of the background image is aligned with the <em>right</em> edge of the container, thus a value of 50% horizontally centers the background image.</dd> -</dl> - -<h2 id="Formal_definition">Formal definition</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax">Formal syntax</h2> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<h3 id="Basic_example">Basic example</h3> - -<p>The following example shows a simple background image implementation, with background-position-x and background-position-y used to define the image's horizontal and vertical positions separately.</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><div></div></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">div { - width: 300px; - height: 300px; - background-color: skyblue; - background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); - background-repeat: no-repeat; - background-position-x: center; - background-position-y: bottom 10px; -}</pre> - -<h4 id="Result">Result</h4> - -<p>{{EmbedLiveSample('Basic_example', '100%', 300)}}</p> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}}</td> - <td>{{Spec2('CSS4 Backgrounds')}}</td> - <td>Initial specification of longhand sub-properties of {{cssxref("background-position")}} to match longstanding implementations.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("css.properties.background-position-x")}}</p> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>{{cssxref("background-position")}}</li> - <li>{{cssxref("background-position-y")}}</li> - <li>{{cssxref("background-position-inline")}}</li> - <li>{{cssxref("background-position-block")}}</li> - <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Using multiple backgrounds</a></li> -</ul> diff --git a/files/es/web/css/border-radius/index.html b/files/es/web/css/border-radius/index.html deleted file mode 100644 index 39e3ab03d7..0000000000 --- a/files/es/web/css/border-radius/index.html +++ /dev/null @@ -1,320 +0,0 @@ ---- -title: border-radius -slug: Web/CSS/border-radius -tags: - - CSS - - CSS Borders - - CSS Property - - Reference -translation_of: Web/CSS/border-radius ---- -<p>{{ CSSRef() }}</p> - -<h2 id="Resumen">Resumen</h2> - -<p>La propiedad CSS <code>border-radius</code> permite a los desarrolladores Web definir qué tan redondeadas serán las esquinas. La redondez de cada esquina está definida usando uno o dos valores para el radio que define su forma dependiendo si es un círculo o una elipse.</p> - -<p><img alt="Images of CSS3 rounded corners: no rounding, rounding w/ an arc of circle, rounding w/ an arc of ellipse" class="default internal" src="/files/3638/border-radius-sh.png" style="height: 164px; width: 549px;"></p> - -<p>El radio se aplica a todo el {{ Cssxref("background") }}, aun si el elemento no tiene bordes; la posición exacta del recorte es definida por la propiedad {{ Cssxref("background-clip") }}.</p> - -<p>Esta propiedad es un <a href="/en/CSS/Shorthand_properties" title="en/CSS/Shorthand_properties">atajo</a> para establecer las cuatro propiedades {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }} y {{ Cssxref("border-bottom-left-radius") }}.</p> - -<div class="note">As with any shorthand property, individual inherited values are not possible, that is <code>border-radius:0 0 inherit inherit</code>, which would override existing definitions partially. In that case, the individual longhand properties have to be used.</div> - -<p>{{cssinfo}}</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="twopartsyntaxbox">Formal grammar: [ <var><length></var> | <var><percentage></var> ]{1,4} [ / [ <var><length></var> | <var><percentage></var> ]{1,4}] ? - \------------------------------/ \-------------------------------/ - First radii Second radii (optional) -</pre> - -<pre><strong>The syntax of the first radius allows one to four values:</strong> -border-radius: <em>radius</em> -border-radius: <em>top-left-and-bottom-right</em> <em>top-right-and-bottom-left</em> -border-radius: <em>top-left</em> <em>top-right-and-bottom-left</em> <em>bottom-right</em> -border-radius: <em>top-left</em> <em>top-right</em> <em>bottom-right</em> <em>bottom-left</em> - -<strong>The syntax of the second radius also allows one to four values</strong> -border-radius: (first radius values) / <em>radius</em> -border-radius: (first radius values) / <em>top-left-and-bottom-right</em> <em>top-right-and-bottom-left</em> -border-radius: (first radius values) / <em>top-left</em> <em>top-right-and-bottom-left</em> <em>bottom-right</em> -border-radius: (first radius values) / <em>top-left</em> <em>top-right</em> <em>bottom-right</em> <em>bottom-left</em> - -border-radius: inherit -</pre> - -<h3 id="Valores">Valores</h3> - -<table> - <tbody> - <tr> - <td style="vertical-align: top;"><em>radius</em></td> - <td><img alt="all-corner.png" class="default internal" src="/@api/deki/files/6138/=all-corner.png"></td> - <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>top-left-and-bottom-right</em></td> - <td><img alt="top-left-bottom-right.png" class="default internal" src="/@api/deki/files/6141/=top-left-bottom-right.png"></td> - <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-left and bottom-right corners of the element's box. It is used only in the two-value syntax.</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>top-right-and-bottom-left</em></td> - <td><img alt="top-right-bottom-left.png" class="default internal" src="/@api/deki/files/6143/=top-right-bottom-left.png"></td> - <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-right and bottom-left corners of the element's box. It is used only in the two- and three-value syntaxes.</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>top-left</em></td> - <td><img alt="top-left.png" class="default internal" src="/@api/deki/files/6142/=top-left.png"></td> - <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-left corner of the element's box. It is used only in the three- and four-value syntaxes.</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>top-right</em></td> - <td style="margin-left: 2px;"><img alt="top-right.png" class="default internal" src="/@api/deki/files/6144/=top-right.png"></td> - <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-right corner of the element's box. It is used only in the four-value syntax.</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>bottom-right</em></td> - <td style="margin-left: 2px;"><img alt="bottom-rigth.png" class="default internal" src="/@api/deki/files/6140/=bottom-rigth.png"></td> - <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the bottom-right corner of the element's box. It is used only in the three- and four-value syntaxes.</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>bottom-left</em></td> - <td><img alt="bottom-left.png" class="default internal" src="/@api/deki/files/6139/=bottom-left.png"></td> - <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the bottom-left corner of the element's box. It is used only in the four-value syntax.</td> - </tr> - <tr> - <td style="vertical-align: top;"><code>inherit</code></td> - <td> </td> - <td style="vertical-align: top;">Is a keyword indicating that all four values are inherited from their parent's element calculated value.</td> - </tr> - </tbody> -</table> - -<h3 id="Valores_2">Valores</h3> - -<dl> - <dt><length></dt> - <dd>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS {{cssxref("<length>")}} data types. Negative values are invalid.</dd> - <dt><percentage></dt> - <dd>Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.</dd> -</dl> - -<p>Por ejemplo:</p> - -<pre class="brush: css">border-radius: 1em/5em; - -/* es equivalente a: */ - -border-top-left-radius: 1em 5em; -border-top-right-radius: 1em 5em; -border-bottom-right-radius: 1em 5em; -border-bottom-left-radius: 1em 5em; -</pre> - -<pre class="brush: css">border-radius: 4px 3px 6px / 2px 4px; - -/* es equivalente a: */ - -border-top-left-radius: 4px 2px; -border-top-right-radius: 3px 4px; -border-bottom-right-radius: 6px 2px; -border-bottom-left-radius: 3px 4px; -</pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<pre style="display: inline-block; margin: 10px; border: solid 10px; border-radius: 10px 40px 40px 10px;"> border: solid 10px; - /* the border will curve into a 'D' */ - border-radius: 10px 40px 40px 10px; -</pre> - -<pre style="display: inline-block; margin: 10px; border: groove 1em red; border-radius: 2em;"> border: groove 1em red; - border-radius: 2em; -</pre> - -<pre style="display: inline-block; margin: 10px; background: gold; border: ridge gold; border-radius: 13em/3em;"> background: gold; - border: ridge gold; - border-radius: 13em/3em; -</pre> - -<pre style="display: inline-block; margin: 10px; background: gold; border: none; border-radius: 40px 10px;"> border: none; - border-radius: 40px 10px; -</pre> - -<pre style="display: inline-block; margin: 10px; background: black; color: white; border: none; border-radius: 50%;"> border: none; - border-radius: 50%; -</pre> - -<h2 id="Notas">Notas</h2> - -<ul> - <li>Dotted and dashed rounded border corners are rendered as solid in Gecko; see {{ bug("382721") }}.</li> - <li><code>border-radius</code> does not apply to table elements when {{ Cssxref("border-collapse") }} is <code>collapse</code>.</li> - <li>Old versions of WebKit handle multiple values differently, see below.</li> -</ul> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius') }}</td> - <td>{{ Spec2('CSS3 Backgrounds') }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatGeckoDesktop("2.0") }}<br> - {{ CompatGeckoDesktop("1.0") }}{{ property_prefix("-moz") }}</td> - <td>4.0<br> - 0.2{{ property_prefix("-webkit") }}</td> - <td>9.0</td> - <td>10.5</td> - <td>5.0<br> - 3.0{{ property_prefix("-webkit") }}</td> - </tr> - <tr> - <td>Elliptical borders</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>yes</td> - <td>yes</td> - <td>yes</td> - <td>yes, but see below</td> - </tr> - <tr> - <td>4 values for 4 corners</td> - <td>yes</td> - <td>4.0</td> - <td>yes</td> - <td>yes</td> - <td>5.0</td> - </tr> - <tr> - <td>Percentages</td> - <td>yes<br> - was {{ non-standard_inline() }} (see below)</td> - <td>yes</td> - <td>yes</td> - <td>11.5</td> - <td>5.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>iOS Safari</th> - <th>Opera Mini</th> - <th>Opera Mobile</th> - <th>Android Browser</th> - </tr> - <tr> - <td>Basic support</td> - <td>3.2{{ property_prefix("-webkit") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>2.1{{ property_prefix("-webkit") }}</td> - </tr> - <tr> - <td>Elliptical borders</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>4 values for 4 corners</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>Percentages</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h3 id="<percentage>_values"><code><percentage></code> values</h3> - -<ul> - <li>are not supported in older Chrome and Safari versions (it was <a class="external" href="http://trac.webkit.org/changeset/66615">fixed in Sepember 2010</a>)</li> - <li>are buggy in Opera prior to 11.50</li> - <li>are implemented in a non-standard way prior to Gecko 2.0 (Firefox 4). <strong>Both</strong> horizontal and vertical radii were relative to the width of the border box.</li> - <li>are not supported in older versions of iOS (prior to 5) and Android versions (prior to WebKit 532)</li> -</ul> - -<h3 id="Gecko_notes">Gecko notes</h3> - -<p>In Gecko 2.0 <code>-moz-border-radius</code> was renamed to <code>border-radius</code>; <code>-moz-border-radius</code> was supported as an alias until Gecko 12.0. In order to conform to the CSS3 standard, Gecko 2.0</p> - -<ul> - <li>changes the handling of {{cssxref("<percentage>")}} values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with <code>border-radius: 50%;</code></li> - <li>makes rounded corners clip content and images (if {{ cssxref("overflow") }}<code>: visible</code> is not set)</li> -</ul> - -<div class="note"><strong>Note:</strong> Support for the prefixed version (<code>-moz-border-radius</code>) was removed in Gecko 13.0 {{ geckoRelease("13.0") }}.</div> - -<h3 id="WebKit_notes">WebKit notes</h3> - -<p>Older Safari and Chrome versions (prior to WebKit 532.5)</p> - -<ul> - <li>support only <strong>one</strong> value for all 4 corners. For different radii the <a href="/en/CSS/border-top-left-radius#Examples" title="en/CSS/border-top-left-radius#Examples">long form properties</a> must be used</li> - <li>don't support the slash <code>/</code> notation. If two values are specified, an elliptical border is drawn on all 4 corners - <pre>/* this is equivalent: */ - --webkit-border-radius: 40px 10px; - border-radius: 40px/10px; -</pre> - </li> -</ul> - -<h3 id="Opera_notes">Opera notes</h3> - -<p>In Opera (prior to Opera 11.60), applying <code>border-radius</code> to replaced elements will not have rounded corners.</p> - -<h2 id="Vea_también">Vea también</h2> - -<ul> - <li>Border-radius-related CSS properties: {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }}, {{ Cssxref("border-bottom-left-radius") }}</li> -</ul> - -<p>{{ languages( { "de": "de/CSS/border-radius", "fr": "fr/CSS/-moz-border-radius", "ja": "ja/CSS/border-radius", "pl": "pl/CSS/-moz-border-radius" } ) }}</p> diff --git a/files/es/web/css/cascade/index.html b/files/es/web/css/cascade/index.html deleted file mode 100644 index 87b99bd61c..0000000000 --- a/files/es/web/css/cascade/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: Introducción a CSS en cascada -slug: Web/CSS/Cascade -translation_of: Web/CSS/Cascade ---- -<div>{{CSSRef}}</div> - -<div>La <strong>cascada</strong> es un algoritmo que define como combinar valores de propiedad originarios de diferentes fuentes. Este se encuentra en el núcleo de CSS, como enfatizafo por el nombre: <em>Hojas de Estilo en Cascada</em>. Este articulo explica que es cascada, el orden de las <span class="seoSummary">{{Glossary("CSS")}} </span><a href="/en-US/docs/Web/API/CSSStyleDeclaration">declaraciones</a> en cascada, y como esto te afecta, el desarrollador web.</div> - -<h2 id="¿Cuáles_entidades_CSS_participan_en_la_cascada">¿Cuáles entidades CSS participan en la cascada?</h2> - -<p>Solo las declaraciones CSS, es decir pares de propiedad/valor, participan en la cascada. Esto significa que las <a href="/es/docs/Web/CSS/At-rule">at-rules</a> que contienen entidades distintas de las declaraciones, como una regla <code>@font-face</code> que contiene <em>descriptores</em>, no participan en la cascada. En estos casos, solo la regla-at en su conjunto participa en la cascada: aquí, la <code>@font-face</code> identificada por su descriptor de familia de tipografías. Si se definen varias reglas <code>@font-face</code> con el mismo descriptor, solo se considera la <code>@font-face</code>, como conjunto, más adecuada. </p> - -<p>Mientras que las declaraciones contenidas en la mayoría de las reglas-at -como aquellas en <code>@media</code>, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@document</span></font> o <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@support</span></font> - participan en la cascada, las declaraciones contenidas en <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@keyframes</span></font> no. Como con <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@font-face</span></font>, solo la regla-at en su conjunto se selecciona a través del algoritmo en cascada.</p> - -<p>Finalmente, debemos tener en cuenta que {{cssxref ("@ import")}} y {{cssxref ("@ charset")}} obedecen a algoritmos específicos y no se ven afectados por el algoritmo en cascada.</p> - -<h2 id="Origin_of_CSS_declarations">Origin of CSS declarations</h2> - -<p>The CSS cascade algorithm's job is to select CSS declarations in order to determine the correct values for CSS properties. CSS declarations originate from different origins: the <strong>{{anch("User-agent stylesheets")}}</strong>, the <strong>{{anch("Author stylesheets")}}</strong>, and the <strong>{{anch("User stylesheets")}}</strong>.</p> - -<p>Though style sheets come from these different origins, they overlap in scope; to make this work, the cascade algorithm defines how they interact.</p> - -<h3 id="User-agent_stylesheets">User-agent stylesheets</h3> - -<p>The browser has a basic style sheet that gives a default style to any document. These style sheets are named <strong>user-agent stylesheets</strong>. Some browsers use actual style sheets for this purpose, while others simulate them in code, but the end result is the same.</p> - -<p>Some browsers let users modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To simplify the development process, Web developers often use a CSS reset style sheet, forcing common properties values to a known state before beginning to make alterations to suit their specific needs.</p> - -<h3 id="Author_stylesheets">Author stylesheets</h3> - -<p><strong>Author stylesheets</strong> are the most common type of style sheet. These are style sheets that define styles as part of the design of a given web page or site. The author of the page defines the styles for the document using one or more stylesheets, which define the look and feel of the website — its theme.</p> - -<h3 id="User_stylesheets">User stylesheets</h3> - -<p>The user (or reader) of the web site can choose to override styles in many browsers using a custom <strong>user stylesheet</strong> designed to tailor the experience to the user's wishes.</p> - -<h2 id="Cascading_order">Cascading order</h2> - -<p>The cascading algorithm determines how to find the value to apply for each property for each document element.</p> - -<ol> - <li>It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.</li> - <li>Then it sorts these rules according to their importance, that is, whether or not they are followed by <code>!important</code>, and by their origin. The cascade is in ascending order, which means that <code>!important</code> values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet: - <table class="standard-table"> - <thead> - <tr> - <th scope="col"></th> - <th scope="col">Origin</th> - <th scope="col">Importance</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>user agent</td> - <td>normal</td> - </tr> - <tr> - <td>2</td> - <td>user</td> - <td>normal</td> - </tr> - <tr> - <td>3</td> - <td>author</td> - <td>normal</td> - </tr> - <tr> - <td>4</td> - <td>animations</td> - <td></td> - </tr> - <tr> - <td>5</td> - <td>author</td> - <td><code>!important</code></td> - </tr> - <tr> - <td>6</td> - <td>user</td> - <td><code>!important</code></td> - </tr> - <tr> - <td>7</td> - <td>user agent</td> - <td><code>!important</code></td> - </tr> - <tr> - <td>8</td> - <td>transitions</td> - <td></td> - </tr> - </tbody> - </table> - </li> - <li>In case of equality, the <a href="/en-US/docs/Web/CSS/Specificity" title="/en-US/docs/Web/CSSSpecificity">specificity</a> of a value is considered to choose one or the other.</li> -</ol> - -<h2 id="Resetting_styles">Resetting styles</h2> - -<p>After your content has finished altering styles, it may find itself in a situation where it needs to restore them to a known state. This may happen in cases of animations, theme changes, and so forth. The CSS property {{cssxref("all")}} lets you quickly set (almost) everything in CSS back to a known state.</p> - -<p><code>all</code> lets you opt to immediately restore all properties to any of their initial (default) state, the state inherited from the previous level of the cascade, a specific origin (the user-agent stylesheet, the author stylesheet, or the user stylesheet), or even to clear the values of the properties entirely.</p> - -<h2 id="CSS_animations_and_the_cascade">CSS animations and the cascade</h2> - -<p><a href="/en-US/docs/Web/CSSUsing_CSS_animations" title="/en-US/docs/Web/CSSUsing_CSS_animations">CSS animations</a>, using {{ cssxref("@keyframes")}} at-rules, define animations between states. Keyframes don't cascade, meaning that at any given time CSS takes values from only one single {{cssxref("@keyframes")}}, and never mixes multiple ones together.</p> - -<p>When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.</p> - -<h2 id="Example">Example</h2> - -<p>Let's look at an example involving multiple sources of CSS across the various origins; here we have a user agent style sheet, two author style sheets, a user stylesheet, and inline styles within the HTML:</p> - -<p><strong>User-agent CSS:</strong></p> - -<pre class="brush:css;">li { margin-left: 10px }</pre> - -<p><strong class="brush:css;">Author CSS 1:</strong></p> - -<pre class="brush:css;">li { margin-left: 0 } /* This is a reset */</pre> - -<p><strong class="brush:css;">Author CSS 2:</strong></p> - -<pre class="brush:css;">@media screen { - li { margin-left: 3px } -} - -@media print { - li { margin-left: 1px } -} -</pre> - -<p><strong class="brush:css;">User CSS:</strong></p> - -<pre class="brush:css;">.specific { margin-left: 1em }</pre> - -<p><strong>HTML:</strong></p> - -<pre class="brush:html;"><ul> - <li class="specific">1<sup>st</sup></li> - <li>2<sup>nd</sup></li> -</ul> -</pre> - -<p>In this case, declarations inside <code>li</code> and <code>.specific</code> rules should apply. No declaration is marked as <code>!important</code>, so the precedence order is author style sheets before user style sheets or user-agent stylesheet.</p> - -<p>So three declarations are in competition:</p> - -<pre class="brush:css;">margin-left: 0</pre> - -<pre class="brush:css;">margin-left: 3px</pre> - -<pre class="brush:css;">margin-left: 1px</pre> - -<p>The last one is ignored (on a screen), and the first two have the same selector, hence the same specificity. Therefore, it is the last one that is then selected:</p> - -<pre class="brush:css;">margin-left: 3px</pre> - -<p>Note that the declaration defined in the user CSS, though having a greater specificity, is not chosen as the cascade algorithm is applied before the specificity algorithm.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS4 Cascade")}}</td> - <td>{{Spec2("CSS4 Cascade")}}</td> - <td>Added the {{CSSxRef("revert")}} keyword, which allows rolling a property back a cascade level.</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Cascade")}}</td> - <td>{{Spec2("CSS3 Cascade")}}</td> - <td>Removed the override cascade origin, as it was never used in a W3C standard.</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "cascade.html", "the cascade")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("CSS1", "#the-cascade", "the cascade")}}</td> - <td>{{Spec2("CSS1")}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">A very simple introduction to the CSS cascade</a></li> - <li>{{CSS_Key_Concepts}}</li> -</ul> diff --git a/files/es/web/css/clip-path/index.html b/files/es/web/css/clip-path/index.html deleted file mode 100644 index a8b5253601..0000000000 --- a/files/es/web/css/clip-path/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: clip-path -slug: Web/CSS/clip-path -translation_of: Web/CSS/clip-path ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p>La propiedad CSS <code><strong>clip-path</strong></code> proviene que una porción de un elemento se muestre definiendo una región de recorte para mostrarse, es decir, solo una parte especifica del elemento se mostrara. La región recortada es un path especificado como una URL referenciando a un SVG inline o externo, o un metodo de figura como lo es <a href="/en-US/docs/Web/SVG/Element/circle">circle()</a>. La propiedad clip-path reemplaza la ahora deprecada propiedad <a href="/en-US/docs/Web/CSS/clip">clip</a>.</p> - -<pre class="brush:css no-line-numbers">/* Valores clave */ -clip-path: none; - -/* Valores de imagen */ -clip-path: url(resources.svg#c1); - -/* Valores de caja */ -clip-path: fill-box; -clip-path: stroke-box; -clip-path: view-box; -clip-path: margin-box; -clip-path: border-box; -clip-path: padding-box; -clip-path: content-box; - -/* Valores geometricos */ -clip-path: inset(100px 50px); -clip-path: circle(50px at 0 100px); -clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); - -/* Valores Geometricos y de caja combinados */ -clip-path: padding-box circle(50px at 0 100px); - -/* Valores globales */ -clip-path: inherit; -clip-path: initial; -clip-path: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax">Syntax</h2> - -<h3 id="Valores">Valores</h3> - -<dl> - <dt><code>url()</code></dt> - <dd>Represents a URL referencing a clip path element.</dd> - <dt> </dt> - <dt><code>inset()</code>, <code>circle()</code>, <code>ellipse()</code>, <code>polygon()</code></dt> - <dd>A {{cssxref("<basic-shape>")}} function. Such a shape will make use of the specified <code><geometry-box></code> to size and position the basic shape. If no geometry box is specified, the <code>border-box</code> will be used as reference box.</dd> - <dt><code><geometry-box></code></dt> - <dd>If specified in combination with a <code><basic-shape></code>, it provides the reference box for the basic shape. If specified by itself, it uses the edges of the specified box including any corner shaping (e.g. defined by {{cssxref("border-radius")}}) as clipping path. The geometry box can be one of the following values: - <dl> - <dt><code>fill-box</code></dt> - <dd>Uses the object bounding box as reference box.</dd> - <dt><code>stroke-box</code></dt> - <dd>Uses the stroke bounding box as reference box.</dd> - <dt><code>view-box</code></dt> - <dd>Uses the nearest SVG viewport as reference box. If a {{SVGAttr("viewBox")}} attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the <code>viewBox</code> attribute and the dimension of the reference box is set to the width and height values of the <code>viewBox</code> attribute.</dd> - <dt><code>margin-box</code></dt> - <dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">margin box</a> as the reference box.</dd> - <dt><code>border-box</code></dt> - <dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">border box</a> as the reference box.</dd> - <dt><code>padding-box</code></dt> - <dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">padding box</a> as the reference box.</dd> - <dt><code>content-box</code></dt> - <dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">content box</a> as the reference box.</dd> - </dl> - </dd> - <dt><code>none</code></dt> - <dd>There is no clipping path created.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<pre class="brush:css">/* inline SVG */ -.target { - clip-path: url(#c1); -} - -/* external SVG */ -.anothertarget { - clip-path: url(resources.svg#c1); -} - -/* circle */ -.circleClass { - clip-path: circle(15px at 20px 20px); -}</pre> - -<h2 id="Live_sample">Live sample</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg" - alt="MDN logo"> -<svg height="0" width="0"> - <defs> - <clipPath id="cross"> - <rect y="110" x="137" width="90" height="90"/> - <rect x="0" y="110" width="90" height="90"/> - <rect x="137" y="0" width="90" height="90"/> - <rect x="0" y="0" width="90" height="90"/> - </clipPath> - </defs> -</svg> - -<select id="clipPath"> - <option value="none">none</option> - <option value="circle(100px at 110px 100px)">circle</option> - <option value="url(#cross)" selected>cross</option> - <option value="inset(20px round 20px)">inset</option> -</select> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">#clipped { - margin-bottom: 20px; - clip-path: url(#cross); -} -</pre> - -<div class="hidden"> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var clipPathSelect = document.getElementById("clipPath"); -clipPathSelect.addEventListener("change", function (evt) { - document.getElementById("clipped").style.clipPath = evt.target.value; -}); -</pre> -</div> - -<h3 id="Result">Result</h3> - -<p>{{EmbedLiveSample("Live_sample", 230, 250)}}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}</td> - <td>{{Spec2('CSS Masks')}}</td> - <td>Extends its application to HTML elements</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Initial definition (applies to SVG elements only)</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("css.properties.clip-path")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/SVG/Attribute/clip-rule">clip-rule</a>, {{cssxref("mask")}}, {{cssxref("filter")}}</li> - <li><a href="https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/">CSS Shapes, clipping and masking – and how to use them</a></li> - <li><a href="/en-US/docs/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></li> - <li>{{SVGAttr("clip-path")}} SVG attribute</li> -</ul> diff --git a/files/es/web/css/media_queries/testing_media_queries/index.html b/files/es/web/css/media_queries/testing_media_queries/index.html deleted file mode 100644 index 81f1e41608..0000000000 --- a/files/es/web/css/media_queries/testing_media_queries/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Probando media queries -slug: Web/CSS/Media_Queries/Testing_media_queries -translation_of: Web/CSS/Media_Queries/Testing_media_queries -original_slug: Web/Guide/CSS/probando_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> |