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; }
これで、var(--colorPrimary)
を介して、他の CSS カスタム プロパティと同様に --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 を記述できるようになりました。現在許可されている型は次のとおりです。
length
number
percentage
length-percentage
color
image
url
integer
angle
time
resolution
transform-list
transform-function
custom-ident
(カスタム ID の文字列)
構文を設定すると、ブラウザでカスタム プロパティの型チェックが可能になります。これには多くのメリットがあります。
この点を説明するために、グラデーションをアニメーション化する方法を説明します。現時点では、各勾配宣言は文字列として解析されるため、勾配値間をスムーズにアニメーション化(または補間)する方法はありません。
この例では、グラデーションの終了割合が、カーソルを合わせたときに開始値の 40% から終了値の 100% までアニメーション化されています。上部のグラデーション カラーが下に滑らかに変化します。
左のブラウザは Houdini の Properties and Values API をサポートしているため、グラデーションの停止の遷移をスムーズに行うことができます。右のブラウザでは対応していません。非対応のブラウザは、この変更をポイント A からポイント B に移動する文字列としてのみ認識できます。値を補間できないため、スムーズに移行できません。
ただし、カスタム プロパティを記述するときに構文型を宣言し、それらのカスタム プロパティを使用してアニメーションを有効にすると、遷移が発生します。カスタム プロパティ --gradPoint
は次のようにインスタンス化できます。
/* Check for Houdini support & register property */
@supports (background: paint(something)) {
@property --gradPoint {
syntax: '<percentage>';
inherits: false;
initial-value: 40%;
}
}
アニメーション化するときは、値を最初の 40%
から 100%
に更新します。
@supports (background: paint(something)) {
.post:hover,
.post:focus {
--gradPoint: 100%;
}
}
これにより、スムーズなグラデーション移行が可能になります。
おわりに
@property
ルールを使用すると、CSS 内に意味的に意味のある CSS を記述できるため、魅力的なテクノロジーをさらに利用しやすくなります。CSS Houdini と Properties and Values API の詳細については、以下のリソースをご覧ください。
写真提供元: Cristian Escobar(Unsplash)