<mini> CSS のちょっとした話

　理解したらすっきりした。

　久々に開発の話。

.container {
  margin-top: max(0, 16px - .5em)
}

　一件何も問題なさそうな記述。

しかし、この記述🙅ダメです。

-

【検証】

（読み飛ばして大丈夫です）

　まず、これを CSS 変数を使って分解してみた。

.container {
  --constant: calc(16px - .5em)
  margin-top: max(0, var(--constant))
}

動きます。

　calc がないからダメ？

.container {
  margin-top: max(0, calc(16px - .5em))
}

動きません。

　両者の違いの検討したうえで、これ。

.container {
  margin-top: max(0px, 16px - .5em)
}

動きます。要するに、単位を解決できていなかったみたいです。

-

【解説】

関数 max の

• lhs は単位なし
• rhs は ?

つまり、rhs の単位を解決したいのですが、lhs が単位がついていないので、どの単位に解決すべきかわからないため、値が無効化されるようです。

lhs に px を付けると、rhs は px に解決すればよいとわかるので、問題ないと。

.container {
  --constant: calc(16px - .5em)
  margin-top: max(0, var(--constant))
}

　こちらが動いたのは、一度変数 --constant に px として代入されているから、margin-top 側でも問題なく解決できた、と考えられます。

　ちょっとしたトラップでした。