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

Houdini の新しい API によるスマートなカスタムプロパティ

CSS での遷移とデータ保護

Sam Richard

CSS カスタムプロパティ（CSS 変数）を使用すると、CSS で独自のプロパティを定義し、その値を CSS 全体で使用できます。現在の時点では非常に便利ですが、扱いにくい欠点があります。任意の値を取ることができるため、予期しない値で誤ってオーバーライドされる可能性があります。値は常に親から継承され、遷移できません。Chrome 78 で利用可能になった Houdini の CSS Properties and Values API Level 1 により、これらの欠点は克服され、CSS カスタムプロパティは非常に強力なものになりました。

Houdini とは

新しい API について説明する前に、Houdini について簡単に説明します。CSS-TAG Houdini タスクフォース（CSS Houdini または Houdini とも呼ばれます）は、「ウェブ上のスタイルとレイアウトの「魔法」を説明する機能を開発」するために存在します。Houdini 仕様のコレクションは、ブラウザのレンダリングエンジンの機能を活用するように設計されており、スタイルの詳細な分析とレンダリングエンジンの拡張の両方を可能にします。これにより、JavaScript で型付きの CSS 値を使用したり、パフォーマンスに影響を与えることなくポリフィルリングや新しい CSS を作成したりできるようになりました。Houdini は、ウェブ上の創造性を飛躍的に高める可能性があります。

CSS Properties and Values API レベル 1

CSS Properties and Values API Level 1（Houdini Props and Vals）を使用すると、カスタムプロパティに構造を設定できます。カスタムプロパティを使用する場合の現在の状況は次のとおりです。

.thing {
  --my-color: green;
}

カスタムプロパティには型がないため、予期しない方法でオーバーライドされる可能性があります。たとえば、URL を使用して --my-color を定義するとどうなるかを考えてみましょう。

.thing {
  --my-color: url('not-a-color');
  color: var(--my-color);
}

ここでは、--my-color が入力されていないため、URL が有効な色値ではないことを認識していません。使用すると、デフォルト値（color の場合は黒、background の場合は透明）にフォールバックします。Houdini のプロップと値を使用すると、カスタムプロパティを登録して、ブラウザに適切な値を認識させることができます。

これで、カスタムプロパティ --my-color が色として登録されました。これにより、許可される値の種類と、そのプロパティの型と処理方法をブラウザに伝えることができます。

登録済みプロパティの構造

プロパティの登録は次のようになります。

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

次のオプションを使用できます。

`name: string`

カスタムプロパティの名前。

`syntax: string`

カスタムプロパティを解析する方法。使用可能な値の一覧については、CSS の値と単位の仕様をご覧ください。デフォルトは * です。

`inherits: boolean`

親の値を継承するかどうか。デフォルトは true です。

`initialValue: string`

カスタムプロパティの初期値。

syntax について詳しく見ていきましょう。数値から色、<custom-ident> タイプまで、有効なオプションは多数あります。これらの構文は、次の値を使用して変更することもできます。

+ を追加すると、その構文の値をスペース区切りのリストで指定できることを示します。たとえば、<length>+ は長さのスペース区切りのリストです。
# を追加すると、その構文の値のカンマ区切りのリストが受け入れられることを意味します。たとえば、<color># は色のカンマ区切りのリストです。
構文または識別子の間に | を追加すると、指定されたオプションのいずれかが有効であることを示します。たとえば、<color># | <url> | magic には、色のカンマ区切りリスト、URL、または magic という単語を指定できます。

解決済み

Houdini のプロップと値には 2 つの注意点があります。1 つ目は、定義した後、既存の登録済みプロパティを更新する方法がないことです。プロパティを再登録しようとすると、すでに定義されていることを示すエラーがスローされます。

2 つ目は、標準プロパティとは異なり、登録済みプロパティは解析時に検証されないことです。計算時に検証されます。つまり、要素のプロパティを検査するときに無効な値が無効として表示されず、有効なプロパティの後に無効なプロパティを含めても有効なプロパティにフォールバックされません。ただし、無効なプロパティは登録済みプロパティのデフォルトにフォールバックします。

カスタムプロパティのアニメーション化

登録されたカスタムプロパティには、型チェックを超えた楽しい特典があります。それは、アニメーション化できることです。基本的なアニメーションの例は次のようになります。

<script>
CSS.registerProperty({
  name: '--stop-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'blue',
});
</script>

<style>
button {
  --stop-color: red;
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}
</style>

ボタンにカーソルを合わせると、赤色から緑色にアニメーション表示されます。プロパティを登録しないと、色が飛びます。登録されていない場合、ブラウザは値と値の間で何が期待されるかを知ることができないため、値を遷移できることを保証できません。この例をさらに進めると、CSS グラデーションをアニメーション化できます。次の CSS は、同じ登録プロパティを使用して記述できます。

button {
  --stop-color: red;
  background: linear-gradient(var(--stop-color), black);
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}

これにより、linear-gradient の一部であるカスタムプロパティがアニメーション化され、リニアグラデーションもアニメーション化されます。以下の Glitch で、コード全体を実際に確認し、自分で試してみてください。

まとめ

Houdini はブラウザに導入される予定です。これにより、CSS の操作と拡張にまったく新しい方法が生まれます。Paint API がすでにリリースされ、カスタムプロップと値が追加されたことで、クリエイティブツールボックスが拡張され、型付き CSS プロパティを定義して、それらを使用して新しく魅力的なデザインを作成してアニメーション化できるようになりました。Houdini の問題キューでは、フィードバックを送信したり、Houdini の今後の予定を確認したりできます。Houdini は、ウェブ上のスタイルとレイアウトの「魔法」を説明する機能を開発するために存在します。ぜひ、これらの魔法のような機能を活用してください。

写真提供: Maik Jonietz（Unsplash）

Houdini の新しい API によるスマートなカスタム プロパティ

Houdini とは

CSS Properties and Values API レベル 1

登録済みプロパティの構造

name: string

syntax: string

inherits: boolean

initialValue: string