aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/css/at-rule/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/es/web/css/at-rule/index.html')
-rw-r--r--files/es/web/css/at-rule/index.html73
1 files changed, 73 insertions, 0 deletions
diff --git a/files/es/web/css/at-rule/index.html b/files/es/web/css/at-rule/index.html
new file mode 100644
index 0000000000..58620af629
--- /dev/null
+++ b/files/es/web/css/at-rule/index.html
@@ -0,0 +1,73 @@
+---
+title: Regla-At
+slug: Web/CSS/At-rule
+translation_of: Web/CSS/At-rule
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary">Una <strong>regla-at</strong> es una <a href="/en-US/docs/Web/CSS/Syntax#CSS_statements">declaración CSS</a> que comienza con el símbolo arroba, '@' (U+0040 COMMERCIAL AT), seguido por un identificador, e incluye todo el contenido hasta el siguiente punto y coma, ';' (U+003B SEMICOLON), o el siguiente <a href="/en-US/docs/Web/CSS/Syntax#CSS_declarations_blocks">bloque CSS</a>, lo que sea primero.</span></p>
+
+<p>Hay varias reglas-at, designadas por sus identificadores, cada una con sintaxis distinta:</p>
+
+<ul>
+ <li>{{cssxref("@charset")}} — Define el conjunto de caracteres usado por la hoja de estilos.</li>
+ <li>{{cssxref("@import")}} — Indica al motor de CSS que incluya una hoja de estilos externa.</li>
+ <li>{{cssxref("@namespace")}} — Indica al motor de CSS que todo el contenido usa como prefijo un espacio de nombres XML.</li>
+ <li><strong><em>Reglas-at anidadas</em></strong> — Un subconjunto de declaraciones anidadas, que pueden ser usadas como declaraciones de estilos, así como grupos de reglas condicionadas internas:
+ <ul>
+ <li>{{cssxref("@media")}} — Un grupo de reglas condicional que aplicará su contenido si el dispositivo cumple los criterios de las condiciones definidas usando un <em>media query</em>.</li>
+ <li>{{cssxref("@supports")}} {{experimental_inline}} — Un grupo de reglas condicional que aplicará su contenido si el navegador cumple los criterios de la condición dada.</li>
+ <li>{{cssxref("@document")}} {{experimental_inline}} — Un grupo de reglas condicionadas que aplicará su contenido si el documento donde se aplica la hoja de estilos cumple los criterios de la condición dada. <em>(diferida al Nivel 4 de la Especificación CSS)</em></li>
+ <li>{{cssxref("@page")}} — Describe los cambios en la disposición de la página que serán aplicados al imprimir el documento.</li>
+ <li>{{cssxref("@font-face")}} — Describe la configuración de fuentes externas que se descargarán.</li>
+ <li>{{cssxref("@keyframes")}} {{experimental_inline}} — Describe la configuración de pasos intermedios en una secuencia de animación CSS.</li>
+ <li>{{cssxref("@viewport")}} {{experimental_inline}} — Describe los aspectos del viewport para dispositivos de pantalla pequeña. <em>(actualmente en Borrador)</em></li>
+ <li>{{cssxref("@counter-style")}} — Define estilos de contador específicos que no son parte de los conjuntos de estilos predeterminados. <em>(en estado de Recomendación Candidata, pero sólo implementada en Gekko al momento de esta publicación)</em></li>
+ <li>{{cssxref("@font-feature-values")}} (junto con <code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code> y <code>@character-variant</code>)<br>
+ — Define nombres comunes para la propiedad {{cssxref("font-variant-alternates")}}. <em>(en estado de Recomendación Candidata, pero sólo implementada en Gekko al momento de esta publicación)</em></li>
+ </ul>
+ </li>
+</ul>
+
+<h2 id="Grupos_de_Reglas_Condicionales">Grupos de Reglas Condicionales</h2>
+
+<p>Así como los valores de las propiedades, cada regla-at tiene sintaxis propia. Sin embargo, muchas de esas reglas pueden ser agrupadas en categorías especiales, llamadas <strong>conditional group rules</strong>. Estas declaraciones comparten sintáxis común y cada una puede incluir <em>nested statements</em>—ya sean <em>conjuntos de reglas</em> o <em>reglas-at anidadas</em>. Además, pueden transmitir un significado semántico común—todas incluyen algun tipo de condición, que devuelve un resultado que puede ser <strong>verdadero</strong> o <strong>falso</strong>. Si el valor de la condición resulta <strong>verdadero</strong>, todas las declaraciones del grupo serán aplicadas.</p>
+
+<p>Los grupos de reglas condicionales están definidos en <a href="http://dev.w3.org/csswg/css3-conditional/">CSS Conditionals Level 3</a> y son:</p>
+
+<ul>
+ <li>{{cssxref("@media")}},</li>
+ <li>{{cssxref("@supports")}},</li>
+ <li>{{cssxref("@document")}}. <em>(diferida al Nivel 4 de la Especificación CSS) </em></li>
+</ul>
+
+<p>Como cada grupo de condición puede incluir también declaraciones anidadas, puede haber un número de anidaciones ilimitado.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Especificatión</th>
+ <th scope="col">Estado</th>
+ <th scope="col">Comentarios</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS3 Conditional')}}</td>
+ <td>{{Spec2('CSS3 Conditional')}}</td>
+ <td>Definición inicial</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td>
+ <td>{{Spec2('Compat')}}</td>
+ <td><code>@-webkit-keyframes estandarizado</code>.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Reference">CSS Reference</a></li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>