CSSをマスターする: @propertyによるカスタムプロパティの登録

カスタムプロパティ（CSS変数とも呼ばれます）は、CSSの記述と保守の方法に革命をもたらしました。再利用可能な値を定義できるようになり、スタイルシートの柔軟性と保守性が向上します。しかし、単に値を定義するだけでなく、カスタムプロパティが保持する値の型、その初期値、継承の動作を定義できたらどうでしょうか？そこで@propertyが登場します。

@propertyとは何か？

@propertyは、カスタムプロパティをブラウザに明示的に登録できるCSSアットルールです。この登録プロセスにより、ブラウザはプロパティの期待される型、初期値、親要素から継承すべきかどうかに関する情報を得ます。これにより、以下のような高度な機能が利用可能になります。

• 型チェック: カスタムプロパティに正しい型の値が割り当てられていることを保証します。
• アニメーション: 数値や色など、特定の型のカスタムプロパティに対してスムーズなトランジションとアニメーションを可能にします。
• デフォルト値: カスタムプロパティが明示的に定義されていない場合に、フォールバック値を提供します。
• 継承制御: カスタムプロパティが親要素から値を継承するかどうかを決定します。

これは、CSS変数に型安全性を追加するものと考えてください。これにより、より堅牢で予測可能なスタイルシートを作成できます。

@propertyの構文

@propertyルールは、次の基本的な構文に従います。

@property --property-name {
  syntax: '<value-syntax>';
  inherits: true | false;
  initial-value: <value>;
}

各部分を詳しく見てみましょう:

• --property-name: 登録したいカスタムプロパティの名前。二つのハイフン(--)で始める必要があります。
• syntax: プロパティの期待される値の型を定義します。これは型チェックとアニメーションにとって非常に重要です。利用可能な構文値については、以下で詳しく説明します。
• inherits: プロパティが親要素から継承すべきかどうかを示す真偽値。指定しない場合、デフォルトはfalseです。
• initial-value: 要素に明示的に設定されていない場合のプロパティのデフォルト値。これにより、常にフォールバック値が利用可能になります。

syntax記述子の理解

syntax記述子は、@propertyルールの中で最も重要な部分です。カスタムプロパティにどのような種類の値が期待されるかをブラウザに伝えます。一般的な構文値をいくつか示します:

• *: 任意の値を許可します。これは最も許容範囲の広い構文であり、登録なしの標準的なCSS変数の動作を本質的に再現します。この使用は控えめにしてください。
• <length>: 長さの値（例: 10px, 2em, 50%）を期待します。これにより、異なる長さの値間のスムーズなアニメーションが可能になります。
• <number>: 数値（例: 1, 3.14, -5）を期待します。不透明度やスケールなどの数値プロパティをアニメーション化するのに役立ちます。
• <percentage>: パーセンテージ値（例: 25%, 100%）を期待します。
• <color>: 色の値（例: #f00, rgb(255, 0, 0), hsl(0, 100%, 50%)）を期待します。スムーズな色のトランジションとアニメーションを可能にします。
• <image>: 画像の値（例: url(image.jpg), linear-gradient(...)）を期待します。
• <integer>: 整数値（例: 1, -10, 0）を期待します。
• <angle>: 角度の値（例: 45deg, 0.5rad, 200grad）を期待します。回転のアニメーションに役立ちます。
• <time>: 時間の値（例: 1s, 500ms）を期待します。カスタムプロパティを介してアニメーションの期間や遅延を制御するのに役立ちます。
• <resolution>: 解像度の値（例: 300dpi, 96dpi）を期待します。
• <transform-list>: トランスフォーム関数のリスト（例: translateX(10px) rotate(45deg)）を期待します。複雑なトランスフォーメーションのアニメーションを可能にします。
• <custom-ident>: カスタム識別子（文字列）を期待します。enumに似ています。
• <string>: 文字列の値（例: "Hello World"）を期待します。文字列のアニメーションは一般的にサポートされていないため、注意してください。
• カスタム構文: 上記の組み合わせと、|（OR）、[]（グループ化）、+（1つ以上）、*（0個以上）、?（0個または1個）演算子を使用して、より複雑な構文を作成できます。例: <length> | <percentage> は、長さまたはパーセンテージ値のいずれかを許可します。

