CSSのat-rule()関数の使い方｜アットルールのサポート状況を確実に判定して最新構文を使い分ける



CSSでは、@container（コンテナクエリ）や @layer（カスケードレイヤー）など、新しいアットルール（@規則）が次々に登場し、スタイルの切り分けなどが便利になってきていますが、いざ実務で使おうとすると、未対応のブラウザでスタイルが適用されないのではという不安に思うこともあります。

これまでは、特定のアットルールが使えるかどうかを直接確かめるスマートな方法がなく、関連するプロパティの有無でおそらく動くだろうと推測するしかありませんでした。

そんな状況を解消してくれるのが、今回紹介する at-rule()関数 です。

at-rule()関数を使うことで、@supportsブロックの中で「このアットルールは利用可能か？」を直接テストできるようになります。

Google Chrome 148以降やEdgeなどのChromium系ではすでに利用可能です。

なるべく最新のブラウザには、そのポテンシャルを活かしたCSSの構文（アットルール）を積極的に使っていけるよう、ここではat-rule()関数の使い方をご紹介します。

まだ一部に未対応のブラウザもありますが、新機能を取り入れる際の構文エラーのリスクを、この関数でスマートに回避できるようになります。


at-rule()関数の使い方



at-rule()関数は、@supportsルールの中で使用します。構文は非常にシンプルです。

/* 例：ブラウザが @function ルールをサポートしているか判定 */
@supports at-rule(@function) {
  /* サポートしているブラウザ向けの記述 */
}



例として、@functionを使って背景色を制御する場合で見ていきます。

まずは簡単なHTML構造を作っておきます。

HTML

<div class="box"></div>



CSSでは、未対応ブラウザでのエラーを防ぐために、フォールバック用のスタイルを記述しつつ、サポートしているかを判定して適切にスタイルを適用させていきます。

CSS

/* 全ブラウザ向けの基本設定 (フォールバック) */
.box {
  background-color: #f1a8a8;
  width: 100%;
  max-width: 600px;
  height: 300px;
  margin: 1rem auto;
}

/* サポートしている場合のみ、高度な機能を適用 */
@supports at-rule(@function) {

  @function --custom-bg() {
    result: #a8bbf1;
  }
  
  .box {
    background-color: --custom-bg();
  }

}


これまで新しいアットルールを使う際は、なんとなくプロパティの有無で推測して判定するといった方法をとってきましたが、今後は at-rule(@function) のように書くだけで判定が可能になります。

サポートされているかの判定とスタイルの適用は、ブラウザのデベロッパーツールでも確認できます。

CSSのat-rule()関数でサポートを確認して適用されたスタイル



ブラウザが@functionを解釈できない場合、そのブロック内を丸ごと無視してくれるため、構文エラーによるスタイルの崩れを防ぐことができます。


判定できる対象の違い


これまでの@supportsとの大きな違いは、判定できる対象の広さにあります。
従来の@supportsは主に「プロパティと値のペア」をチェックするためのものでしたが、CSSの構文（アットルール）は判定できませんでした。

@supports (display: grid) → 判定可能
@supports (aspect-ratio: 1/1) → 判定可能
@supports (@container) → 判定不可


at-rule()関数の登場によって、アットルールがサポートされているかを直接判定できるようになります。

従来の@supports
主に (display: grid) のような「プロパティ: 値」の組み合わせを判定します。その後、拡張により selector()でセレクターの判定なども可能になりましたが、アットルール自体の判定は困難でした。
at-rule()関数
@containerや@starting-styleといったアットルール（@規則）そのものがブラウザに実装されているかを判定します。



比較表

※横にスクロールして確認できます

特徴 従来の@supports @supports at-rule()
主な判定対象 color: red などの宣言 @layer, @container 等の規則
記述例 @supports (display: flex) { ... } @supports at-rule(@container) { ... }
主な目的 特定の装飾やレイアウト手法の有無 新しいCSSの構文・機能システムの有無

動作イメージを30秒ほどで確認したい方は、こちらの動画をどうぞ！

 

まとめ


2026年5月現在、未対応のブラウザもありますが、多くのブラウザでサポートが進み、そして今後さらに複雑なアットルールが登場するにつれて、この関数の価値は増していくでしょう。

at-rule()関数も使いこなし、ブラウザの対応状況でスタイルをスマートに切り分けて、これまで以上に質の高いコードを書いていけるようにしたいですね。