このページは Cloud Translation API によって翻訳されました。

@property: CSS 変数の機能を強化

Una Kravets

CSS Houdini は、CSS レンダリングエンジンの一部を公開し、デベロッパーが CSS オブジェクトモデルにアクセスできるようにする一連の低レベル API を包括する総称です。これは CSS エコシステムにとって大きな変化です。ブラウザベンダーがこれらの機能の組み込みサポートを提供するのを待たずに、デベロッパーがカスタム CSS の読み取りと解析方法をブラウザに指示できるようになります。とても楽しみです。

Houdini 傘下で CSS に追加された最もエキサイティングな機能の 1 つが Properties and Values API です。

この API は、CSS カスタムプロパティ（一般に CSS 変数とも呼ばれます）にセマンティックな意味（構文で定義）やフォールバック値を付与することで、CSS テストを可能にします。

Houdini カスタムプロパティの作成

カスタムプロパティ（CSS 変数など）を設定する例を次に示します。構文（型）、初期値（フォールバック）、継承ブール値（親から値を継承するかどうか）が追加されています。現在、この操作を行う方法は JavaScript の CSS.registerProperty() を使用していますが、対応しているブラウザでは @property を使用できます。

個別の JavaScript ファイル（Chromium 78）

CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});

CSS ファイルに含まれる（Chromium 85）

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

これで、他の CSS カスタムプロパティと同様に、var(--colorPrimary) を介して --colorPrimary にアクセスできるようになりました。ただし、ここでの違いは、--colorPrimary が文字列として読み取られるだけではないことです。データがある

syntax を指定して登録済みのカスタムプロパティを記述する場合は、initial-value も含める必要があります。

フォールバック値

他のカスタムプロパティと同様に、値を取得（var を使用）または設定（書き込み/書き換え）できますが、Houdini カスタムプロパティでは、オーバーライド時に falsey 値を設定すると、CSS レンダリングエンジンは行を無視せず、初期値（その代替値）を送信します。

以下の例を考えてみましょう。--colorPrimary 変数の initial-value は magenta です。しかし、デベロッパーは「23」という無効な値を指定しています。@property がないと、CSS パーサーは無効なコードを無視します。これで、パーサーは magenta にフォールバックします。これにより、CSS 内での真のフォールバックとテストが可能になります。使用できます。

.card {
  background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
  --colorPrimary: yellow;
  background-color: var(--colorPrimary); /* yellow */
}

.another-card {
  --colorPrimary: 23;
  background-color: var(--colorPrimary); /* magenta */
}

構文

構文機能を使用すると、タイプを指定してセマンティック CSS を記述できるようになりました。現在許可されているタイプは次のとおりです。

length
number
percentage
length-percentage
color
image
url
integer
angle
time
resolution
transform-list
transform-function
custom-ident（カスタム識別子文字列）

構文を設定すると、ブラウザでカスタムプロパティの型チェックが可能になります。これには多くのメリットがあります。

この点を説明するために、グラデーションをアニメーション化する方法を説明します。現在、各グラデーション宣言は文字列として解析されるため、グラデーション値間でスムーズにアニメーション化（または補間）する方法はありません。

「number」構文のカスタムプロパティを使用すると、左側のグラデーションでストップの値間のスムーズな遷移が示されます。右側のグラデーションはデフォルトのカスタムプロパティ（定義された構文なし）を使用し、急激な遷移を示しています。

この例では、ホバー操作によって、グラデーションの停止率が開始値の 40% から終了値の 100% にアニメーション化されています。上部のグラデーションの色が下に向かってスムーズに変化します。

左側のブラウザは Houdini Properties and Values API をサポートしており、グラデーションのストップのスムーズな遷移を可能にしています。右側のブラウザは従っていない。サポートされていないブラウザは、この変更を A 地点から B 地点への文字列としてのみ認識できます。値を補間する機会がないため、スムーズな遷移は行われません。

ただし、カスタムプロパティの記述時に構文タイプを宣言し、そのカスタムプロパティを使用してアニメーションを有効にすると、遷移が表示されます。カスタムプロパティ --gradPoint を次のようにインスタンス化できます。

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

アニメーション化するときに、値を初期の 40% から 100% に更新できます。

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

これにより、グラデーションの滑らかな遷移が可能になります。

グラデーションの枠線がスムーズに遷移します。CodePen でデモを見る

まとめ

@property ルールを使用すると、CSS 内で意味のある CSS を記述できるため、このエキサイティングなテクノロジーをさらに簡単に利用できます。CSS Houdini と Properties and Values API の詳細については、次のリソースをご覧ください。

写真: Cristian Escobar（Unsplash）

@property: CSS 変数の機能を強化

Houdini カスタム プロパティの作成

フォールバック値

構文

まとめ

Houdini カスタムプロパティの作成