8

CSS 変数のフォールバック値でコンマを使用するにはどうすればよいですか?

たとえば、これは問題ありません:var(--color, #f00)ですが、これは変var(--font-body, Verdana, sans-serif)です。

font-familyアイデアは、フォールバック値が say の変数を使用してを設定できるようにすることVerdana, sans-serifです。

編集:これは実際には、CSS プロパティをサポートするブラウザーではかなりうまく機能しますが、問題は Google Polymer のポリフィルに起因するようです。

将来の参考のために、フォントとフォント ファミリの両方のフォールバックに変数を使用することになりました (今のところ、これが最もクリーンな方法のようです)。

font-family: var(--font-body, Verdana), var(--font-body-family, sans-serif)
4

3 に答える 3

10

以下はW3C 仕様からの抜粋です: (強調は私のものです)

注: フォールバックの構文は、カスタム プロパティの構文と同様に、コンマを使用できます。たとえば、var(--foo, red, blue) は red, blue のフォールバックを定義します。つまり、最初のコンマから関数の末尾までがフォールバック値と見なされます。

上記のステートメントからわかるように、が定義されていないVerdana, sans-serifときにフォールバック値として設定することを意図している場合--font-bodyは、問題の構文が機能することが期待されます。仕様ごとに引用符は必要ありません。

CSS 変数をサポートするブラウザーを持っていないため、次のコードをテストできませんでしたが、仕様に基づいて動作するはずです。

.component .item1 {
  --font-body: Arial;
  font-family: var(--font-body, Verdana, sans-serif); 
  /* should result in font-family: Arial */
}
.component .item2 {
  font-family: var(--font-body, Verdana, sans-serif);
  /* should result in font-family: Verdana, sans-serif */
}
<div class=component>
  <p class=item1>Arial
  <p class=item2>Verdana, sans-serif
</div>

于 2016-05-25T16:25:17.037 に答える