var()の第2引数ってなんなの？「var(–vh, 1vh)」とかどっかで見たけど意味わかんないんですけど？

cssのカスタムプロパティという機能。カスタムプロパティっていうのはざくっというとcss内で変数を作って使いまわせるという超便利機能で、var()を使って変数の値を読みだすんですよね。

んで冒頭のvarの第2引数ってんなんなの？という問題。ちょっと見ていきましょう。

 

varの第2引数は、「第1引数がない時」の値

var()の第二引数は「第一引数がない時」の値となります。

冒頭で見た「var(–vh, 1vh)」を例にすると、まとめ

 

  1. 「–vh」の値を取ってくるぜぃ！
  2. …なかったぜぃ。代わりに1vhを使うぜぃ

 

というコト。語尾が変なコソドロ風なのは放っといてもらうとして。

cssのカスタムプロパティで「–vh」をちゃんと宣言してるならいいんですがない時は「1vh」を使いますよ！という事。デフォルト値、とかフォールバック（失敗時の保険）とかそういう感じ、ですね。

 

まとめ

cssのカスタムプロパティを読みだすときに使うvar()の第2引数の正体について紹介しました。

結局はフォールバック。第1引数が宣言されてない時にこっち使ってね！という値になります。

css内でrootに設定してるときは設定し忘れ、というのはなかなかないと思いますが、このカスタムプロパティはjavascriptからも設定ができるので、そういう入り組んだ使用状況だと設定し忘れ、とかタイミングによって設定できてない、とかが起こり得ます。

なのでそういう入り組んだカスタムプロパティの使い方をしているならフォールバックである第2引数は設定しておく方がおすすめです。

（例で出した「var(–vh, 1vh)」も–vhをjavascriptで設定するときによく使われるので、第2引数はあった方がいいんです。）

参考：スマホで100vhが見切れる問題の解決方法3つ

 

参考にしてみてくださいね。

次：cssカスタムプロパティの便利な使い方！サクッと簡単まとめ