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

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

CSS の移行とデータ保護

Sam Richard

CSS カスタムプロパティ（CSS）変数を使用すると、CSS で独自のプロパティを定義し、その値を CSS。現在では非常に便利だが、欠点があり、どのような価値でも取ることができるため、誤ってオーバーライドされた場合、値は常にその親を移行することはできません。Houdini の CSS プロパティと Values API レベル 1、 Chrome 78 で利用可能になりました。これらの欠点はさらになくなり、CSS ではカスタムプロパティは驚くほど強力です。

Houdini とは

新しい API について説明する前に、Houdini について簡単に説明します。CSS-TAG Houdini Task Force（CSS Houdini、または単に Houdini）は、「ML の魔法」を説明する機能を開発し、カスタマイズすることもできます Houdini 仕様のコレクションは次のとおりです。ブラウザのレンダリングエンジンが強化され、レンダリングエンジンを拡張できることをご理解いただけたと思います。これにより、JavaScript で CSS 値を入力し、新しい CSS をポリフィルまたは作成することができます。パフォーマンス上の問題がない場合もありますHoudini はウェブの創造性を大きく高めることができます。

CSS Properties and Values API レベル 1

CSS Properties and Values API レベル 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>

ボタンにカーソルを合わせると、赤から緑に変化します。なしプロパティを登録すると色が変化しますブラウザは 2 つのサーバー間での情報をそれらの値を移行することは保証できません。ただし、この例をさらに進めて、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 を操作、拡張できます。塗料 API はすでにリリースされています今ではカスタムプロパティと Vals というクリエイティブツールボックスが拡張され型指定された CSS プロパティを定義し、それらを使用して新しく魅力的な新しいプロパティを作成、アニメーション化する考えていますその他にも、Houdini 号で発表される予定ですキューに配置できます。 Houdini の今後の予定も確認しましょうHoudini は特徴量エンジニアリングで説明するスタイルやレイアウトが気になるかもしれません魔法のような機能を存分に活用しましょう。

撮影者 Maik Jonietz 氏オンスプラッシュを解除

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

Houdini とは

CSS Properties and Values API レベル 1

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

name: string

syntax: string

inherits: boolean

initialValue: string