@-規則

@-規則 は  CSS ステートメント の一つで、CSSの振舞いを規定します。＠-規則は '@' (U+0040 COMMERCIAL AT) 記号で始まり、識別子とその他の、次の';'(U+003B SEMICOLON)記号もしくは次のCSSブロックが表われるまでの部分、からなります。

/* 一般的な構造 */
@IDENTIFIER (RULE);

/* 例: ブラウザーに UTF-8 文字セットを使用することを知らせる */
@charset "utf-8";

@-規則は何種類かあり、識別子で区別され、それぞれに異なる構文が使用されます:

• @charset — スタイルシートで使用される文字セットを定義します。
• @import — 外部のスタイルシートを読み込むよう CSS エンジンに指示します。
• @namespace — このCSS内のコンテンツ全てには、XML名前空間の名前が前置されているとみなすよう、CSSエンジンに指示します。
• 入れ子状の @-規則 — 入れ子になったステートメントのサブセットになります。スタイルシートのステートメントとしてだけではなく、条件付きグループ規則の内部で使用されます:
  • @media — メディアクエリの条件を満たすデバイスで読み込まれた場合にこれの中身が適用される、条件付きグループ規則です。
  • @supports — ブラウザーが指定の条件を満たす場合にこれの中身が適用される、条件付きグループ規則です。
  • @document — このスタイルシートが適用される文書が、与えられた条件を満たす場合に、これの中身が適用される条件付きグループ規則です。(CSS Level 4 仕様に先送り)
  • @page — 文書印刷の際に適用されるレイアウト変更に関する指定を記述します。
  • @font-face — ダウンロードすべき外部フォントに関する指定を記述します。
  • @keyframes — CSS アニメーションシーケンスの中間ステップに関する指定を記述します。
  • @viewport — 小さな画面のデバイス用に、ビューポートに関する指定を記述します。(現在は Working Draft 段階)
  • @counter-style — 定義済みのスタイルにはない、独自のカウンタースタイルを定義します。(勧告候補段階ですが、現時点で Gecko しか実装していません)
  • @font-feature-values (及び @swash, @ornaments, @annotation, @stylistic, @styleset, @character-variant)
    — OpenType の各機能を有効化するために、font-variant-alternates の一般名を定義します。(勧告候補段階ですが、現時点で Gecko しか実装していません)

条件付きグループ規則

プロパティの値のように、各 @-規則は異なる構文を持ちますが、いくつかの@-規則は 条件付きグループ規則 という特別なカテゴリーに属します。条件付きグループ規則のステートメントは、構文が共通していて、どれも入れ子のステートメントを持つことができ、ここには普通のルールセットはもちろん、さらに入れ子の@-規則を含める事ができます。さらに言えば、それらはすべて共通の意味あいがあります — 全ては常に真か偽と判定される何らかの条件と結びていています。条件が真であれば、条件付きグループ規則内のステートメント全部が適用されるのです。

条件付きグループ規則は CSS Conditionals Level 3 で定義されており、以下の規則があります。

• @media
• @supports
• @document (CSS Level 4 仕様に先送り)

各規則は、入れ子状のステートメントを持ち、いくつでも入れ子にすることができます。

仕様書

関連情報

• CSS の主要概念: CSS 構文、 詳細度、 継承、 ボックスモデル、 レイアウトモード、 視覚フォーマットモデル、 マージンの相殺、 値 (initial / computed / used / actual)、 値の定義構文、 ショートハンドプロパティ、 置換要素