以前作ったもの

CSS だけでモンテカルロ法を実装する

→ 本当に CSS はなんでもできる？

「ビューポート幅 (px) の 数値 が欲しい！」

:root {
  --px-width: calc(100vw / 1px);
}

結果 → 無効

CSS の限界

現行のブラウザでの実装では
calc() はまだ単位付き同士の除算ができない

div {
  width: calc(100vw / 5px);
}

本当に？

↑ 余談：w3.org は埋め込みを許してくれない

https://www.w3.org/TR/css-values-4/#calc-type-checking

まあなんか、仕様的にはOK

しかし実装を待ってられない！！

実際にあなたがブラウザの実装を待っている間にも
ライバルはCSSで黒魔術を続けている

今日はこれを回避するテク

元ネタ

CSS Type Casting to Numeric: tan(atan2()) Scalars - Jane Ori

https://dev.to/janeori/css-type-casting-to-numeric-tanatan2-scalars-582j

そういえば最近のCSSのアップデートは目覚ましい

そういえば最近のCSSのアップデートは目覚ましい

ここでおもむろに CSS WG の CSS Values and Units Module Level 4 を見てみる

• なぜかネイピア数 ($e$) や円周率 $\pi$ などの定数が追加されている
• min や max、clamp といった比較関数が追加されている

その他にも

• 端数処理: round
• 剰余関数: rem, mod
• 冪乗: pow
• 平方根: sqrt
• 対数: log
• 指数: exp
• 絶対値: abs
• 符号関数: sign
• 三角関数・逆三角関数: sin, cos, tan, asin, ...

余談：これらを組み合わせると……

• 黄金数: calc((1 + sqrt(5)) / 2)
• ゲルフォントの定数: calc(pow(e, pi))

などが CSS で使うことができる

いつ使うん？

ところでこのような三角恒等式がある

\[\begin{aligned} \tan( \mathrm{atan2}(Y, X) ) = \frac{Y}{X} \end{aligned} \]

• atan2(y, x) は傾き y/x の角度 $\theta$ を表す
• その角度に tan() を適用 → もとの比率 y/x が戻る

CSS には tan() と atan2 がある

tan(atan2()) は単なるスカラー値になる

ブラウザは単位付き値でも評価してくれる

つまり、

:root {
  --px-width: tan(atan2(100vw, 1px))
}

とすると、100vw が何ピクセルであるか得られる

長さをキャストして <number> 型として得る

Viewport を取る例

https://codepen.io/Ryoga-exe/full/KwwYKym

その他にも

その他にも

• フォントサイズ (rem → px)
  • tan(atan2(1em, 1px))
  • https://codepen.io/propjockey/full/WNLLLWy

その他にも

• Container幅 (CQ)
  • tan(atan2(100cqi, 1px))

その他にも

• 時間 (s → ms)
  • tan(atan2(12s, 1ms))