このページは 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 のプロパティと値（API レベル 1）

CSS Properties and Values API Level 1（Houdini Props と 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 Props と Vals では、カスタムプロパティを登録して、ブラウザが想定する内容を認識できます。

これで、カスタムプロパティ --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 Props と Vals の問題は 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 のプロパティと値（API レベル 1）

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

name: string

syntax: string

inherits: boolean

initialValue: string