@財産

@property AT-Ruleは、Chrome（および潜在的にSafariおよびFirefox）に新しい追加が提供され、制御と機能が強化されたCSSカスタムプロパティの宣言を可能にします。現在、CSSには勾配内で特定のプロパティを直接移行する能力が不足しています。 @property対処することを目的としています。

ドラフトの仕様と「出荷する意図」文書は、その機能の概要を説明します。 @propertyルールは、外部セレクターブロック（ @mediaクエリに類似）を宣言し、使用前にカスタムプロパティの特性を登録します。この登録は、プロパティのsyntaxを指定します（例：<color></color> ）、 initial-value 、およびフラグinherits 。

JavaScript等価CSS.registerProperty()は、Houdiniイニシアチブの下で同じ登録を達成します。重要な利点は、以前に直接アニメーション化することが不可能なプロパティの遷移を可能にすることです。たとえば、擬似要素のような回避策を以前に必要とする線形勾配の開始色をスムーズに遷移させると、簡単になります。

 @property -gradient-start {
  構文： "<color> ";
  初期値：白;
  継承：false;
}

.el {
   - 勾配スタート：ホワイト;
  背景：線形勾配（var（ - グラデーションスタート）、ブラック）;
  トランジション： - 勾配スタート1S;
}

.el：Hover {
   - 勾配スタート：赤;
}</color>

これは、 @property --gradient-startをaとして定義するために機能します<color></color>、CSSがアニメーションを正しく処理できるようにします。これは、 attr()関数の現在の制限とは対照的です。<length></length> 。正確なリリース日は不明のままですが、Chromeの計画された実装と他のブラウザからの肯定的なシグナルは、広範囲にわたる採用が可能であることを示唆しています。

以上が@財産の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。