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

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

Una Kravets

CSS Houdini は、CSS レンダリングエンジンの一部を公開し、デベロッパーが CSS オブジェクトモデルにアクセスできるようにする低レベル API をまとめた総称です。これは CSS エコシステムにとって大きな変化です。これによりデベロッパーは、ブラウザベンダーがこれらの機能の組み込みサポートを提供するのを待たずに、カスタム CSS の読み取り方法と解析方法をブラウザに指示できるようになります。とてもエキサイティングです。

Houdini 傘下の CSS の優れた機能の一つに、Properties and Values API があります。

この API は、CSS カスタムプロパティ（一般に CSS 変数とも呼ばれます）を強化し、セマンティックな意味（構文で定義）とフォールバック値を提供します。これにより、CSS のテストが可能になります。

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

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

別の JavaScript ファイル（Chromium 78）

CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '',
  initialValue: 'magenta',
  inherits: false
});

CSS ファイルに含まれています（Chromium 85）

@property --colorPrimary {
  syntax: '';
  initial-value: magenta;
  inherits: false;
}

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

syntax を指定して、登録済みのカスタムプロパティを記述する場合は、initial-value も含める必要があります。

代替値

他のカスタムプロパティと同様に、値を取得（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 の文字列）

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

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

「number」構文でカスタムプロパティを使用すると、左側のグラデーションにより、停車地の値間のスムーズな遷移が示されます。右側のグラデーションでは、デフォルトのカスタムプロパティ（構文が定義されていない）を使用しており、急に変化しています。

この例では、グラデーションの終了割合が、カーソルを合わせたときに開始値の 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%;
  }
}

これにより、スムーズなグラデーション移行が可能になります。

グラデーションの枠線がスムーズに遷移します。Glitch でのデモを見る

おわりに

@property ルールを使用すると、CSS 内に意味的に意味のある CSS を記述できるため、魅力的なテクノロジーをさらに利用しやすくなります。CSS Houdini と Properties and Values API の詳細については、以下のリソースをご覧ください。

写真提供元: Cristian Escobar（Unsplash）

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

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

代替値

構文

おわりに

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