1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
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>
|
