2

--test2次の CSS コードは、変数が定義されているかどうかによって異なる結果を生成します。

html::before {
    content: "test1:" var(--test1) " test2:" var(--test2);
}

--test1とが定義されている場合--test2、テスト コンテンツはビューポート内に表示されます。--test1が定義されてい--test2ても定義されていない場合、テスト コンテンツは表示されません。

これは正しい動作ですか? もしそうなら、それはなぜですか?

4

1 に答える 1

1

仕様から：

上記で説明したように、初期値を持つvar()カスタム プロパティを参照するが含まれている場合、または有効なカスタム プロパティを使用しているが、その var() 関数を代入した後にプロパティ値を使用している場合、宣言は計算値の時点で無効になる可能性があります。無効です。これが発生すると、プロパティの値が unset キーワードとして指定されたかのように、プロパティの計算値は、プロパティが継承されているかどうかに応じて、プロパティの継承値または初期値のいずれかになります。

あなたの場合、変数を定義しなかったため、初期値にもフォールバックするinitial値を持っているため（これは です）、何も表示されません。contentnone

同じ仕様から：

カスタム プロパティに初期値がある場合、var() 関数はそれを置換に使用できません。そうしようとすると、有効なフォールバックが指定されていない限り、計算値の時点で宣言が無効になります。

したがって、フォールバックを検討することをお勧めします。

html::before {
    content: "test1:" var(--test1,"") " test2:" var(--test2,"");
}

于 2020-12-10T09:05:30.837 に答える