Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

@function

Experimental: これは実験的な機能です。

本番で使用する前にブラウザー互換性一覧表をチェックしてください。

@function は CSS のアットルールで、CSS カスタム関数を定義することができます。定義された独自の関数は、任意のプロパティ値内で <dashed-function> 構文（--my-function(30px, 3) など）を使用して呼び出すことができます。

カスタム関数CSSアットルール

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
@function
実験的
139
139
139
DOM API
CSSFunctionDeclarations
実験的

CSSFunctionDeclarations は CSS オブジェクトモデルのインターフェイスで、@function 本体に含む CSS 宣言の連続したものを表します。
139
139
139
style
実験的

style は CSSFunctionDeclarations インターフェイスの読み取り専用プロパティで、CSSFunctionDescriptors オブジェクトを保持しています。これは @function ルール本体で利用可能な記述子を表します。
139
139
139
CSSFunctionDescriptors
実験的

CSSFunctionDescriptors は CSS オブジェクトモデルのインターフェイスで、CSSFunctionDeclarations で表現された一連の CSS 宣言に含まれる記述子を表します。
139
139
139
result
実験的

result は CSSFunctionDescriptors インターフェイスのプロパティで、result 記述子が関係する一連の宣言に存在すれば、それを表す文字列を返します。
139
139
139
CSSFunctionRule
実験的

CSSFunctionRule は CSS オブジェクトモデルのインターフェイスで、CSS の @function（カスタム関数）アットルールを表します。
139
139
139
getParameters
実験的

getParameters() は CSSFunctionRule インターフェイスのメソッドで、このカスタム関数の引数を表すオブジェクトの配列を返します。
139
139
139
name
実験的

name は CSSFunctionRule インターフェイスのプロパティで、このカスタム関数の名前を表す文字列を返します。
139
139
139
returnType
実験的

returnType は CSSFunctionRule インターフェイスのプロパティで、このカスタム関数の返値の型を表す文字列を返します。
139
139
139
CSS @ ルール
result
実験的

「結果」記述子
139
139
139
その他
css.types.dashed-function
実験的

は CSS のデータ型で、CSS カスタム関数を呼び出す際に使用される、@function アットルールを使用して定義される構文を表します。
139
139
139
css.types.type
実験的

type() は CSS の関数で、以下の CSS 機能で使用され、特定のデータ型を指定することができます。
139
139
139
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
@function --spacing(--level) {
  result: calc(var(--level) * 8px);
}
.card {
  padding: --spacing(2);
}

ライブデモ

--spacing(2)

CSS --spacing(2) demo.

プレビュー全画面表示

--spacing(4)

CSS --spacing(4) demo.

プレビュー全画面表示

nestedusage

CSS nestedusage demo.

プレビュー全画面表示

実務での使いどころ

  • デザイントークンの動的生成

    スペーシングやフォントサイズなどのデザイントークンをカスタム関数で計算し、一貫性のあるデザインシステムを構築します。

注意点

  • 非常に新しい機能であり、2026年3月時点でChrome/Edgeのみの対応です。プロダクションでの使用には十分な検証が必要です。

アクセシビリティ

  • 関数自体はアクセシビリティに直接影響しませんが、生成される値がコントラスト比やフォントサイズの基準を満たしているか確認してください。

参考リンク