CSS での遷移とデータ保護
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)