正しいsyntaxを選択することは、@propertyの真の力を活用するために不可欠です。

@propertyの実際の例

CSSで@propertyを使用する具体的な例を見てみましょう。

例1: 背景色のアニメーション

ボタンの背景色をアニメーションさせたいとします。@propertyを使用して背景色のカスタムプロパティを登録し、CSSトランジションを使用してアニメーションさせることができます。

@property --bg-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

.button {
  background-color: var(--bg-color);
  transition: --bg-color 0.3s ease;
}

.button:hover {
  --bg-color: #f00; /* Red */
}

この例では、--bg-colorカスタムプロパティを<color>構文で登録しています。これは色値を期待することを意味します。initial-valueは白（#fff）に設定されています。ボタンにホバーすると、--bg-colorが赤（#f00）に変更され、トランジションが背景色の変化をスムーズにアニメーションさせます。

例2: 数値でボーダー半径を制御する

@propertyを使用して、要素のボーダー半径を制御し、アニメーションさせることができます。

@property --border-radius {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.rounded-box {
  border-radius: var(--border-radius);
  transition: --border-radius 0.5s ease;
}

.rounded-box:hover {
  --border-radius: 20px;
}

ここでは、--border-radiusを<length>として登録し、px、em、%などの長さの値を受け入れるようにしています。初期値は0pxです。.rounded-boxにホバーすると、ボーダー半径が20pxにアニメーションします。

例3: シャドウオフセットのアニメーション

ボックスシャドウの水平オフセットをアニメーションさせたいとします。

@property --shadow-offset-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.shadowed-box {
  box-shadow: var(--shadow-offset-x) 5px 10px rgba(0, 0, 0, 0.5);
  transition: --shadow-offset-x 0.3s ease;
}

.shadowed-box:hover {
  --shadow-offset-x: 10px;
}

この場合、--shadow-offset-xは<length>として登録されており、その初期値は0pxです。box-shadowプロパティはこのカスタムプロパティを水平オフセットに使用します。ホバーすると、オフセットは10pxにアニメーションします。

例4: テーマ設定のための<custom-ident>の使用

<custom-ident>構文を使用すると、定義済みの文字列値のセットを定義でき、CSS変数に事実上の列挙型（enum）を作成できます。これは、テーマ設定や異なる状態の制御に役立ちます。

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light; /* Default Theme */
}

body {
  background-color: var(--theme) == light ? #fff : #333;
  color: var(--theme) == light ? #000 : #fff;
}

.dark-theme {
  --theme: dark;
}

ここでは、--themeが<custom-ident>構文で登録されています。@propertyルール自体には許可された識別子は明示的にリストされていませんが、コードはそれらがlightとdarkであることを示唆しています。CSSは条件付きロジック（var(--theme) == light ? ... : ...）を使用して、現在のテーマに基づいて異なるスタイルを適用します。要素にdark-themeクラスを追加すると、テーマがダークに切り替わります。注: var()を使用した条件付きロジックは標準CSSではなく、通常プリプロセッサまたはJavaScriptが必要です。より標準的なアプローチは、CSSクラスとカスケードを使用することです:

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light;
}

body {
  background-color: #fff;
  color: #000;
}

body[data-theme="dark"] {
  background-color: #333;
  color: #fff;
}

/* JavaScript to toggle the theme */
/* document.body.setAttribute('data-theme', 'dark'); */

この改訂された例では、body要素のdata-theme属性を使用してテーマを制御します。JavaScript（コメントアウトされています）は、属性をlightとdarkの間で切り替えるために使用されます。これは、CSS変数を使用したテーマ設定のより堅牢で標準的なアプローチです。

@propertyを使用するメリット

@propertyを使用すると、いくつかの利点があります。

• コードの可読性と保守性の向上: カスタムプロパティに期待される値の型を明示的に定義することで、コードがより理解しやすくなり、エラーが発生しにくくなります。
• アニメーション機能の強化: @propertyはカスタムプロパティのスムーズなトランジションとアニメーションを可能にし、動的で魅力的なユーザーインターフェースを作成するための新たな可能性を広げます。
• パフォーマンスの向上: ブラウザは、登録されたカスタムプロパティを使用する要素のレンダリングを最適化できるため、パフォーマンスが向上します。
• 型安全性: ブラウザは、割り当てられた値が宣言された構文と一致することを検証し、予期しない動作を防ぎ、デバッグを容易にします。これは、多くの開発者がコードベースに貢献する大規模なプロジェクトで特に役立ちます。
• デフォルト値: 明示的に設定されていない場合でも、カスタムプロパティが常に有効な値を持つことを保証することで、エラーを防ぎ、CSSの堅牢性を向上させます。

