CSS Houdini は、CSS レンダリング エンジンの一部を公開し、デベロッパーに CSS オブジェクト モデルへのアクセス権を付与する、一連の低レベル API を総称する用語です。これは CSS エコシステムにとって大きな変化です。ブラウザ ベンダーがこれらの機能の組み込みサポートを提供するのを待たずに、デベロッパーがカスタム CSS の読み取りと解析方法をブラウザに指示できるようになります。楽しみですね。
Houdini の包括的な CSS に追加された機能の一つが、Properties and Values API です。
この API は、CSS カスタム プロパティ（一般に CSS 変数とも呼ばれます）にセマンティックな意味（構文で定義）やフォールバック値を付与することで、CSS テストを可能にします。
Houdini カスタム プロパティを記述する
カスタム プロパティ（CSS 変数など）を設定する例を次に示します。構文（型）、初期値（フォールバック）、継承ブール値（親から値を継承するかどうか）が追加されています。現在の方法は JavaScript の CSS.registerProperty() を使用しますが、対応しているブラウザでは @property を使用できます。
CSS.registerProperty({
name: '--colorPrimary',
syntax: '<color>',
initialValue: 'magenta',
inherits: false
});
@property --colorPrimary {
syntax: '<color>';
initial-value: magenta;
inherits: false;
}
これで、他の CSS カスタム プロパティと同様に、var(--colorPrimary) を介して --colorPrimary にアクセスできるようになりました。ただし、ここでの違いは、--colorPrimary が文字列として読み取られるだけではないことです。データがある
フォールバック値
他のカスタム プロパティと同様に、値を取得（var を使用）または設定（書き込み/書き換え）できますが、Houdini カスタム プロパティでは、オーバーライド時に falsey 値を設定した場合、CSS レンダリング エンジンは、行を無視するのではなく、初期値（フォールバック値）を送信します。
以下の例を考えてみましょう。--colorPrimary 変数の initial-value は magenta です。しかし、デベロッパーは「23」という無効な値を指定しています。@property がないと、CSS パーサーは無効なコードを無視します。これで、パーサーは magenta にフォールバックします。これにより、CSS 内での真のフォールバックとテストが可能になります。使用できます。
.card {
background-color: var(--colorPrimary); /* magenta */
}
.highlight-card {
--colorPrimary: yellow;
background-color: var(--colorPrimary); /* yellow */
}
.another-card {
--colorPrimary: 23;
background-color: var(--colorPrimary); /* magenta */
}
構文
構文機能を使用すると、タイプを指定してセマンティック CSS を記述できるようになりました。現在許可されているタイプは次のとおりです。
lengthnumberpercentagelength-percentagecolorimageurlintegerangletimeresolutiontransform-listtransform-functioncustom-ident（カスタム識別子文字列）
構文を設定すると、ブラウザによるカスタム プロパティの型チェックが可能になります。これには多くのメリットがあります。
この点を説明するために、グラデーションをアニメーション化する方法を説明します。現時点では、各グラデーション宣言が文字列として解析されるため、グラデーション値間をスムーズにアニメーション化（または補間）する方法はありません。
この例では、ホバー操作により、グラデーションの停止率が開始値の 40% から終了値の 100% にアニメーション化されています。上のグラデーションの色が滑らかに下降しているはずです。
左側のブラウザは Houdini Properties and Values API をサポートしており、グラデーションの停止にスムーズに移行できます。右側のブラウザでは、そうではありません。サポートされていないブラウザは、この変更を A 地点から B 地点への文字列としてのみ認識できます。値を補間する機会がないため、スムーズな遷移は表示されません。
ただし、カスタム プロパティの記述時に構文タイプを宣言し、そのカスタム プロパティを使用してアニメーションを有効にすると、遷移が表示されます。カスタム プロパティ --gradPoint を次のようにインスタンス化できます。
@property --gradPoint {
syntax: '<percentage>';
inherits: false;
initial-value: 40%;
}
次に、アニメーション化の段階で、値を最初の 40% から 100% に更新します。
.post:hover,
.post:focus {
--gradPoint: 100%;
}
これにより、グラデーションの滑らかな遷移が可能になります。
まとめ
@property ルールを使用すると、CSS 自体で意味的に意味のある CSS を記述できるため、このエキサイティングなテクノロジーをさらに簡単に利用できます。CSS Houdini と Properties and Values API の詳細については、次のリソースをご覧ください。
写真撮影: Cristian Escobar、Unsplash より