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

@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 は文字列として読み取られますデータがあるのです。

指定した syntax を使用して登録済みカスタムプロパティを書き込む場合は、initial-value も含める必要があります。

フォールバック値

他のカスタムプロパティと同様に、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>

</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>

</ph> グラデーションの境界線がなめらかに変化します。Glitch のデモを見る

をご覧ください。

まとめ

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

写真撮影: Cristian Escobar、Unsplash より

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

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

フォールバック値

構文

まとめ

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