@property: CSS 変数の機能を強化

Una Kravets

CSS Houdini は、 低レベル API のセットです。CSS レンダリング エンジンの一部を公開し、 CSS オブジェクト モデルにアクセスできるようにします。これは非常に CSS のエコシステムにも影響が及ぶため、デベロッパーはブラウザに対して ブラウザ ベンダーから提供されるのを待たずにカスタム CSS を読み取って解析する これらの機能に対するサポートが組み込まれています。とてもエキサイティングです。

Houdini の傘の中で最も進化した CSS のひとつが、 プロパティと値 API。

この API は、CSS カスタム プロパティ（ CSS 変数など）に意味的な意味（構文によって定義される）を与えたり、 代替値を使用して CSS テストを有効にします。

Houdini カスタム プロパティを記述する

これはカスタム プロパティ（CSS 変数）の設定例ですが、ここでは 構文（型）、初期値（フォールバック）、継承ブール値（ 親から値を継承するのでしょうか？）。現時点では、 JavaScript では CSS.registerProperty() を使用しますが、対応ブラウザでは、 @property:

個別の JavaScript ファイル（Chromium 78）
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});
CSS ファイルに含める（Chromium 85）
@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

これで、他の CSS カスタム プロパティと同様に、次のコードを使用して --colorPrimary にアクセスできるようになりました。 var(--colorPrimary)。ただし、ここでの違いは --colorPrimary は 文字列として読み取られますデータがあるのです。

フォールバック値

他のカスタム プロパティと同様に、var を使用して取得するか、 値（書き込み/書き換え）ですが、Houdini カスタム プロパティでは、 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（カスタム識別子文字列）

構文を設定すると、ブラウザによるカスタム プロパティの型チェックが可能になります。 これには多くのメリットがあります。

この点を説明するため、グラデーションをアニメーション化する方法を説明します。現在、 このように、グラデーション値の間でスムーズにアニメーション化（または補間）する方法はありません。 各勾配宣言が文字列として解析されます。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 「数値」によるカスタム プロパティの使用すると、左側のグラデーションは、 変化します。右側のグラデーションでは、デフォルトのカスタム プロパティが使用されています （構文が定義されていない）場合、急激な遷移を示します。

この例では、グラデーションの停止割合が開始時からアニメーション化されています。 値を 40% から終了値 100% に変更します。[ 最上部のグラデーションの色が滑らかに 下降しています

左のブラウザは Houdini Properties and Values API をサポートしています。 これにより 滑らかなグラデーション停止時の 遷移が可能になります右のブラウザでは、そうではありません。「 非対応ブラウザがこの変更を認識できるのは、 移動します値を補間する機会はありません。 滑らかな遷移は見られません

ただし、カスタム プロパティの作成時に構文型を宣言し、 カスタムプロパティを使って アニメーションを有効にしますマイページ 次のように、カスタム プロパティ --gradPoint をインスタンス化できます。

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

次に、アニメーション化の段階で、値を最初の 40% から 100% に更新します。

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

これで、グラデーションの滑らかな遷移が可能になります。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> グラデーションの境界線がなめらかに変化します。Glitch のデモを見る
をご覧ください。

まとめ

@property ルールは、 これによって、CSS 自体に意味的に意味のある CSS を記述できます。学習内容 CSS Houdini と Properties and Values API の詳細については、 リソース:

写真撮影: Cristian Escobar、Unsplash より