CSS変数を使用している@プロパティを使用します

あなたはCSS変数に間違ったものを指定し、時間のデバッグを費やすとき何回それをあなたと起こっている?新しいルールをチェックアウト@property .

何@property ?
The @property はCSS Houdini . これは、開発者がカスタムCSSのプロパティを定義することができます.「CSS変数のポイントではないか」と思うかもしれません.さて、我々が使用するときvar() CSSで関数を変数として読み込みます.使用するとき@property , 実際にデータを読み込みます.これは基本的に超大国とCSSの変数です.
以前@property 画像に入ったので、カスタムプロパティを登録するJavaScriptコードを追加する必要がありました.

CSS.registerProperty({
  name: '--color',
  syntax: '<color>',
  initialValue: 'yellow',
  inherits: false
});

新しい@property , こうすることができます.

@property --color {
  syntax: "<color>";
  initial-value: magenta;
  inherits: false;
}

ここでは、私たちは--color . 私たちはsyntax 変数の値の型を示すフィールド.いくつかの可能な値syntax は

長さ

数

色

割合

URL

整数

アングル

解像度

注意-将来的にはもっと多くのプロパティがあるかもしれませんが、これに関するドキュメントはたくさんありません.
これを理解するコードを見てみましょう.

@property --color {
  syntax: "<color>";
  initial-value: yellow;
  inherits: false;
}

私たちは財産を作った--color . チェックする構文が色であることを指定しました.これは16進数コード、RGB等を含んでいますinitial-value to yellow . 何を正確に説明しますinitial-value あとで.ここでは、このプロパティを使用するコードを追加します.

.box {
  background: var(--color); /* yellow */
}

出力はyellow . ここがどこですinitial-value 遊びに出る.我々は指定していないので--color 内部変数.box , 中の色initial-value が使用されます.
小さな変更を行い、プロパティと同じ名前の変数を定義しましょう.

.box {
  --color: cyan;
  background: var(--color); /* cyan */
}

さて、出力は次のようになります-
箱の色はcyan として--color 変数はintial-value の--color プロパティ.なぜ、私はちょうどCSS変数を使うことができませんか?覚えてsyntax 指定したプロパティ?我々のコードの小さな変化をすることによって何が意味するかを理解しましょう

.box {
  --color: 234; /* Set the value to a number */
  background: var(--color); /* cyan */
}

出力を見てください.
ご覧の通り、色は黄色です.これは--color 変数は<color> 値syntax フィールド.したがって、プロパティはinitial-value すなわちyellow .
このcodepenで全体的なデモをチェックしてください.

ブラウザサポートの重要な注意
君たちが心に留めておくべき一つのことは@property は実験的です.これは、クロム、オペラ、いくつかの他のブラウザで利用可能です.私は今のようにフォールバックなしで生産レベルのアプリでこれを使用することをお勧めしません.Check this link to know more

なぜ使用@property ?

フォールバック
開発者がボディー上のプロパティを定義するのを忘れて、ちょうど使用されるようにしましょうvar(--whateverName) . 値はinitial-value で@property .

検証
より頻繁に、変数は必要なものより異なる単位を持つかもしれません.例えば、開発者はパーセンテージの代わりに数を指定することができます.これらの場合、指定された値はsyntax プロパティ.値はinitial-value バグを防ぐ.

この点まで読んでくれてありがとう.この動画はお気に入りから削除されています.もしそうなら、ポストのように、私に従ってください.良い一日を👋