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