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
74
75
76
77
78
79
80
81
82
83
|
---
title: Regra "At"
slug: Web/CSS/At-rule
tags:
- AT
- CSS
- Referencia
- Regra
translation_of: Web/CSS/At-rule
---
<div>{{cssref}}</div>
<p><span class="seoSummary">Uma <strong>regra "at"</strong> is a <a href="/en-US/docs/Web/CSS/Syntax#CSS_statements">CSS statement</a> beginning with an at sign, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), followed by an identifier and includes everything up to the next semi-colon, '<code>;</code>' (<code>U+003B SEMICOLON</code>), or the next <a href="/en-US/docs/Web/CSS/Syntax#CSS_declarations_blocks">CSS block</a>, whichever comes first.</span></p>
<pre class="brush: css">/* General structure */
@IDENTIFIER (RULE);
/* Example: tells browser to use UTF-8 character set */
@charset "utf-8";</pre>
<p>There are several at-rules, designated by their identifiers, each with a different syntax:</p>
<ul>
<li>{{cssxref("@charset")}} — Defines the character set used by the style sheet.</li>
<li>{{cssxref("@import")}} — Tells the CSS engine to include an external style sheet.</li>
<li>{{cssxref("@namespace")}} — Tells the CSS engine that all its content must be considered prefixed with an XML namespace.</li>
<li><strong><em>at-rules integradas</em></strong> — A subset of nested statements, which can be used as a statement of a style sheet as well as inside of conditional group rules:
<ul>
<li>{{cssxref("@media")}} — A conditional group rule which will apply its content if the device meets the criteria of the condition defined using a <em>media query</em>.</li>
<li>{{cssxref("@supports")}} {{experimental_inline}} — A conditional group rule which will apply its content if the browser meets the criteria of the given condition.</li>
<li>{{cssxref("@document")}} {{experimental_inline}} — A conditional group rule which will apply its content if the document in which the style sheet is applied meets the criteria of the given condition. <em>(deferred to Level 4 of CSS Spec)</em></li>
<li>{{cssxref("@page")}} — Describes the aspect of layout changes which will be applied when printing the document.</li>
<li>{{cssxref("@font-face")}} — Describes the aspect of an external font to be downloaded.</li>
<li>{{cssxref("@keyframes")}} {{experimental_inline}} — Describes the aspect of intermediate steps in a CSS animation sequence.</li>
<li>{{cssxref("@viewport")}} {{experimental_inline}} — Describes the aspects of the viewport for small screen devices. <em>(currently at the Working Draft stage)</em></li>
<li>{{cssxref("@counter-style")}} — Defines specific counter styles that are not part of the predefined set of styles. <em>(at the Candidate Recommendation stage, but only implemented in Gecko as of writing)</em></li>
<li>{{cssxref("@font-feature-values")}} (plus <code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code> and <code>@character-variant</code>)<br>
— Define common names in {{cssxref("font-variant-alternates")}} for feature activated differently in OpenType. <em>(at the Candidate Recommendation stage, but only implemented in Gekko as of writing)</em></li>
</ul>
</li>
</ul>
<h2 id="Regras_de_grupo_condicionais">Regras de grupo condicionais</h2>
<p>Much like the values of properties, each at-rule has a different syntax. Nevertheless, several of them can be grouped into a special category named <strong>conditional group rules</strong>. These statements share a common syntax and each of them can include <em>nested statements</em>—either <em>rulesets</em> or <em>nested at-rules</em>. Furthermore, they all convey a common semantic meaning—they all link some type of condition, which at any time evaluates to either <strong>true</strong> or <strong>false</strong>. If the condition evaluates to <strong>true</strong>, then all of the statements within the group will be applied.</p>
<p>Conditional group rules are defined in <a href="http://dev.w3.org/csswg/css3-conditional/">CSS Conditionals Level 3</a> and are:</p>
<ul>
<li>{{cssxref("@media")}},</li>
<li>{{cssxref("@supports")}},</li>
<li>{{cssxref("@document")}}. <em>(deferred to Level 4 of CSS Spec) </em></li>
</ul>
<p>Since each conditional group may also contain nested statements, there may be an unspecified amount of nesting.</p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Estado</th>
<th scope="col">Comentário</th>
</tr>
<tr>
<td>{{SpecName('CSS3 Conditional')}}</td>
<td>{{Spec2('CSS3 Conditional')}}</td>
<td>Initial definition</td>
</tr>
<tr>
<td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td>
<td>{{Spec2('Compat')}}</td>
<td>Standardizes <code>@-webkit-keyframes</code>.</td>
</tr>
</tbody>
</table>
<h2 id="Consultar_também">Consultar também:</h2>
<ul>
<li>{{CSS_key_concepts}}</li>
</ul>
|