ブラウザの互換性

2023年末現在、@propertyは良好ですが、普遍的なブラウザサポートではありません。Chrome、Firefox、Safari、Edgeを含むほとんどのモダンブラウザでサポートされています。しかし、古いブラウザではサポートされていない場合があります。@propertyを本番環境で使用する前に、必ずCan I use...などのウェブサイトで最新のブラウザ互換性情報を確認してください。

古いブラウザに対応するには、フィーチャークエリ（@supports）を使用してフォールバックスタイルを提供できます。

@supports (--property: value) {
  /* @propertyを使用するスタイル */
}

@supports not (--property: value) {
  /* @propertyをサポートしないブラウザのフォールバックスタイル */
}

--propertyとvalueを実際のカスタムプロパティとその値に置き換えてください。

@propertyを使用すべきタイミング

次のシナリオで@propertyの使用を検討してください:

• カスタムプロパティをアニメーション化する必要がある場合: これが@propertyの主なユースケースです。正しい構文でプロパティを登録すると、スムーズなアニメーションが可能になります。
• カスタムプロパティの型安全性を強制したい場合: カスタムプロパティが常に特定の型の値を保持するようにしたい場合は、@propertyを使用して登録します。
• カスタムプロパティにデフォルト値を提供したい場合: initial-value記述子を使用すると、フォールバック値を指定できます。
• 大規模なプロジェクトで: @propertyはコードの保守性を高め、エラーを防ぐため、多くの開発者が関わる大規模なプロジェクトで特に有益です。
• 再利用可能なコンポーネントやデザインシステムを作成する場合: @propertyは、コンポーネント間の一貫性と予測可能性を確保するのに役立ちます。

避けるべき一般的な間違い

• syntax記述子を忘れること: syntax記述子がないと、ブラウザは期待される値の型を認識せず、アニメーションが正しく機能しません。
• 間違ったsyntax値を使用すること: 誤った構文を選択すると、予期しない動作につながる可能性があります。期待される値の型を正確に反映する構文を選択するようにしてください。
• initial-valueを提供しないこと: 初期値がないと、カスタムプロパティが未定義になり、エラーにつながる可能性があります。常に適切なデフォルト値を提供してください。
• *を構文として過度に使用すること: 便利ですが、*を使用すると型チェックとアニメーションの利点が失われます。本当に任意の型の値を許可する必要がある場合にのみ使用してください。
• ブラウザの互換性を無視すること: 常にブラウザの互換性を確認し、古いブラウザ向けのフォールバックスタイルを提供してください。

@propertyとCSS Houdini

@propertyは、CSS Houdiniと呼ばれる一連のAPIの一部です。Houdiniを使用すると、開発者はブラウザのレンダリングエンジンを活用し、スタイル設定とレイアウトプロセスをかつてないほど制御できます。その他のHoudini APIには次のものがあります。

• Paint API: カスタムの背景画像とボーダーを定義できます。
• Animation Worklet API: ブラウザのコンポジター スレッドで直接実行される高性能なアニメーションを作成する方法を提供します。
• Layout API: カスタムレイアウトアルゴリズムを定義できます。
• Parser API: ブラウザのCSSパーサーにアクセスできます。

@propertyは比較的学習しやすいHoudini APIですが、より高度なHoudini機能を探索するきっかけとなります。

結論

@propertyは、カスタムプロパティの高度な機能を解き放つ強力なCSSアットルールです。カスタムプロパティをブラウザに登録することで、型安全性を強制し、スムーズなアニメーションを有効にし、CSSコード全体の堅牢性を向上させることができます。ブラウザのサポートは普遍的ではありませんが、特に大規模なプロジェクトやデザインシステムでの@propertyの使用の利点は、最新のウェブ開発にとって貴重なツールとなっています。@propertyを活用して、CSSスキルを次のレベルに引き上げましょう！