Revision 421755 of @-規則

<div>{{cssref}}</div>
<p><strong>@-規則</strong> は、'<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>) 記号で始まり、以下の識別子が続き、<a href="/ja/docs/CSS/Syntax#CSS_declarations" title="CSS/Syntax#CSS_declarations">ブロック</a> の外または最初の <a href="/ja/docs/CSS/Syntax#CSS_declarations" title="CSS/Syntax#CSS_declarations">CSS ブロック</a> の終わりにセミコロン '<code>;</code>' (<code>U+003B SEMICOLON</code>) 記号が続く <a href="/ja/docs/CSS/Syntax#CSS_statements" title="CSS/Syntax#CSS_statements">CSS ステートメント</a> です。</p>
<p>いくつかの @-規則があり、それぞれの識別子で異なる構文が使用されます:</p>
<ul>
  <li>{{cssxref("@charset")}} は、スタイルシートで使用される文字セットを定義します。</li>
  <li>{{cssxref("@import")}} は、外部のスタイルシートを含めることを CSS エンジンに知らせます。</li>
  <li>{{cssxref("@namespace")}} は、すべての CSS コンテンツに XML 名前空間の接頭辞が付くことを CSS エンジンに知らせます。</li>
  <li>入れ子状の @-規則は、入れ子になったステートメントのサブセットになります。スタイルシートのステートメントとしてだけではなく、内部の条件付きグループ規則として使用されます:
    <ul>
      <li>{{cssxref("@media")}} は、メディアクエリを使用して定義された条件を満たすデバイスで読み込まれた場合に、そのコンテンツに適用される条件付きグループ規則です。</li>
      <li>{{cssxref("@font-face")}} は、ダウンロードされる外部フォントのアスペクトを記述します。 {{experimental_inline}}</li>
      <li>{{cssxref("@document")}} は、スタイルシートが適用されるドキュメントが与えられた条件を満たす場合に、そのコンテンツに適用される条件付きグループ規則です。 {{experimental_inline}}</li>
      <li>{{cssxref("@supports")}} は、ブラウザが与えられた条件を満たす場合に、そのコンテンツに適用される条件付きグループ規則です。 {{experimental_inline}}</li>
    </ul>
  </li>
</ul>
<h2 id="Conditional_Group_Rules" name="Conditional_Group_Rules">条件付きグループ規則</h2>
<p>プロパティの値のように、各 @-規則は異なる構文を持ちますが、いくつかの規則は特別なカテゴリの <strong>条件付きグループ規則</strong> にグループ化できます。これらのステートメントは、共通の構文を持ちます。各構文には、<em>規則セット</em> と <em>入れ子の @-規則</em> のどちらかの <em>入れ子状のステートメント</em> が含まれます。すべて共通のセマンティックな意味をもたらします。つまり、すべて (異なる種類の) 条件を、適用される一部のステートメントにリンクします。</p>
<p>条件付きグループ規則は CSS Conditionals Level 3 で定義されており、以下の規則があります。</p>
<ul>
  <li>{{cssxref("@media")}}</li>
  <li>{{cssxref("@document")}}</li>
  <li>{{cssxref("@supports")}}</li>
</ul>
<p>各規則は、入れ子状のステートメントを持ち、いくつでも入れ子にすることができます。</p>
<div class="noinclude">
  <h2 id="Specifications" name="Specifications">仕様書</h2>
  <table class="standard-table">
    <tbody>
      <tr>
        <th scope="col">仕様書</th>
        <th scope="col">策定状況</th>
        <th scope="col">コメント</th>
      </tr>
      <tr>
        <td>{{SpecName('CSS3 Conditional')}}</td>
        <td>{{Spec2('CSS3 Conditional')}}</td>
        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>