---
title: At-rule
slug: Web/CSS/At-rule
tags:
  - At-rule
  - CSS
  - Reference
translation_of: Web/CSS/At-rule
---
<div>{{cssref}}</div>

<p><span class="seoSummary">Una <strong>regla at (at-rule)</strong> es una <a href="/en-US/docs/Web/CSS/Syntax#CSS_statements">declaració CSS</a> </span>que comença amb un signe<span class="seoSummary">, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), </span>seguit d'un identificador i inclou tot fins al següent punt i coma<span class="seoSummary">, '<code>;</code>' (<code>U+003B SEMICOLON</code>), </span>o el següent bloc<span class="seoSummary"> <a href="/en-US/docs/Web/CSS/Syntax#CSS_declarations_blocks">bloc CSS </a>, </span>el que succeeixi primer<span class="seoSummary">.</span></p>

<p>Hi ha diverses regles at (at-rules), designades pels seus identificadors, cadascuna amb una sintaxi diferent:</p>

<ul>
 <li>{{cssxref("@charset")}} — Defineix el conjunt de caràcters utilitzat per la fulla d'estil.</li>
 <li>{{cssxref("@import")}} — Li diu al motor CSS que inclogui una fulla d'estil externa.</li>
 <li>{{cssxref("@namespace")}} — Li diu al motor CSS que tot el seu contingut ha de ser considerat com prefixat amb un espai de noms XML.</li>
 <li><strong><em>Regles at (at-rules) niades</em></strong> — Un subconjunt de sentències niades, que es pot utilitzar com una declaració d'una fulla d'estil, així com dins de les regles de grup condicionals:
  <ul>
   <li>{{cssxref("@media")}} — Una regla de grup condicional que aplicarà el seu contingut si el dispositiu compleix els criteris de la condició definida mitjançant una <em>consulta de medis</em>.</li>
   <li>{{cssxref("@supports")}} — Una regla de grup condicional que aplicarà el seu contingut si el navegador compleix amb els criteris de la condició donada.</li>
   <li>{{cssxref("@document")}} {{experimental_inline}} — Una regla de grup condicional que aplicarà el seu contingut si el document en el qual s'aplica la fulla d'estil compleix amb els criteris de la condició donada. <em>(posposat al nivell 4 de les especificacions CSS)</em></li>
   <li>{{cssxref("@page")}} — Descriu l'aspecte dels canvis de disseny que s'aplicaran en imprimir el document.</li>
   <li>{{cssxref("@font-face")}} — Descriu l'aspecte d'una font externa a descarregar.</li>
   <li>{{cssxref("@keyframes")}} — Descriu l'aspecte dels passos intermedis en una seqüència d'animació CSS.</li>
   <li>{{cssxref("@viewport")}} {{experimental_inline}} — Descriu els aspectes de la finestra de visualització per a dispositius de pantalla petita. <em>(actualment en l'etapa de l'esborrany de treball)</em></li>
   <li>{{cssxref("@counter-style")}} — Defineix estils de comptador específics que no formen part del conjunt d'estils predefinit . <em>(en l'etapa de Recomanació de Candidats, però només implementat en Gecko al moment de la redacció)</em></li>
   <li>{{cssxref("@font-feature-values")}} (més <code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code> and <code>@character-variant</code>)<br>
    — Definiu noms comuns a {{cssxref("font-variant-alternates")}} per a la característica activada de forma diferent en OpenType. <em>(en l'etapa de Recomanació de Candidats, però només implementada en Gekko al moment de la redacció)</em></li>
  </ul>
 </li>
</ul>

<h2 id="Regles_del_grup_condicional">Regles del grup condicional</h2>

<p>Igual que els valors de les propietats, cada regla té una sintaxi diferent. No obstant això, alguns d'ells poden agrupar-se en una categoria especial anomenada <strong>regles de grup condicional</strong>. Aquests declaracions comparteixen una sintaxi comuna i cadascun d'ells pot incloure <em>declaracions niades</em>, ja siguin <em>conjunts de regles</em> o <em>regles at niades</em>. A més, tots transmeten un significat semàntic comú: tots vinculen algun tipus de condició que, en qualsevol moment, s'avalua com a <strong>veritable</strong> o <strong>fals</strong>. Si la condició s'avalua com a <strong>veritable</strong>, s'aplicaran totes les instruccions del grup</p>

<p>Les regles de grup condicional es defineixen <a href="http://dev.w3.org/csswg/css3-conditional/">Condicionals CSS Nivell 3</a> i son:</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>Atès que cada grup condicional també pot contenir declaracions niades, pot haver-hi una quantitat no especificada de niaments.</p>

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Conditional')}}</td>
   <td>{{Spec2('CSS3 Conditional')}}</td>
   <td>Definició inicial</td>
  </tr>
  <tr>
   <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td>
   <td>{{Spec2('Compat')}}</td>
   <td>Estandaritza <code>@-webkit-keyframes</code>.</td>
  </tr>
 </tbody>
</table>

<h2 id="Vegeu_també">Vegeu també</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/Reference">Referència CSS</a></li>
 <li>{{CSS_key_concepts}}</li>
</ul>