このページは 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 Level 1

CSS プロパティと値 API レベル 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 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 のプロパティと値には 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>

ボタンにカーソルを合わせると、赤から緑にアニメーション表示されます。プロパティを登録しないと、ある色から別の色にジャンプします。登録されていないと、ブラウザは 1 つの値と次の値の間に何が起こるかを予測できないため、それらを移行できることを保証できません。この例をさらに一歩進めて、CSS グラデーションをアニメーション化することもできます。次の CSS は、同じ登録済みプロパティで記述できます。

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

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

これにより、linear-gradient の一部であるカスタムプロパティがアニメーション化され、線形グラデーションがアニメーション化されます。以下の Codepen で、完全なコードの動作を確認し、ご自身で試してみてください。

まとめ

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

写真: Maik Jonietz（Unsplash）

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

Houdini とは

CSS Properties and Values API Level 1

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

name: string

syntax: string

inherits: boolean

initialValue: string