---
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>