Revision 1133165 of @-規則

<div>{{cssref}}</div>

<p><span class="seoSummary"><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> です。</span></p>

<p>いくつかの @-規則があり、それぞれの識別子で異なる構文が使用されます:</p>

<ul>
 <li>{{cssxref("@charset")}} は、スタイルシートで使用される文字セットを定義します。</li>
 <li>{{cssxref("@import")}} は、外部のスタイルシートを含めることを CSS エンジンに知らせます。</li>
 <li>{{cssxref("@namespace")}} は、すべての CSS コンテンツに XML 名前空間の接頭辞が付くことを CSS エンジンに知らせます。</li>
 <li><strong><em>入れ子状の @-規則</em></strong>は、入れ子になったステートメントのサブセットになります。スタイルシートのステートメントとしてだけではなく、内部の条件付きグループ規則として使用されます:
  <ul>
   <li>{{cssxref("@media")}} は、、<em>メディアクエリ</em>を使用して定義された条件を満たすデバイスで読み込まれた場合に、そのコンテンツに適用される条件付きグループ規則です。</li>
   <li>{{cssxref("@supports")}} {{experimental_inline}} は、ブラウザが与えられた条件を満たす場合に、そのコンテンツに適用される条件付きグループ規則です。</li>
   <li>{{cssxref("@document")}} {{experimental_inline}} は、スタイルシートが適用されるドキュメントが与えられた条件を満たす場合に、そのコンテンツに適用される条件付きグループ規則です。<em>(CSS Level 4 仕様に先送り)</em></li>
   <li>{{cssxref("@page")}} — Describes the aspect of layout changes which will be applied when printing the document.</li>
   <li>{{cssxref("@font-face")}} は、ダウンロードされる外部フォントのアスペクトを記述します。</li>
   <li>{{cssxref("@keyframes")}} {{experimental_inline}} は、CSS アニメーションの流れの中間地点の状況を記述します。</li>
   <li>{{cssxref("@viewport")}} {{experimental_inline}} は、小画面デバイスのビューポートの状況を記述します。<em>(現在は Working Draft 段階)</em></li>
   <li>{{cssxref("@counter-style")}} は、スタイルのセットであらかじめ定義されていない、独自のカウンタースタイルを定義します。<em>(Candidate Recommendation 段階ですが、現時点で Gecko しか実装していません)</em></li>
   <li>{{cssxref("@font-feature-values")}} (および <code>@swash</code>、<code>@ornaments</code>、<code>@annotation</code>、<code>@stylistic</code>、<code>@styleset</code>、<code>@character-variant</code>) は、OpenType の各機能を有効化するために、{{cssxref("font-variant-alternates")}} の一般名を定義します。<em>(Candidate Recommendation 段階ですが、現時点で Gecko しか実装していません)</em></li>
  </ul>
 </li>
</ul>

<h2 id="Conditional_Group_Rules" name="Conditional_Group_Rules">条件付きグループ規則</h2>

<p>プロパティの値のように、各 @-規則は異なる構文を持ちますが、いくつかの規則は特別なカテゴリーの <strong>条件付きグループ規則</strong> にグループ化できます。これらのステートメントは、共通の構文を持ちます。各構文には、<em>規則セット</em> と <em>入れ子の @-規則</em> のどちらかの <em>入れ子状のステートメント</em> が含まれます。すべて共通のセマンティックな意味をもたらします。つまり、すべて (異なる種類の) 条件を、適用される一部のステートメントにリンクします。この条件は、常に <strong>true</strong> か <strong>false</strong> に評価されます。条件が <strong>true</strong> に評価された場合は、グループ内の全ステートメントが適用されます。</p>

<p>条件付きグループ規則は <a href="https://dev.w3.org/csswg/css3-conditional/">CSS Conditionals Level 3</a> で定義されており、以下の規則があります。</p>

<ul>
 <li>{{cssxref("@media")}}</li>
 <li>{{cssxref("@supports")}}</li>
 <li>{{cssxref("@document")}} <em>(CSS Level 4 仕様に先送り)</em></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>
  <tr>
   <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td>
   <td>{{Spec2('Compat')}}</td>
   <td><code>@-webkit-keyframes</code> を標準化</td>
  </tr>
 </tbody>
</table>
</div>