このページは 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 Task Force（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 つ目は、定義した後、既存の登録済みプロパティを更新する方法がないことです。プロパティを再登録しようとすると、すでに定義されていることを示すエラーがスローされます。

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

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

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

<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 とカスタム Props と Vals によって、クリエイティブツールボックスが拡張され、型指定された CSS プロパティを定義し、それらを使用して新しく魅力的なデザインを作成し、アニメーション化できるようになりました。また、Houdini の問題キューでは、フィードバックを寄せて Houdini の今後の予定を確認できます。Houdini は、ウェブ上のスタイリングとレイアウトの「魔法」を説明する機能を開発するために存在します。そうした魔法の機能をぜひ活用してください。

写真提供: Maik Jonietz（Unsplash）

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

Houdini とは

CSS Properties and Values API レベル 1

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

name: string

syntax: string

inherits: boolean

initialValue: string