---
title: '@-Regel'
slug: Web/CSS/At-rule
tags:
  - CSS
  - CSS Referenz
translation_of: Web/CSS/At-rule
---
<div>{{cssref}}</div>

<p><span class="seoSummary">Eine <strong>@-Regel</strong> ist ein <a href="/de/docs/Web/CSS/Syntax#CSS_Statements">CSS Statement</a>, das mit einem At-Zeichen beginnt, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), gefolgt von einem Bezeichner und das beim ersten Semikolon, '<code>;</code>' (<code>U+003B SEMICOLON</code>), außerhalb eines <a href="/de/docs/Web/CSS/Syntax#CSS_Deklarationsblöcke">CSS Blocks</a> endet oder am Ende des ersten Blocks.</span></p>

<p>Es gibt verschiedene @-Regeln, bestimmt durch deren Bezeichner, jede mit einer unterschiedlichen Syntax:</p>

<ul>
 <li>{{cssxref("@charset")}} — Definiert den Zeichensatz, der vom Stylesheet verwendet wird.</li>
 <li>{{cssxref("@import")}} — Teilt der CSS Engine mit, ein externes Stylesheet einzubinden.</li>
 <li>{{cssxref("@namespace")}} — Teilt der CSS Engine mit, dass sie alle Inhalte mit einem XML Namespace als Präfix betrachten soll.</li>
 <li><strong><em>Verschachtelte @-Regeln</em></strong> — Eine Untermenge an verschachtelten Statements, welche als Statement eines Stylesheets als auch innerhalb von bedingten Gruppenregeln verwendet werden können:
  <ul>
   <li>{{cssxref("@media")}} — Eine bedingte Gruppenregel, die ihren Inhalt anwendet, falls das Gerät die Kriterien der Bedingung erfüllt, die durch eine <em>Media Query</em> definiert wird.</li>
   <li>{{cssxref("@supports")}} {{experimental_inline}} — Eine bedingte Gruppenregel, die ihren Inhalt anwendet, falls der Browser die Kriterien der angegebenen Bedingung erfüllt.</li>
   <li>{{cssxref("@document")}} {{experimental_inline}} — Eine bedingte Gruppenregel, die ihren Inhalt anwendet, falls das Dokument, auf das das Stylesheet angewendet wird, die Kriterien der angegebenen Bedingung erfüllt. <em>(verschoben nach Level 4 der CSS Spezifikation)</em></li>
   <li>{{cssxref("@page")}} — Beschreibt den Aspekt von Layoutänderungen, welche angewendet werden, wenn das Dokument gedruckt wird.</li>
   <li>{{cssxref("@font-face")}} — Beschreibt den Aspekt einer externen Schrift, die heruntergeladen werden soll.</li>
   <li>{{cssxref("@keyframes")}} {{experimental_inline}} — Beschreibt den Aspekt von Zwischenschritten in einer CSS Animationssequenz.</li>
   <li>{{cssxref("@viewport")}} {{experimental_inline}} — Beschreibt die Aspekte des Viewports auf Geräten mit kleinem Bildschirm. <em>(aktuell im Arbeitsentwurfsstadium)</em></li>
  </ul>
 </li>
</ul>

<h2 id="Bedingte_Gruppenregeln">Bedingte Gruppenregeln</h2>

<p>Ähnlich wie die Werte von Eigenschaften hat jede @-Regel eine andere Syntax. Trotzdem können einige von ihnen zu einer speziellen Kategorie zusammengefasst werden, <strong>bedingte Gruppenregeln</strong> genannt. Diese Statements teilen sich eine gemeinsame Syntax und jedes von ihnen kann <em>verschachtelte Statements</em> — entweder <em>Regelsets</em> oder <em>verschachtelte @-Regeln</em> — beinhalten. Darüber hinaus vermitteln sie alle die gleiche semantische Bedeutung — sie alle verbindet eine Art Bedingung, welche immer entweder <strong>true</strong> oder <strong>false</strong> ergibt. Falls die Bedingung <strong>true</strong> ergibt, werden alle Statements innerhalb der Gruppe angewandt.</p>

<p>Bedingte Gruppenregeln werden in <a href="https://drafts.csswg.org/css-conditional-3/">CSS Conditionals Level 3</a> definiert und sind:</p>

<ul>
 <li>{{cssxref("@media")}},</li>
 <li>{{cssxref("@supports")}},</li>
 <li>{{cssxref("@document")}}. <em>(verschoben nach Level 4 der Spezifikation) </em></li>
</ul>

<p>Da jede bedingte Gruppe auch verschachtelte Statements beinhalten kann, kann es eine undefinierte Anzahl von Verschachtelungen geben.</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Conditional')}}</td>
   <td>{{Spec2('CSS3 Conditional')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>