CSSカスタムプロパティに@Propertyを使用します

Chromeは、 @property Propertyを使用してCSSカスタムプロパティの宣言をサポートし、文字列よりも詳細な情報を提供するようになりました。この記事では、この機能について詳しく説明します。

過去には、CSSカスタムプロパティの宣言は次のとおりでした。

 html {
   - ストップ：50％;
}

これで、 @propertyを使用して詳細を提供できます。

 @property -stop {
  構文： "<percentage> ";
  初期値：50％;
  継承：false;
}</percentage>

ブラウザは、このカスタムプロパティが文字列ではなくパーセンテージであることを知っています。他の便利なタイプには含まれます<integer></integer>そして<color></color>。この方法で情報をブラウザに伝えることにより、2つの値間の移行など、新しい機能を獲得します。

ただし、実際のアプリケーションでは、遷移する必要があるプロパティを明確に指定する必要があることに注意することが重要です（単純なtransition実装できません）。以下のデモは、UNA Kravetzの記事の例を再現しています。

カラーストップポイント（パーセンテージ）の位置をアニメーション化していますが、色自体をアニメーション化しようとしましたが、これはまだ機能しません。私はもともと、この新しい機能がこれを達成できると思っていました。人々は勾配をアニメーション化できないことについて長い間混乱してきました。 （Ana Tudorの記事を参照してください。）

カスタムプロパティをサポートしていないブラウザの場合、サポートを提供するために、より高いレベルでプロパティを再編成できます。これは少し面白いですね。 Safariは、このHoudiniベースのテクノロジーに関心を示していますが、まだサポートされていません。 Firefox？状況は不明であり、レイオフの前に「プロトタイピングに値する」とマークしました。

@property 、CSSカスタムプロパティの奇妙なフォールバックの問題を解決することもできます。

他のカスタムプロパティと同様に、（ varを使用して）値を取得したり（書き込み/書き直し）値を取得できますが、Houdiniカスタムプロパティの場合、上書き時に誤った値を設定すると、CSSレンダリングエンジンはラインを無視する代わりに初期値（フォールバック値）を送信します。

以上がCSSカスタムプロパティに@Propertyを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。