At-rule

  • Revision slug: CSS/At-rule
  • Revision title: At-rule
  • Revision id: 4441
  • Created:
  • Creator: Marsf
  • Is current revision? No
  • Comment add link to ja.; 21 words added

Revision Content

An at-rule is a CSS statement beginning with an at sign, '@' (U+0040 COMMERCIAL AT), followed by an identifier and ending at the first semi-colon', ;' (U+003B SEMICOLON), outside a block, or at the end of first CSS block.

There are several at-rules, designed by their identifier, with each a different syntax:

  • {{ cssxref("@charset") }}, defining the character set used by the style sheet.
  • {{ cssxref("@import") }}, telling the CSS engine to include an external style sheet.
  • {{ cssxref("@namespace") }}, telling the CSS engine that all its content must be considered prefixed with an XML namespace.
  • Nested at-rules, a subset of nested statements, that can be used not only as a statement of a style sheet, but also inside conditional group rules:
    • {{ cssxref("@media") }}, a conditional group rule applying its content if the device fulfills the condition defined using a media query.
    • {{ cssxref("@font-face") }}, describing the aspect of an external font to be downloaded. {{ experimental_inline() }}
    • {{ cssxref("@document") }}, a conditional group rule applying its content if the document the style sheet is applied to fulfills the given condition.{{ experimental_inline() }}
    • {{ cssxref("@supports") }}, a conditional group rule applying its content if the browser fulfills the given condition. {{ experimental_inline() }}

Conditional Group Rules

Like for properties' values, each at-rule has a different syntax. Nevertheless several of them can be grouped into a special category, conditional group rules. These statements share a common syntax. Each of them includes nested statements, that is either rulesets or nested at-rules. More they all convey a common semantic meaning: they all link a condition (of different kind) to some statements to be applied.

Conditional group rules are defined in CSS Conditionals Level 3 and are:

  • {{ cssxref("@media") }},
  • {{ cssxref("@document") }},
  • {{ cssxref("@supports") }}.

Each of them being also nested statements their may be an unspecified amount of nesting.

{{ languages( { "ja": "ja/CSS/At-rule" } ) }}

Revision Source

<p>An <strong>at-rule</strong> is a <a href="/en/CSS/Syntax#CSS_statements" title="en/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 ending at the first semi-colon', <code>;</code>' (<code>U+003B SEMICOLON</code>), outside a <a href="/en/CSS/Syntax#CSS_declarations" title="en/CSS/Syntax#CSS_declarations">block</a>, or at the end of first <a href="/en/CSS/Syntax#CSS_declarations" title="en/CSS/Syntax#CSS_declarations">CSS block</a>.</p>
<p>There are several at-rules, designed by their identifier, with each a different syntax:</p>
<ul> <li>{{ cssxref("@charset") }}, defining the character set used by the style sheet.</li> <li>{{ cssxref("@import") }}, telling the CSS engine to include an external style sheet.</li> <li>{{ cssxref("@namespace") }}, telling the CSS engine that all its content must be considered prefixed with an XML namespace.</li> <li>Nested at-rules, a subset of nested statements, that can be used not only as a statement of a style sheet, but also inside conditional group rules: <ul> <li>{{ cssxref("@media") }}, a conditional group rule applying its content if the device fulfills the condition defined using a media query.</li> <li>{{ cssxref("@font-face") }}, describing the aspect of an external font to be downloaded. {{ experimental_inline() }}</li> <li>{{ cssxref("@document") }}, a conditional group rule applying its content if the document the style sheet is applied to fulfills the given condition.{{ experimental_inline() }}</li> <li>{{ cssxref("@supports") }}, a conditional group rule applying its content if the browser fulfills the given condition. {{ experimental_inline() }}</li> </ul> </li>
</ul>
<h2 id="Conditional_Group_Rules">Conditional Group Rules</h2>
<p>Like for properties' values, each at-rule has a different syntax. Nevertheless several of them can be grouped into a special category, <strong>conditional group rules</strong>. These statements share a common syntax. Each of them includes <em>nested statements</em>, that is either <em>rulesets</em> or <em>nested at-rules</em>. More they all convey a common semantic meaning: they all link a condition (of different kind) to some statements to be applied.</p>
<p>Conditional group rules are defined in CSS Conditionals Level 3 and are:</p>
<ul> <li>{{ cssxref("@media") }},</li> <li>{{ cssxref("@document") }},</li> <li>{{ cssxref("@supports") }}.</li>
</ul>
<p>Each of them being also nested statements their may be an unspecified amount of nesting.</p>
<div class="noinclude">
<p>{{ languages( { "ja": "ja/CSS/At-rule" } ) }}</p>
</div>
Revert to this revision