Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

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 Level 1

CSS Properties and Values 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 のプロパティと値を使用すると、カスタムプロパティを登録して、ブラウザがそのプロパティを認識できるようにすることができます。

これで、カスタムプロパティ --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>

ボタンにカーソルを合わせると、赤から緑に変わるアニメーションが表示されます。プロパティを登録しないと、ある色から別の色にジャンプします。登録されていないと、ブラウザは 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 がすでにリリースされ、Custom Props and Vals が追加されたことで、クリエイティブツールボックスが拡張され、型付き CSS プロパティを定義して、それらを使用して新しい魅力的なデザインを作成してアニメーション化できるようになりました。Houdini の問題キューでは、フィードバックを送信したり、Houdini の今後の予定を確認したりできます。Houdini は、ウェブ上のスタイル設定とレイアウトの「魔法」を説明する機能を開発するために存在します。ぜひ、これらの魔法の機能を有効に活用してください。

Houdini の新しい API によるスマートなカスタム プロパティ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

Houdini とは

CSS Properties and Values API Level 1

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

name: string

syntax: string

inherits: boolean

initialValue: string