アットルール

アットルールは CSS の文のうち、CSS の動作を規定するものです。アットルールはアットマーク、@ (U+0040 COMMERCIAL AT) で始まり、識別子が続きます。次のセミコロン、 ; (U+003B SEMICOLON) もしくは次の CSS ブロックのどちらかが現れるまでの部分からなります。

アットルールは、スタイルルールや他のアットルールをグループ化して構造化したり、選択したコンテンツに直接関連付けられていないスタイル情報を宣言したり、インポートや名前空間キーワードの割り当てなどの構文構造を管理したりするために使用されます。

構文

アットルールは、 CSS 構文モジュールで定義されており、それぞれのモジュールで異なるアットルールが定義されています。アットルールは、通常、特定のルールとその目的に応じて、 2 つの形式のどちらかで記述されます。文アットルールとブロックアットルールがあり、後者には中に修飾ルール、アットルール、宣言を含むことができます。

文アットルール

css

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

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

文アットルールはセミコロンで終わります。いくつかの文アットルールがあり、それぞれ識別子で指定され、構文も異なります。

@charset: スタイルシートで使用される代替文字セットを決定するアルゴリズム（アットルールの構文形式を有しますが、定義ではありません）（CSS 構文）。
@import: 外部スタイルシートを含めるよう CSS エンジンに指示します（CSS カスケードと継承）。
@layer: 複数のカスケードレイヤー（CSS カスケードと継承）の場合の優先順位を定義します。レイヤーのスタイルを定義するためのブロックアットルールとしても使用されます。
@namespace: スタイルシートまたはセレクターが、名前空間およびそれ以外のセレクター要素が一致する場合にのみ一致する名前空間の既定の名前空間、または名前空間の接頭辞を定義します（CSS 名前空間）。

ブロックアットルール

css

@identifier (RULE) {
}

ブロックアットルールは、入れ子になったルール、他のアットルール、プロパティまたは記述子の宣言を含む {} ブロックで終わります。

@counter-style: 独自のカウンタースタイルを定義し、定義済みのリストスタイルを拡張します (CSS カウンタースタイル).
@container: コンテナーが <container-condition> を満たす場合にそのコンテンツを適用する条件付きグループルール（CSS コンテナー）。
@font-face: ローカルおよび外部フォントリソースの場所、および、宣言された font-family とともにそれらのリソースが使用される場合のスタイル特性を定義します（CSS フォント）。
@font-feature-values （および @swash, @ornaments, @annotation, @stylistic, @styleset, @character-variant）: フォントファミリーごとにフォントの表示を制御します。 OpenType の font-variant-alternates のインデックスに、フォント固有の代替フォントまたは独自の名前を定義します（CSS フォント）。
@keyframes (and the @-webkit-keyframes alias): アニメーションシーケンスの中間段階（またはキーフレーム）の CSS スタイルを記述して、名前付きアニメーションを定義します（CSS アニメーション）。
@layer: そのレイヤーの CSS ルールを含む、名前付きのカスケードレイヤーを作成します（CSS カスケードと継承）。複数のカスケードレイヤーの場合の優先順位を定義する文アットルールとしても使用されます。
@media: メディアクエリーを使用して定義された条件を満たす端末にコンテンツを適用する条件付きグループルール（CSS 条件付きルール）。
@page: ページの寸法、方向、マージンなど、表示するページに関するものを指定します（CSS ページメディア）。
@position-try: アンカー位置指定要素の代替位置指定および配置オプションを定義するために使用できる、独自の位置指定オプションを定義します（CSS アンカー位置指定）。
@property: CSS カスタムプロパティを定義し、プロパティの型のチェックと制約、既定値の設定、およびカスタムプロパティが値を継承できるかどうかを定義します（カスケード変数のための CSS カスタムプロパティ）。
@scope: 選択した要素に適用する範囲と、その範囲内の要素に適用するスタイルを定義します（CSS カスケードと継承）。
@starting-style: 要素が最初のスタイル更新を受けたとき（たとえば、display: none からトランジションする場合など）に、要素がトランジションする開始プロパティの値を定義します（CSS トランジション）。
@supports: 条件付きグループルールは、指定された条件の CSS 機能に対応しているブラウザーで、そのコンテンツを適用します（CSS 条件付きルール）。
@view-transition: 現在の文書をビュートランジションに選択し、文書間のナビゲーショントランジションの場合は宛先文書も選択します。