initial commit

1 files changed, 61 insertions, 0 deletions

diff --git a/files/de/web/css/at-rule/index.html b/files/de/web/css/at-rule/index.html
new file mode 100644
index 0000000000..f32e9daee6
--- /dev/null
+++ b/files/de/web/css/at-rule/index.html
@@ -0,0 +1,61 @@
+---
+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>